DocuWare Design

Guidelines and resources to create DocuWare digital interfaces

Docy

Localization

Estimated reading: 10 minutes 196 views

Principles and techniques for effective Localization

Localization is adapting the DocuWare product voice, messages, features, imagery, and communication to achieve a linguistic, cultural, and geographic fit and adapt to a specific country and market.

The purpose is to make user experiences for everyone as comfortable as possible across different cultural and regional contexts. As DocuWare products are multilanguage and multicultural, it is essential to consider localization and go beyond translation to create more inclusive experiences.

Localization VS Translation

Localization is often confused with translation, but it goes way beyond. In fact, localization deals with much more than a word-by-word translation of text and content. 

Translation strives for a linguistic equivalent, while localization broadly considers adaptation for a market or cultural context. Localization requires Designers and UX Writers to convert text from one language to another but also to adapt to all the different factors that define a particular group of people: time zones, national holidays, gender roles, product beliefs, and cultural references.

Elements to localize

To give the product and content the look and feel of having been created specifically for each target market and country DocuWare aim at, the Development team should consider localization of the following elements:

Visuals

Changing the visual elements of the product (videos, images, etc.) according to each market’s tastes and cultural traditions.

User Interface

Adaptation of the User Interface controls, guides, components, and all other elements to fit the translated text.

Data

Update charts, statistics, and surveys with local market data.

Units

Conversion to local units of measurement and currencies.

Formats

Adaptation of date formats, phone numbers, and addresses.

Compliance

Gathering information and taking action on legal and local regulations.

This list is not complete and depends on the product, feature, country, etc.

Cross-cultural Design

DocuWare service is international in scope, and the product is available in multiple language versions. Therefore, planning how to serve global users from the very beginning, long before localization begins, is vital. For this, Designers should follow the Internationalization of User Experience, also called cross-cultural UX Design. 

Internationalization/Cross-cultural Design is about designing a product in such a way that localization is easier and can be accomplished without the need for rework or product redesign.

Cross-cultural Design involves:

Usability

  •  A cross-cultural design means letting the users choose which language they want to use instead of imposing a language based on their geographic location.

Personalisation

  • Means allowing users to change their preferences (e.g., change the language, or format (date/number) settings according to the regional requirements).

Adaptation

  • Allowing the local symbols to be displayed instead of international or region-specific ones, not leaving the untranslated text in images, etc.

Localization stages

It can be helpful to think of the cross-cultural UX design process as comprising four steps.

1. Traditional design

UI design

  • UX writing
  • Input controls
  • Navigation
  • Layout
  • White space
  • Visual hierarchy
  • Buttons
  • Content

Usability

  • Learnability
  • Efficiency
  • Memorability
  • Errors
  • Subjective satisfaction

2. Cross-cultural Design

  • Flexible design for varying language length and font size
  • Double-length pre- or pseudo-localization
  • Right-to-left language support
  • Support for local currencies, units, dates, time, and address formats
  • Choice of display language
  • Localization-informed UX writing

3. Localization of Nontextual UI elements

  • Layout
  • Visual hierarchy
  • Information architecture
  • Images
  • Color palette
  • Animation and video
  • Seals and badges
  • Call-to-action buttons
  • Use of white space
  • Sizes

4. Content localization

  • Headings
  • Body text
  • Error messages
  • Onboarding screens
  • Instructions
  • Features descriptions
  • User-generated content
  • Customer/User support emails and responses
  • Social media and other marketing collateral
  • Email marketing campaigns
  • Documentation

Guidelines

Translations size

Designers should always be aware of the possibility of long translations. Designing all user interface components to be extensible can ensure that even longer translations (such as Spanish or German) can be displayed without issues.

Responsiveness

Containers should be responsive. Expansion of the length of text strings is typical when translating them into other languages, so the use of bounding boxes and containers with fixed dimensions should be minimized. This includes buttons. A hyperlink can be considered if a call-to-action requires a long text string.

Expansion factor

Text length often changes when user interface text is translated into another language. For example, English is a very compact language, which in most cases, leads to an increase in the volume of the translated text. Designers and writers should consider extensibility factors when working with user interfaces and controls.

Language Approximate expansion factor
English
1.0
German
1.8
French
1.5
Spanish
1.8
Italian
1.7
Japanese
0.8
Chinese
0.8
Korean
0.7

Words order

The User Interface must be adapted to the possible change in word order, as the latter can alter dramatically in translation. If the layout and functionality of an interface depend on a particular word order, it can break when localized.

Tips

  • Assume the word order of every sentence in your interface will change when translated.

  • Avoid using UI components to build sentences.

  • Avoid splitting one sentence into several strings, known as concatenated strings. If you use concatenated strings, translators won’t be able to change the word order, and their translations won’t make sense.

  • Avoid using variables in your strings, as they will translate differently.

Hardcoding text strings

The development team must avoid hardcoded text strings in the user interface. Instead, all text elements should be made easy to extract for translation, including Alt-text, Titles, Toolbar labels, and Menus.

Fonts

Choosing the right typography can affect how product text appears in different languages. Product fonts must support a wide range of weights and different scripts in order to display similarly on other operating systems, platforms, browsers, etc.

Line breaks

Line breaks can appear incorrectly in languages that do not use spaces between words, such as many CJK (Chinese, Japanese, and Korean) languages. Therefore, designers should use tools that calculate line breaks for CJK languages or automatically create them, which improves text readability.

Bidirectionality

Languages such as Arabic, Hebrew, and Farsi are read from right to left (RTL). While designing for left-to-right languages, Designers and Writers should ensure that the layout design and microcopy are optimized and can be mirrored for RTL languages.

Data, Date, and Number formats

Different regions have varying conventions for data and date formats, including addresses, phone numbers, names, calendars, measurements, currencies, payment methods, and more. It can be a good idea to check the international standard for automatic formatting of numbers, currency, and more, for example, CLDR (Unicode Common Locale Data Repository).

Culturally differences

The UI must not be culturally specific. Referring to specific holidays or cultural practices should be avoided unless it is inevitable that they’re known worldwide. Instead, designers should use visuals, content, and interface formats that are useful and meaningful to users worldwide.

Although icons and emojis are widely used for applications and websites, not all visual elements are interpreted in the same way across cultures. An icon or emoji might have a positive impact on one culture but could be offensive in another. When possible, universally known icons should be used. Usage of country-specific icons and their placement should be mindful.

To ensure that the content used in the product is understandable for the audience, Designers may consult a localization specialist if available, or someone who can serve as a subject matter expert for the target culture or market, such as a local user, an in-market support team, or a translator.

Seasons

Referring to seasons must be avoided. For example, “spring” in the northern hemisphere is “fall” or “autumn” in the southern hemisphere. Instead, it is advised to use the month, quarter, or temperature (if relevant).

Yes
  • New system version is released in October of each year.
  • In November and December, the cloud system experiences higher traffic volume.
  • During warmer months, data centers face a higher risk of cooling failures.
No
  • New system version is released in the fall of each year.
  • In winter, cloud system experiences higher traffic volume.
  • During summer months, data centers face a higher risk of cooling failures.

Non-DocuWare terms

Capitalization of non-DocuWare terms should be avoided. This may cause translation errors because translators expect not to translate capitalized terms.

Labels

Place labels above fields as it accommodates the lengthy character strings that often result from translation better than using left-aligned labels does. Left-aligned labels require more horizontal space, risk breaking layouts, and reduce the available space in which the user can input data.

Examples

Yes

Session expires soon

No

Your session will expire soon

German translation cannot be displayed fully because of the formal use of “You”

Yes

Creation day

No

Created

“Created” will most probably translated in past tense. Be more specific and use a terms that describe the action behind it.

Yes

Deletion rules for emails

No

Deleting Emails

“Deleting Emails” can be translated in a continuous way.

Tips

  • Keep labels short and extend them up to 1.8 longer to ensure that they fit in the page/dialog (German/Spanish can be much longer than English).

  • Do not write “You” in titles because of the use of the formal You in other languages – the title can get very long.

  • Avoid writing labels in an -ing, or -ed form, because it can be translated in ambiguous ways.

Positioning

Fixed positions should be avoided to ensure that content flows naturally. As for responsive containers, any elements in the user interface with fixed or hard-coded positioning risk breaking the layout. Instead, designers should ensure that elements adapt to the surrounding content. It is advised to view the product’s user interface in different languages to understand better how its layout might change.

Icons

Icons and symbology should be adapted and localized to be relevant to the target market. Whenever it is possible, the icon should be combined with a text label to clarify the meaning of the icon. Combining the two can help the user learn what the icon signifies and avoid misinterpretation.

Yes
  • Use a generic icon representing your concept for global relevance.
No
  • Avoid using icons that only have local relevance for global products, like a dollar sign to represent payment or money in countries beyond the US and Canada.

Color

Color choice can directly influence an individual’s product perception. While some colors are interpreted across many cultures with relative consistency, others convey various symbolic meanings across cultures. In addition, colors can hold discrete connotations in different regions. Therefore, Designers and Writers should consider those differences whenever using, describing, or mentioning colors.

Information density

Preferences for information density and design styles vary across regions and cultures. Density and style preferences can be explored with help from a localization specialist or expert in the culture. Within the same product, designs may be changed to better serve audiences with different backgrounds or needs.

Power Users

Remember to support power users. Keyboard shortcuts and access keys must be localized as well.

Translation freedom

Designers and Writers should plan and socialize upfront the strategy about how much freedom the translators can have in adapting product content and controls and how exactly transcreation (a process to rewrite messages to fit the target culture) should be used.

Testing

Standard research and testing, such as functional testing done by Designers and Testers together with native speakers, should help to reveal technical and functional errors in localized content. In addition, designers and Writers should always aim to cover design and copy/microcopy concepts with user tests.

CONTENTS

Loading Patterns

Engaging users while waiting with Loading Patterns This section will expose the ...

Alerts

Keep users on their toes using Alerts Alert is a messaging tool used to notify u...

Banners

How inform and alert users with Banners ? A banner is a powerful tool for commun...

Bias-Free Language

General guidelines for writing about people without biases

Text

Text Area

Time Input

Date Input

Slot Input

Masked Input

Number Input

Text Input

Chat Icon Close Icon