...
Internationalization (i18n) is the process of designing a software application applications so that it can be adapted to various languages and regions without engineering changes. Localization (l10n) is the process of adapting internationalized software for a specific region or language by adding locale-specific components and translating text.
Here are a number of guidelines for designing content with international audiences in mind:
Color
Be aware of the cultural significance of colors. For example, the color red is associated with warning and danger in Western cultures, while it symbolizes luck and happiness in some Asian cultures, like China and Japan. Consult this overview of common color meanings for different cultures to ensure you don’t make any significant mistakes.
Flags
Avoid using flags to represent languages, language and country are different concepts. Flags are symbols that represent countries or nations while languages represent a shared method of communication between people. For example, Spanish is spoken in 29 countries and Spain is only one of them. Countries like Canada have more than 1 official language, hence is not suitable to be represented by a single flag?.
When designing a language selector, use plain text despite its lack of visual appeal. Only use flags to represent countries, not languages.
<<Include recommended pattern for language name localization>>
Right to Left
In certain languages like Arabic and Hebrew, text is read from right-to-left (RTL) necessitating your entire design to be flipped. A modular design approach will come in handy while accommodating RTL languages. For example, the LUX application below is designed to flip neatly for Hebrew and other RTL languages as shown below:
...
Horizontally positioned sections
Text (from LTR to RTL)
Text fields icons should be displayed on the opposite side of a field
Navigation and menu buttons should be displayed in reverse order
Icons that communicate direction, like arrows, should be mirrored
...
Vertically positioned sections
Graphs (x– and y–axes are always shown in the same orientation in all languages)
Clocks
Video/audio controls and timeline indicators
...
Always design with text expansion in mind. When English text gets translated to another language, the translated text can be as much as three times longer. Make UI components expandable whenever possible. Do not assign a fixed-width or height to your UI component unless you have a good reason to.
For longer text, wrapping is a good solution. Be aware of the potential vertical expansion since translated text will take more lines. Truncation with hover text can be a compromise. Be aware that this brings the risk of making the UI less effective.
...