Designing for localisation

Localising content is an excellent way to ensure that users are served more relevant content. But it’s important to make sure that the user experience isn’t disruptive.

Proper localization integrates seamlessly into UI/UX design, making users from diffrent backgrounds and cultural references, feel as if the product was tailored specifically for their region. This article outlines a best-practice approach to building localized UIs, featuring recommendations and insights to guide design decisions.

1. Understand That Localization is More Than Translation

Localization requires adapting every facet of the app—visuals, language, interaction, and layout—to meet regional expectations. Simply translating words is insufficient; effective localization involves ensuring cultural relevance.

“Localization is about much more than just UX design. It’s about crafting cross-cultural products with international UX in mind from the start of the development process.” — Pamela Ghosal

Recommendation:

Start by defining target locales and researching cultural preferences, including language, color meanings, icons, and layout conventions. This way, localization becomes an integral part of the user journey, creating a sense of familiarity and usability for global users.

2. Integrate Localization Early in the Design Process

Localization is most effective when integrated from the beginning of design and development. This “design-led localization” approach allows designers to anticipate cultural needs and adapt the UI early, reducing the risk of rework and streamlining the translation process.

“Integrating translation efforts into the design stage will save you time and money… allowing the design team to seamlessly view and test multiple versions in different languages.” — Gridly Localization Guide

Recommendation:

Adopt design tools and workflows that support early localization, like Figma plugins that sync design changes with translation management platforms. With this approach, designers and localization teams work in sync, ensuring that every UI version is consistent and functional across languages.

3. Account for Text Expansion and Variability

Languages can vary greatly in text length, which affects UI layouts. For instance, German or French text is often longer than English, while languages like Chinese may be shorter. Design with flexibility in mind by leaving ample space around UI text fields.

“As a rule of thumb, your layouts should allow for twice as long phrases, with all text fields and buttons designed with the longer copy in mind.” — Gridly Localization Guide

Recommendation:

Use pseudo-languages or placeholder texts that are double the average length of English content to test your design’s responsiveness. By accommodating text expansion and contraction, you maintain layout integrity across languages, enhancing the UI’s adaptability.

4. Create Culturally Inclusive Input Fields and Icons

When designing forms or icons, consider cultural conventions, which vary significantly. For instance, name fields in some regions may include multiple family names, while icons (such as a “thumbs up” symbol) may carry different meanings across cultures.

“There are many stories of frustration that resulted from culturally insensitive name input fields… Make sure that everything that a user has to input corresponds to local norms and conventions.” — UX Localization Guide

Recommendation:

Research local naming conventions and adapt form fields to accommodate them. When designing icons, choose culturally neutral symbols or consult native users to avoid misinterpretations, ensuring a consistent and respectful user experience.

5. Adapt Layouts for Right-to-Left (RTL) Languages

Right-to-left languages, such as Arabic and Hebrew, require UI adaptations that go beyond reversing text direction. RTL designs may require changes in navigation, icon placement, and directional flows to feel intuitive.

“Supporting RTL languages requires rethinking the layout… In RTL displays, time runs from right to left.” — Pamela Ghosal

Recommendation:

Implement a UI layout that can flip seamlessly between left-to-right and right-to-left formats. By supporting mirrored layouts, you create a user experience that aligns naturally with users’ language habits, reducing confusion and enhancing usability.

6. Incorporate Both Textual and Non-Textual Localization

Beyond text, visual elements such as colors, images, and animations must align with local cultural norms. Colors may signify different emotions or connotations across regions, and images of people, places, or symbols should be chosen to resonate with the target culture.

“Non-textual localization elements include icons, illustrations, photos, and colors… Shopify uses different visuals on their main page in English and Japanese to be more relevant.” — UX Localization Strategy Guide

Recommendation:

Create separate versions of your visual assets for each locale. For instance, adapt color schemes to avoid unintended messages and choose imagery that reflects the target audience’s daily life and culture. These changes help establish a stronger connection with local users, making the app feel familiar.

7. Implement Continuous Localization for Consistent Updates

Since apps evolve, continuous localization enables real-time updates without the need for major translation cycles with each change. By automating the localization process, you ensure that all UI elements stay consistent and up-to-date across languages.

“Following the continuous approach to localization means updating translations as soon as any new content element appears. This keeps translators aligned with the app’s latest features and functions.” — Gridly Localization Guide

Recommendation:

Use a translation management tool that supports continuous localization, allowing translators to track changes, review updates, and maintain consistency across all versions. This approach keeps the UX coherent and prevents outdated content from disrupting the user experience.

Making a Decision: Evaluate Designs for Localized Content

When choosing an approach to localizing your app’s UI/UX, consider the following steps:

Research Target Markets: Understand cultural norms, language preferences, and local regulations.
Assess Layout Flexibility: Test designs for text expansion, RTL support, and adaptability for various input fields.
Evaluate Visual Consistency: Ensure that non-text elements—colors, icons, images—align with local interpretations.
Prioritize Design-Driven Localization: Integrate localization efforts early, ideally during the design phase.
Choose a Localization Management Platform: Select tools that support design integration, continuous localization, and collaboration across teams.

These best practices build a framework for effective localization that goes beyond language to provide a culturally relevant and intuitive experience for all users.