7 essential tips for UI/UX localization for apps

What’s covered:

• What is the app’s UI/UX localization?
• 3 pillars of UI/UX localization
• 7 best practices for effective app UI/UX localization
• What to look for in a localization management tool

Regardless of the niche your application caters to or the platforms it supports, you need to thoroughly localize its UI/UX to ensure a native-like feel, cultural relevance, and linguistic consistency. What does this process entail and what to pay particular attention to?

In this post, we’ll go through the best practices of localizing your app’s UI and UX to help ensure that all versions function properly and meet local expectations. Before we dive into the dos and don’ts, let’s see what UI/UX localization means and why it plays an essential role in your app’s success.

What is the app’s UI/UX localization?

Localization of the app’s UI means translating all interface elements into a target language, while localizing the UX means adapting the whole experience of using the app to fit cultural preferences, language-specific formats, and other local nuances.

NB!: The three things to distinguish here are usability, interface, and user experience:

• Usability corresponds to the ease of achieving a specific goal in the app. In this context, your app should be error-free and users should naturally understand how to perform certain actions within it.
• User interface includes all the visual and interactive (touchable, scrollable, etc.) elements. Not only UI copy and button sizes are important here but the whole screen layout and negative space between elements.
• User experience encompasses a general perception of the app. Good user experience is a result of impeccable usability and well-thought interfaces.

UI/UX localization doesn’t simply end up with translating separate strings of text. Sometimes, it implies rethinking the interface layout or navigational logic. Ultimately, it means tailoring the experience to specific usage habits and local conventions, which may relate to language directionality, cultural perception of certain icons or colors, commonly used date or currency formats, and so on.

Why is it crucial to localize your app’s UI/UX?

So, why should you go to great lengths to localize your app to multiple languages? Here’s what localization will help you achieve:

• Paving the way for global growth. At the end of the day, localized versions of an app mean reaching a wider audience and gaining more streams of revenue. There’s a limit to what you can achieve with a single locale, and entering new markets is a sureproof way to grow.
• Boosting customer satisfaction. Multiple studies show that culturally preferred design elements improve usability. When the look and feel of an app caters to individual cultural backgrounds, it has a higher chance of satisfying and retaining users.
• Increasing engagement and conversions. According to the 2020 CSA research “Can’t Read Won’t Buy”, 40% of customers won’t buy a product if a website isn’t translated into their language and 65% prefer content in their native language even when it’s of poor quality. People respond better to content presented in their language so they will be more willing to pay for your app or purchase something within it if you provide them with localized offers. A study by Distomo on the impact of mobile app translations discovered that localization brings an increase in downloads (up to 128%) and revenues (26%) for each locale.
• Complying with regulations. Sometimes, it might be legally required to provide local language options when launching an app in certain countries. Don’t overlook this aspect when researching target markets and planning the localization.

In any case, you should understand what countries you want to expand to and analyze their markets prior to translation. See if your app can provide value to local users and what culturally specific expectations they might have.

3 pillars of UI/UX localization

There are many practical tips that will help you localize the app’s UI/UX, but for the most sustainable and resource-efficient process, you might want to integrate localization into your product development as early as possible.

The 3 pillars on which effective app localization rests are design-led workflow, UI/UX writing with different audiences in mind, and a continuous approach to translations.

1. Design-led localization. Integrating translation efforts into the design stage will save you time and money, as the localization team will be familiarized with all interface elements and changes as soon as they appear, while the design team will be able to seamlessly view and test multiple versions in different languages.

With Gridly’s Figma plugin, you can effortlessly sync your designs in Figma with localizations. You can create a UI/UX design in Figma and then easily push it to Gridly to get the copy translated. By syncing with Figma, you can easily track all changes and quickly test how designs look in different languages.

On top of that, our latest update allows you to:

• Instantly push text from selected layers in Figma to Gridly
• Generate screenshots of synced objects and store them in Gridly
• Group duplicated source texts to save time on translation

2. UI/UX writing done with the localization in mind. When you consider potential translations from the get-go, it will be easier to adapt the copy to different regions. This means creating a glossary to have unified terminology, avoiding ambiguity and colloquial language, and creating a generally concise and simple copy. If your app does feature some humor or slang and it’s part of your brand, don’t remove it from the original language but create more neutral versions or explainer notes for translators to be stored somewhere for future localizations.

3. Continuous localization. With any digital product, you’ll never have a final version—your app will be continuously updated, which should always be reflected in translations. With a continuous approach to localization, you can keep track of the process without having to launch a separate translation cycle every time there’s a minor change released. Instead, you’ll have your codebase, design systems, and translations connected so that the localization team gets immediately notified about the change, can see and understand the context, and implement translations. To make this possible, use a translation management platform that supports continuous localization.

>> Learn more about continuous localization

If you already have a developed product and you haven’t localized it from the early stages, it doesn’t mean that you can’t sync translations with designs. All you need is the right localization management tool.

Now that it’s clear that it’s best to use a continuous and design-led approach, let’s discover the 7 proven practices that will make your localization process easier and the result more successful.

7 best practices for effective app UI/UX localization

What should you be aware of before hiring translators and launching the localization process? We’ll talk about the 7 crucial aspects of UI/UX localization that you’ll have to deal with.

1. Leave room for longer text fields

If your original language is English, it is comparatively concise. In some other languages, even the simplest fields like “user” or “log in” may include a lot more words and characters. For instance, the phrase “start free trial,” which is a very common UI copy for CTA buttons in apps, will grow from 16 characters in English to 28 in Portuguese (“começar a avaliação gratuita”).

As a rule of thumb, your layouts should allow for twice as long phrases and all text fields and buttons should be designed with the longer copy in mind. Some platforms even have their own tools for testing the UI copy with double-length pseudo-languages—for example, this option is available in Xcode for iOS app localization. (Pseudo-languages means automatically generated phrases of a certain length that help visualize layout issues.)

Here’s an example of buttons of different lengths in English and Dutch where the design is originally made with potential expansion in mind and is automatically adjusted for the length:

Automatically adjusted UI elements for longer text fields. Source: Canva

Working in Gridly, you can set the maximum length for each string (individually or in bulk) so that translators don’t surpass the limit. The platform also allows you to easily filter translations that exceed the limit. Besides, you can define the string length in bytes—Gridly supports byte-based length checks.

2. Make sure all characters are supported

It’s also important to pay attention to font sizes and line heights (the distance between the lines of text) to make sure that words in all languages are displayed correctly (especially if you’re localizing to logographic languages).

Here are some other rules to follow when it comes to choosing fonts and translating textual fields:

- Don’t split strings or provide context if you do. If you split a text string for specific design purposes and parts of a phrase are separated, it’s essential to provide the context for translators. For this, your translation management tool should support adding notes and screenshots.

In Gridly, you can upload files of any type and arrange them by categories or assign an individual file to each record so that translators can learn the context where a certain string is used.

- Use proper encoding. For your app to display all characters correctly, you need to use UTF-8 (for European languages) or UTF-16 encoding (for Asian languages).

- Don’t hardcore any text. Hardcoded strings are generally bad as they don’t allow for flexible changes. You need to have all UI/UX copy easily extractable by a translation management tool.

3. Make user input forms culturally inclusive

There are many stories of frustration that resulted from culturally insensitive name input fields when apps and websites marked last names invalid. Those names were inputted with special characters, started from a lowercase letter, or contained only 2-3 characters.

Make sure that everything that a user has to input corresponds to local norms and conventions. Regarding names, there are many variations of using the first name and the family name, and the format of split fields like “first name” and “last name” doesn’t fit all cultures. It’s better to use a single field instead of multiple ones.

User input form error. Source: Reddit

4. Adjust the layout for RTL languages

If you’re localizing an app to right-to-left languages like Arabic, there are some cultural conventions related to the interface and navigation. People speaking these languages have a different perception of layouts—for instance, they will expect to see menus on the left.

Here’s an example of right-to-left orientation on the Airbnb website (the layout looks inverted to left-to-right language speakers):

Airbnb in Arabic. Source: Airbnb

5. Use appropriate formats

There are many commonly used elements—dates, currencies, units, phone numbers, addresses, etc.—that have a different format based on a locale. Even the tiniest details like decimals and thousand separators play their role in the perception of content.

Consider these details to format your app’s copy correctly. There are many helpful tools that automate consistent usage of local formats—for instance, Date.js for time formats in web applications.

6. Localize non-textual elements

While textual copy will be at the core of your localization processes, it’s also important to examine non-textual elements of the UI/UX. They can include icons, illustrations, promotional photos, animations, etc. Sometimes, it even makes sense to rethink the color palette Local-specific compliance badges, awards, and external links are also part of non-textual elements that you should add to your localization agenda.

As a basic thing, it always makes sense to design the first screen of your app with local offers and local images to be more relevant. See, for example, how Shopify uses different visuals and layouts on their main page in English and Japanese:

Different layouts and visuals for local versions of the main page. Source: Shopify

7. Design the app for locales instead of languages

If you target multiple regions that speak the same language, you might want to adapt your app to each region. For instance, a French version for France and Canada should include a different currency. Plus, it’s better to tailor notifications to each time zone and craft special offers with regard to local culture, events, stars, etc.

Multiple locales in the same language. Source: Canva

Gridly supports more that 200 locales and 70 languages so you can easily create local versions for multiple countries and regions.

This list of tips is not exhaustive but these are the major aspects to be aware of when localizing your apps. As we’ve mentioned, the choice of a localization system will largely define the success of your localization project. You’ll need to find a tool that not only allows for flexible string translation but includes features that make translations easier. Let’s explore what are the most helpful features to look for.

What to look for in a localization management tool

A good platform should reduce manual efforts and serve you as a single point of truth for all the translation-related work. The must-have features of a translation management tool include the following:

• Design integrations. As it’s important to have a seamless sync between designs and translations, search for a platform that supports integrations with design tools your team is using.

With Gridly’s Figma plugin, you can easily review all UI translations in one place and adjust the layouts so that all text fields and buttons remain consistent in every language.

• Collaborative environment. It should be easy for everyone involved in the localization process to communicate with each other and track the progress of their work. Search for the tool that supports setting different access levels (for translators, reviewers, etc.) and allows adding multimedia for context. Also, see if there are integrations with the communication tools you’re using—for instance, automated messages about new translations sent to Slack.

• Translation memory. Translation memory stores your translations so that you can have unified terminology and automatically prefilled translations for similar fields.

• Automation capabilities. Automated workflows can help you improve the localization process by eliminating extra manual steps. Search for translation management platforms that feature automated workflows and AI-powered automation for importing and exporting content, sending notifications and assigning tasks, prefilling translations, etc.

• Continuous localization. Following the continuous approach to localization means updating translations as soon as any new content element appears. You don’t have to wait for a fully released updated version of your product to launch a separate cycle of localization—translate the app continuously. This way, translators will always be on track with what has changed in the app’s functionality or design and won’t waste time on familiarizing with each new version.

• Localization testing. Testing is an inevitable part of localization, and it makes sense to adopt a tool that includes quality assurance functionality.

With Gridly’s localization QA capabilities, you can easily categorize different issues and track your progress in translating the game’s UI.

Expand your reach with effective UI/UX localization

To build a robust UI/UX localization strategy for your application, we recommend opting for continuous localization and adopting a suitable translation management tool for controlling the process.

To make sure all language versions are culturally relevant and linguistically correct,

• research each target market to learn about regulations, sensitivities, norms, and conventions;
• design all fields with a longer copy in mind;
• localize both textual and non-textual elements of your app;
• adapt the layout when it’s needed to fit local expectations.

If you’re looking for a localization tool that adapts to your needs, check out Gridly’s features or schedule a demo to see it in action.