I18N Design and UX Consideration tips:
- Allow for the expansion of UI elements: All UI elements that include text — strings and integers displayed to the user—must be flexible to accommodate longer or shorter words. Usually German words are longer than English strings while Asian languages are usually shorter. As a general rule, if the English text is less than 10 characters, plan for at least a 300% expansion for translated strings. If the English text is more than 10 characters, 30% expansion should suffice.
- Font size & emphasis (italics & bold): A font size less than 8 point font is really hard to read in English, but it’s impossible to read in Chinese. Also font emphasis don’t register in most East Asian fonts.
- UTF-8: Use UTF-8 everywhere. This includes in your HTML, server-side language, database, etc. Unlike other encodings, UTF-8 encoding handles almost all languages really well.
- Keep graphics, icons, and images separate from the text.
- Keep images regionally related: A simple example is if there is a picture of a car displayed, updating the picture for regions where cars have the driver side on the left or right and drive on the left or right side of the road would be a good idea for a fully localized app.
- Keep colors culturally relevant and appropriate: In the West, red often signals danger but in parts of East Asia, red is associated with happiness. Notice +8 in the below image.
- Use generic versions for contact details: Using more optional fields and not marking all fields as required, e.g. Many countries such as Hong Kong don’t have post codes.
- Avoid using countries flags to represent languages or locales: Many languages are used across different countries. For this reason, it’s advisable not to use a single flag to represent various languages, such as the Portuguese flag for both Portugal and Brazil. A more culturally considerate option is to use regions, like “Brazil,” or specific languages, like “Brazilian Portuguese.” Law/Policy: For example, in EU Cookies should be noted to the users. ----- ## I18N implementation tips:
- Avoid “Just concatenating strings”: Translating languages is more than converting individual words. The way sentences are structured differ across languages, and concatenating strings makes it difficult for translators who must consider word order, gendered words, abbreviations, and more! Best practices recommend building layouts and strings for translation, that let translators change the order of words if needed.
- Keep keyboard short-keys alphanumeric: Example: Although Spain & Mexico both speak spanish, they have different keyboard layouts. For example, the “@” symbol on a Mexican keyboard is on a number key, whereas on the Spanish keyboard the same symbol is on a letter key.Keeping short keys alphanumeric minimizes user error, improving the overall user experience.
- Sorting and filtering across different locales: A table that sorts columns of strings by A-Z using ascending and descending characters does not always work across all locales, particularly with languages that have different dictionary orders than English — such as Chinese, Arabic, and Russian. In Javascript, String.prototype.localeCompare() is one simple solution to resolve this issue.
- Units & Maps: e.g. weight units differ from a country to another e.g. in US pounds is the default weight unit while in Egypt it is kilos. Also for japanese user it is more relevant to show a map Tokyo instead of LA.
- Test across multiple languages: To ensure an app is capable of displaying locale-specific content of varying lengths and formats, instead of just using basic Lorem Ipsum, use the Random Text Generator to get test data similar to Lorem Ipsum, but in different languages.
- Continuous localization: Continuous localization optimizes the process of Continuous Integration / Continuous Deployment (CI/CD) by including machine-translated strings for testing. This helps with local development quality checks, particularly for common I18N bugs.
Top comments (0)