Designing for Global Audiences

Work with UX/UI team and design for globally accepted products

Creating a user interface (UI) that is globally accepted is crucial for designers. It saves time and effort by avoiding the need for customized UIs and codes for specific markets. This article will introduce common pitfalls in internationalization (i18n) designs and provide solutions.

Text Contraction and Expansion

Different languages have varying character counts to express the same meaning. For example, to express “Log In”:

There are several factors can cause text contraction and expansion:

Number of Characters: As you can see, Chinese is shorter due to less characters, leaving some gap in the button. In Spanish and German, however, more characters caused text expansion, which may cause truncation in actual user interface.

Character Width: As the example shown above, Japanese has only four characters, but it’s still longer than English due to the widths of Japanese characters.

Character Line Height: Thai has a much higher character line height than English. (See example below)

Reference: https://www.w3.org/International/articles/article-text-size

Solutions:

1. Planning for larger space: Asking UI designers leave larger spaces for text in buttons, accounting for 20%-30% of space for text expansion.

   
   

2. Re-arrange the text modules: Too much space can leave awkward white spaces for some languages. In such cases, re-arranging text modules for specific languages can help.

   
   

3. Thoughtful Use of Acronyms: Acronyms like FAQ may not be familiar in some languages. Instead of “FAQ,” use “Help Center” or “Help.”

   
   

4. Responsive Design: Adopt responsive design to automatically adjust button sizes based on character sizes.

   
   

5. Character Limitation: If revising the UI is not possible, apply character limitations during translation. This may add additional fees and is not always feasible for all languages and UIs.

By considering global audiences during design, the time and budget for revising designs can be minimized.

Typography

A script is a set of characters or symbols used to represent languages in written form. Scripts can be used by one or more languages. For example:

• Latin Script: Spanish, English, German, French

• Greek Script: Greek

• Cyrillic Script: Serbian, Bulgarian, Russian

  
  

Selecting the correct fonts is crucial to avoid “Mojibake” or “Tofu box.” Google’s Noto fonts support more than 1,000 languages and 150 writing systems. Font size should also be considered for each language.

More details can be found at: https://fonts.google.com/knowledge/glossary/script_writing_system

Word Order

Word order can change in translation. Fixed positions inside a sentence can cause localization issues. For example, “98% of the graduates secured a job” may translate to “Graduates secured a job 98%.”

To design for global audiences, avoid fixed positions for variables and placeholders in sentences. Use labels and links when possible.

Reference: https://polaris.shopify.com/foundations/internationalization

Copywriting

UX writers often use idioms or phrases with cultural implications that may not be understood or accepted in other languages. For example, “In a snap,” “Get the ball rolling,” “Ballpark figure,” etc. These phrases can cause wrong translations or project delays.

Solutions:

1. Update Phrases: Work with UX writers to update phrases to something understandable by most cultures.

   
   

2. Provide Context: Make notes and provide screenshots to linguists explaining the meaning and context of phrases.

   
   

3. Source Text Legal Compliance: Review the source for local legal compliance. For example, China’s advertisement law,restricts certain words, such as “The best”, “The highest level”, and “No. 1 in the similar product”.

   
   

4. Translation Legal Compliance: Ask language service provider or legal specialists to review and customize the translation for specific languages that need legal compliance. And develop a script to check restricted terms before publishing the translation.

Other Considerations

Designing for global audiences involves considering various factors. For instance, different countries use distinct icons to convey the same meanings, colors may have varying interpretations across locales, and even identical emojis can carry different connotations in different regions. Elements like graphics, bi-directional languages, capitalization, line breaks, and form fields must all be taken into account in the design process.

For a successful localization project, a skilled project manager must advocate for awareness of these cultural differences throughout the entire process. It is crucial for professionals in this field to continuously learn and adapt to these nuances over the course of their careers to create designs that resonate with people from all around the world.

Incorporating Localization Before Design

Google’s UX/UI design course defines a design system as a series of reusable elements that allow teams to design and develop a product following predetermined standards. This system usually contains four categories:

• Develop Library: Contains codes for UX engineers.

• Foundations: Informs the basis of any great user interface, including accessibility standards and essential patterns for layout and interaction.

• Styles: Provides visual aspects of a UI, including icons, shapes, and typography.

• Components: Interactive building blocks for creating a user interface. Localization project managers can create customized right-to-left components in this section.

Here is an example of a design system: https://m3.material.io/

The localization project manager can work with the UX team to review the current design system to identify any designs that may be offensive to some countries. Additionally, they can collaborate with the UX team to integrate localization guidelines into the design system, ensuring that resources and standards are shared across all UI/UX team members.

By incorporating localization from the beginning, designers can ensure their products are globally accepted, saving time and resources in the long run.