...

When designing a language selector, use plain text despite its lack of visual appeal. Only use flags to represent countries, not languages.

Design for Text Expansion

When English text gets translated to another language, the translated text can be as much as three times longer. Leave blank space around condensed UI components, such as buttons and tabs.

Make UI components expandable whenever possible. Do not assign a fixed-width or height to your UI component unless you have a good reason.

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.

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 application is designed to flip neatly for Hebrew and other RTL languages as shown below:

...

Most of the recent native frameworks are now mirroring aware, making it easier to create a mirrored layout with very limited code changes.

Design for Text

...

Expansion

...

When UI English text gets translated into to another language, the text length often changes. For example, English is a very compact language, leading to longer translated text in most cases.translated text can be as much as three times longer. Leave blank space around condensed UI components, such as buttons and tabs.

Make UI components expandable whenever possible. Do not assign a fixed-width or height to your UI component unless you have a good reason.

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.

Text Length and Size Expansion Considerations

The general rule for text expansion is: “the shorter the English text, the longer the translated text is likely to be”. The following table shows the average text expansion rate for different English text lengths from IBM’s localization guidelines:

English word expansion guidelines

In addition to English text length, the target language also has an impact upon the amount of expansion. The following table shows the expansion factor for the English text “Share” into various languages:

Expansion factor for the English word “Share”

In general, Asian languages are more space-friendly since they tend to be more compact than European languages. But there’s no “always”. CJK (Chinese, Japanese and Korean) languages have more complicated characters than Latin characters and their characters tend to be more square, thus taking more horizontal space. Japanese is especially problematic due to it’s use of Katakana for transliteration of foreign words. For example, “Follow” in English and Japanese both have 6 characters, but Japanese is 20% longer than English due to wider characters.

Date and Time

Date and Time should always be stored in UTC to allow it to be converted and displayed in multiple time zones. LUX components and guidelines follow the conventions detailed below by default:

• Basic date format: dd-mmm-yyyy, for example 15-Aug-2020

• For the current day and the day before that you may use Today and Yesterday

• Basic time format: #0:00 PM/AM (for example 1:36 PM)

• For combined date and time use the word at. For examples: 05-Mar-2020 at 7:27 AM or Yesterday at 12:16 PM

All applications built for Verint should allow the above defaults to be automatically changed based on the users specified browser locale (or manual setting if an application allows it). Details of country and region specific conventions are available here.

Decimals

Headers

Labels

Capitalization

...