Best practice: Designing applications for different languages and regions

Guidelines for layout

  • Leave enough space in your UI for translated text. The height and the width of text might expand when translated from English to other languages. For labels and other short text strings, prepare for up to 200% expansion. For lengthy text (more than 70 characters), prepare for up to 40% expansion. Where possible, place labels above the associated field. Leave blank space at the end of each label.
    This screen shows example text in English.

    This screen shows example text in French.

  • Try to avoid displaying truncated text. The meaning might be unclear to users if the most important text does not appear. First, try to reduce the size of the text. If you reduce the size but you cannot read the text easily, try wrapping the text onto two lines instead. If you cannot wrap the text, consider using an abbreviation. Otherwise, use an ellipsis (...) to indicate that the text is truncated.
  • Make arrangements for displaying the position of a contact's title, full name, and address on a per-language basis. These items display in a different order, depending on the language (for example, title, first name, last name, or last name, first name, title). In some countries, the zip/postal code can appear before the name of the city and contain letters as well as numbers.
  • If users have the option to change display languages, display the name of the language in that language. For example, display "Italiano" instead of "Italian."
  • Test translated UI to verify the layout of the UI.
  • During testing, type a pangram in the target language. A pangram is a sentence that uses each character in the alphabet. Pangrams are useful because they include diacritics that can appear above, below, or beside a character.

Guidelines for color and graphics

  • Be aware that colors, graphics, and symbols can have different meanings in different cultures. If you are designing an application for a specific market, carefully consider the cultural implications of your design choices.
  • Avoid text and numbers in icons and images because they require localization.
  • Avoid using national flags to identify languages, user IDs, or countries. Use text instead.
comments powered by Disqus