A Localization cheatsheet: Designing for international audiences
Introduction:
Co-written by Alberto Ferreira and Thomas Nishantha
Designing for international audiences is a complex task. Local practices and perceptions change, and no user is ever the same. However, some basic rules apply. Initially conceived as a workshop aid to be used at GEXP Barcelona hosted by Alberto Ferreira, this cheatsheet will help you to navigate the shallows of internationalization, localization and beyond.
- Numeric, date and time formats
Consistency should take a backseat to local preferences. You wouldn’t want your users to use AM and PM (used mainly in United States, Canada, Australia, New Zealand, and the Philippines) in a 24-hour world market. Time is confusing enough already, even when their watch is showing the correct hours.
Check the local usage of commas and points for decimal marks and grouping separators: Asia, Australia, US and the UK, for example, use the decimal point (e.g. $125.49), whereas many European and South American countries use the decimal comma (e.g. €125,49).
2. Use of currencies
You can use currency codes as per the ISO 4217 standard in certain development environments (e.g. 1 EUR = 0.8 GBP). However, it is more common to use currency symbols as Unicode characters. Currency symbols need to be placed in the proper position relative to the number, and keep in mind that currency exchange needs to use the appropriate FX rate. There are several APIs that support this type of real-time exchange.
3.Keyboard usage
Keyboards are amongst the most variable pieces of hardware in the world. The number of layouts available is staggering. Layouts like QWERTY (the most common one), AZERTY (France), and QWERTZ (Germany, Austria) dominate in the West. In countries like China, US keyboard layouts are complemented by a character romanization called Pinyin, which enables Chinese speakers to build characters based on pronunciation. Always keep in mind the keyboard layouts most often used in the target markets.
4.Collation and sorting
Even though the laws of nature apply everywhere, the way in which we sort and categorize things does not. Where do accented characters like “ô” come in a list? How about capitalized letters? Does “1” come before or after “11”? The important thing is to remember that there are different properties that regulate the position of items. Be sure to check international standards and collation properties.
5.Symbols, icons and colors
Color remains one of the most powerful vehicles of meaning. Little wonder that cultures differ so much in its perception. Use appropriate colors consistently in your design and always consider the meaning in the target culture (e.g. white is a color of mourning in Arabic cultures).
Can’t find the most appropriate icon for your shopping cart for your Korean locale? Iconography can very sensitive as well, which is where international standards can be of help. Be sure to check local sites and online sources (like the ISO library) for guidance (or inspiration.
6.(Insensitive or misinterpretation of) Images and graphics
Gestures, body language, and social cues can be perfectly harmless in one culture, but resonate offensively with another. Ensure that the graphics used in your materials are appropriate to the target culture. Sexual content should be used with great care. Appropriation of symbols of other cultures should also be recognized.
7. Enabling Unicode
Unicode is the standard character encoding for scripts and characters of languages all over the world, and it keeps getting better with each new version. It contains characters for all the major languages, as well as dozens of long-tail ones like Syriac and Tibetan languages. It even standardizes the emojis commonly used in chatting apps like Whatsapp! Ensure all of your strings and localizable content materials use Unicode in order to avoid weird character renderings and other problems. To use Unicode in a webpage, ensure that its HTML <meta> tag includes the code charset=”UTF-8”
8. Supporting Right-to-Left Languages
A common Abbreviation for this is RTL, some languages like Arabic and Hebrew are read from right to left. This change needs to be considered from both your development team and interface designers. The Interface elements needs to be tweaked (repositioned) or fully redesigned to not confuse “RTL users.” One of the more easier ‘web’ fixes for RTL you can achieve by using the CSS direction property.
9. Hard-Coded Numbers, Units, Dates And Times
Relevant elements must automatically adjust the way they are displayed, depending on the region/locale of the website or visitor. If I am a user from the US, I want to see measurements in inches and pounds etc, but if I am French, I would prefer to see centimeters and kilograms. This can affect product descriptions, address details, shipping information, and much more. Different technologies have different frameworks or libraries like the Yahoo Babel plugin for React or the Babel framework for Python.
10. Interface patterns
Some UI patterns are highly like to break when used with other locales, such as dropdown, horizontal menus, or the so called segmented control used in iOS application design. Most of the times they break just because the translated text-string is too long to be displayed correctly. In other cases, patterns need to be mirrored entirely as described here in Google’s Material design guidelines
11. Dynamic button width and/or height
Designers must specify a minimum width of buttons that appear on the interface of an website or app. The maximum width must be dynamic depending on the length of the text string. You don’t want the text inside your buttons to be wrapped into 2 lines. Most modern frameworks such as Bootstrap automatically resize the width of a button.
12. Forms and input fields
The number of usability issues that come with forms are staggering, from labelling the input fields, to typos or invalid selections. These problems can become even worse when you need to localise the forms. Make input fields as smart as possible. The form must automatically adapt itself to what the user expects to input or select in their own language or regional settings.
13. Varying legal requirements
Discounts, price displaying, and T&Cs are all subjected to laws and regulations of local governments or other organisations. For example, one of the more common UI/UX issues is when and how to display price breakdowns.
14. Height of text paragraphs
Did you know that height of a text paragraph can increase by 30% in other languages? Take this into consideration when you want desktop content always to appear ‘above the fold’. This can be especially problematic for UI patterns such as pop-ups and overlays that require fixed heights of elements. Good UI/UX designers always take this into consideration when choosing the right UI patterns. And of course it helps a lot when all text properties are set up correctly, also from an aesthetic perspective.
15. Text embedded in images
Embedded text in images can drastically (and negatively) impact the workload of your design team as they have to create a separate asset for each and every market. Text must be part of the code so that it is dynamic and can easily be adapted through the CMS or other set values. You also want your text to be clear on all devices and different screen sizes (browser window). This cannot be achieved with text that is embedded (and thus static) into an image.
16. Choosing the right font(s)
Most users won’t notice the font-type that you are using on your website or app, But they will definitely notice when the font is unable to display specific characters in their preferred language. Try to pick a font that supports multiple languages. But, even if you have carefully picked the right font, you might face other issues such as characters that change in height and width. What you can also do is to choose specific fonts for different languages. A recent trend in font design is to develop fonts that support many languages such as Google’s Noto font.
Outro
Internationalization is an ongoing concern for developers and designers alike, and the earlier you start testing and validating your designs, the better. Make sure to use pseudo-translations to test the flexibility of your design, and work closely with copywriters in order to produce clear and easy to translate source copy. Test internationally whenever possible, even if just going to the local airport and talking directly with foreign users. Most importantly, build awareness inside your team and company. Ethnocentrism is not a choice. In this complex universe of users, every little decision matters in order to achieve success — and build understanding.
Click here to download a righ res. png version of the cheatsheet.
