When you’re designing for international users of web products, internationalization and localization are things you have to consider. With the two together, we can call it web globalization (= internationalization + localization). The first and right instinct is to deal with translation, but it’s more than just using an auto-translator to simply translate the language itself. There are much more designers need to keep in mind and be aware of.
Based on the 2018 Web Globalization report from Byte Level Research, a website can communicate with approximately 95% of the world’s internet users by supporting 47 or more languages. The top 25 best global websites support an average of more than 80 languages, up from 54 languages last year. Surprise or not, Wikipedia, with support for 298 languages, become the best global website in 2018, followed by Google. Since Wikipedia is completely supported by users, it actually indicates the high demand for the presence of different languages on the Internet.
Globalization = Internationalization + Localization
Before jumping into what to do, let’s take a look of the definitions first:
- “Internationalization is the design and development of a product, application or document content that enables easy localization for target audiences that vary in culture, region, or language.”
- “Localization refers to the adaptation of a product, application or document content to meet the language, cultural and other requirements of a specific target market (a locale).”
The goal of internationalization is to make localization easier, while localization focuses on one specific target market at a time. Internationalization is about setting up the core process, and localization handles the details. In other words, internationalization is more about the layout and structure, while localization is more related to the cultural factors and content.
Things about Translation
A screen is like a pre-formatted document, but with more limitations. Languages vary in length, style, and metaphors after being translated. John Saito, a designer at Dropbox, wrote a great article about internationalization that I highly recommend reading. He shared 7 tips which cover the most common situations when we should consider internationalization:
- Leave room for longer translations
- Avoid putting text in narrow columns
- Don’t embed text in images
- Don’t create sentences with UI elements
- Watch out for metaphors
- Use descriptive feature names
- Provide alternates for translation
He also shared a way to use Google Spreadsheets to estimate translation lengths in the different languages, which is a quick technique everyone can use. Another designer commented below providing a link to a public version of the spreadsheet. You can make a copy and use it yourself.
Besides, the typeface, font size and line height are also need to be considered. Same typeface for different languages may have entirely different visual styles, leading to different brand identity. The font size and line height looking good in English may make other languages unreadable.
There are some languages, such as Arabic and Hebrew are read from right-to-left (RTL) have different displays with left-to-right (LTR) languages. Google Material Guideline provides some great instructions about how to handle the UI for “Bidirectionality” in different situations.
Cultural considerations
We all know there are huge cultural differences among countries or regions. Therefore, designers should be very sensitive to local cultures. Icons, colors, images may need to be altered on a localized website because they may have a different symbolism in the local culture.
For examples, although the “thumbs up” gesture generally stands for positive meanings, it is actually an insult in some middle east countries and Australia. That’s probably part of the reasons why Facebook change their Like and Share buttons in 2013, replacing the iconic “thumbs up” with Facebook logo.
Other cultural considerations include using different brand name and taglines, adjusting the writing style and tone, respect local traditional customs.
Others logistical differences
Last but not least, there are other obvious logistical differences that sometimes may be neglected:
- Local content (promotions, marketing, logistics)
- Currency
- Time zones, Daylight Savings, calendars
- Holidays
- Measurements
- Telephone numbers
- Address
- Name and title
- Local search engines
- Local laws and policies
- File weight for users in generally low bandwidth regions
For examples, the format of the address and phone number are different around the world. When designing those input field, we can either provide a more universal design or changing the format based on the country user select at first. Winter in the U.S. is the summer in Australia, so it would be weird if an e-commerce site displays the same clothing.
Overall, web globalization is not an automated process. It requires a dedicated global team to maintain, monitor, and update. Depending on the products and targeted market, the work varies from teams to teams, but it’s always good to take those basic factors into consideration when designing for international users.
Pratt students or alumni can refer to the presentation for examples: https://docs.google.com/presentation/d/1ZoIIb322N7a-KoJ-6wcYfTlC8SLYyxjhe9jtDKxYS9w/edit?usp=sharing
References:
[1] Internationalization & Localization: https://uxknowledgebase.com/internationalization-localization-d84795b7962c
[2] Design for internationalization: https://medium.com/dropbox-design/design-for-internationalization-24c12ea6b38f (Google Spreadsheet: https://docs.google.com/spreadsheets/u/0/d/1EBNCqbiK-X-DljBD1WhfmsLXaO4iJYGe0Mi5yTuiUb0/copy)
[3] Must Do Checklist for Going Global on the Web: https://www.thirdandgrove.com/must-do-checklist-for-going-global-on-the-web
[4] Form Internationalization Techniques: https://medium.com/flexport-design/form-internationalization-techniques-3e4d394cd7e5
[5] International Address Fields in Web Forms: https://www.uxmatters.com/mt/archives/2008/06/international-address-fields-in-web-forms.php
[6] Localization vs. Internationalization (W3C): https://www.w3.org/International/questions/qa-i18n
[7] Material Design-Bidirectionality: https://material.io/design/usability/bidirectionality.html#
[8] How To Internationalize Your Typography: https://usabilitygeek.com/how-to-internationalize-your-typography/
[9] Personal names around the world: https://www.w3.org/International/questions/qa-personal-names
[10] A Developer’s Guide to User Experience in App Localization:
https://phraseapp.com/blog/posts/app-localization-developers-guide-to-user-experience/
[11] 2018 Web Globalization Report Card: https://bytelevel.com/reportcard2018/ReportCard2018_ByteLevelResearch_SAMPLE.pdf