The Infographic

When a text is translated for a user interface, sometimes the line length will cause a problem. The same content in one language can be too long in another language. This is quite common when translating Chinese apps into English or English apps into German. In the infographic below, you will see how the same text when translated into different languages vary in line length. Some contrasting drastically to English, for example.

To create this infographic, we decided on the UN’s Universal Human Rights text, which is available in over 500 languages. We copied the text from the website in each of the languages. Then we pasted it into Word to compare the line lengths. Thanks to “Word Count”, we were able to take note of how many lines the text took up in each language. The margins of our Word document were standard, with one inch on all sides, and with a left gutter position of zero inches. There could be many different ways to measure the lines, but we decided that this was the simplest, most straightforward way.

Localization

After putting the infographic together we saw how the characters of one language could change the amount of space it took in a document versus another. Translation can largely affect the user interface of an app. Text can look great in an app in one language, and completely off in another. To translate your software’s user interface (UI) is not enough. Your software requires user interface localization.

Localization means adapting the UI to the special needs of a multilingual interface. This may involve several modifications.

  • The interface may need to be flipped for a language like Arabic since it’s written from right to left.
  • The date format may need adjusting, to adapt to China (year, month, day) or Australia (day, month, year).
  • The way names are handled may need changing to adapt to countries like China in which the family name comes first and the given name goes last.
  • Code that concatenates strings with variables may also need changing to adapt to other languages such as Japanese that needs completely different word orders.

(See an example of this in the images below.)

App in Chinese
App in English

User Interface

Designers should keep in mind the resizing of backgrounds and widgets to accommodate the varying line lengths of the same text in different languages. In designing not only mobile-first but also with different languages in mind, designers can substantially improve the user interface of apps.

When doing research on the subject, we did not come across many articles on the topic except this Medium article by prototypr, which turned out to be very helpful. They suggest the following three things when designing UI that will be translated into various languages:

  1. As we have mentioned, remember that different languages will change the total line length of the same content.
  2. The direction of a language affects the design. For example, like Arabic, a language written from right to left instead of left to right.
  3. Different countries have different standard formats. Kilometers mean nothing to some Americans like miles don’t mean much to someone in Europe.

Design Suggestions

Prototypr suggests the following design principles to avoid having an app that is unusable or confusing for a user when translated into different languages:

  • Maintain a lot of blank space in the design
  • Keep in mind varying line lengths and leave enough space for them.
  • Design for settings where page elements or text will wrap to the next line.
  • Be aware of what elements need reversing and which don’t for languages written from right to left (RTL).
  • Conduct usability and interface tests with a translator or native speaker of the language.
  • Methodologically and thoroughly localize an app from one language to another, especially if it’s an RTL language.
  • Design according to the country where the app will be used in. Also, include the time and measurement formats that that country uses.
  • Grant the user with the option to change the data format if this is applicable and if it will improve the user’s experience.

Here at Ivannovation, we are uniquely qualified to help you with your software translation project regardless of whether it is an iOS or Android app.


This article was first published on the IVANNOVATION Blog.


If you liked this article, share some reading love by clicking the clapping hands below.

Find solutions to your language and translation needs at www.ivannovation.com

IVANNOVATION

A premium translation and localization provider

Gisel Paola Olivares

Written by

IVANNOVATION

A premium translation and localization provider

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade