Providing for UI expansion

Translation is the re-expression of concepts, and the space required to express a concept in writing varies among languages. Many data processing concepts were developed and published in the USA and the United Kingdom using English jargon and acronyms. Examples such as CRM (Customer Relationship Management), SCM (Supply Chain Management), and RFID (Radio Frequency Identification) require lengthy wording in other languages. To ensure that the translated version preserves the concept and retains readability, sufficient presentation space must be allowed for UI expansion.


Guideline A3


Provide for effective presentation of the UI after the expansion that results from translation.


The following table provides a good indication of the amount of additional space needed to contain a text passage after translation. The numbers represent statistical averages. In some situations they will be overly generous, while in others the translator will have difficulty fitting in all the translated words.

Ideally, the translator can use any amount of space, but use the following list as a rough guide to the space that should be left for UI expansion:

Number of Characters in Text Additional Physical Space Required
Up to 10 100% to 200%
11 to 20 80% to 100%
21 to 30 60% to 80%
31 to 50 40% to 60%
51 to 70 31% to 40%
Over 70 30%

The number of characters in the text string includes the spaces and punctuation marks within the string. For example, the string,Hello World!, contains twelve characters.

Example: The following is a message where the translated strings exceed the values in the rough expansion guide shown above.

Language Message Text Length Expansion
English Set the power switch to 0. 26 chars -
French Placez l'interrupteur de tension à 0. 37 chars 42% more characters
Spanish Ponga el interruptor de alimentación de corriente en 0. 55 chars 112% more characters

Expansion of translated text inside GUI controls such as a button can cause the GUI control itself to expand. Sometimes, a series of GUI controls that used to fit on one line will wrap and overflow to the next line after translation thereby changing the layout of the screen. There are also cases where the expansion is vertical (rather than horizontal) when rendering text that is translated into ideographic languages.

Expansion resulting from translation has a different effect on each type of interface design. If a application requires that the translated message fits into the same space as required by the original English message, the result is truncated and not usable. A application that presents messages in windows may not have to provide any blank space for expansion, but certainly must allow for the enlargement of the windows and the fields within the windows. Usability comes into play here as the entire expanded window may not fit into a low-resolution display, or the expanded field may not fit into its parent window.

Blank spaces and flexible boundaries are both valid techniques for meeting the translation expansion requirement.