Making your app multilingual is a key step in any global strategy, but differences between languages and cultures can lead to serious usability problems.
To create a smooth, engaging experience for users – regardless of the language they speak – it’s important to be aware of these differences. They can affect everything from text layout and navigation to the colours and graphics you use.
In this article, we look at some of the most common user interface (UI) mistakes with multilingual applications and how to avoid them.
Mistake #1: There isn’t enough space for your text
The space needed for text varies between languages. Some languages need almost double the amount of space than English; some will fit in space half the size.
German and Russian can have 30% more characters than the equivalent text in English, so it’s best to plan for 50% extra space. You’ll also need to bear in mind that languages like German often use a long compound word in place of a number of smaller words.
For example, Rechtsschutzversicherungsgesellschaften is believed to be the longest German word in everyday use. Its English translation is “insurance companies that provide legal protection”.
While the English version could easily go onto multiple lines, the German translation can’t be separated as easily. This will inevitably lead to issues in layouts with restricted widths.
Text can expand vertically too
Translations into Chinese, Japanese and Korean will typically contract, but you might need to use a bigger font or more white space between characters to make the text legible.
For example, “computer” in Japanese is “コンピューター”, which has fewer characters but requires more white space.
Text expansion and contraction doesn’t just affect the width of your layout either. The complexity of Chinese, Japanese and Korean characters can result in vertical expansion, where your line-height needs to increase.
Generally, it’s best to give 50% extra space when you’re translating text into another language. If you don’t plan for your text to expand or contract, you might end up having to cut your translation down to fit the space available.
Mistake #2: The formatting doesn’t fit right-to-left languages
When you’re designing for right-to-left languages like Arabic, Hebrew or Urdu, your entire layout needs to be flipped to be read right to left – not just the text.
If you don’t get your formatting right, you’ll run into issues with tables and features that include scales. For example, imagine you have a scale where one is low and 10 is high. If you don’t mirror it to fit right-to-left readers, 10 will be low and one will be high.
The same applies to sequences of images. If you’ve got a three-step guide on how to set up your app, the first step will need to be moved from the left-hand side of the page to the right.
Mistake #3: Your colours aren’t culturally appropriate
Many Asian writing systems don’t use bold or italics for emphasis, so you’ll need to use colours to highlight words or phrases.
However, when you’re developing multilingual and multiregional applications, it’s vital to check that any colours you use don’t have negative cultural connotations.
- Red is often the colour of love in the Western world, but in South Africa it represents misery and mourning – the red section in the country’s flag symbolises the struggle and sacrifices made in past conflicts.
- Yellow represents wealth and status in Africa, but it’s the colour of mourning in much of Latin America.
- Purple has associations with royalty since purple dye was difficult to produce for centuries, but it’s worn to funerals in Brazil and much of Europe.
Mistake #4: It’s difficult to select a language
One of the biggest mistakes you can make with a multilingual application is to make it hard for users to select their language.
Your language selector needs to be easy to find and each language should appear in the native script. Otherwise, you’ll end up with a scenario where a user has to find the right link in a language they don’t understand.
Here are two other common mistakes to watch out for with language selectors.
Using flags to represent languages
A common faux pas in global gateway design is to use flags to represent languages. It might seem like an obvious decision until you remember that countries can have multiple languages.
Clicking on an Indian flag and displaying text in Hindi won’t help users that speak one of India’s other 21 major languages.
Flags also pose a problem because languages are often spoken across multiple countries. Clicking on a Spanish flag might serve a version of your app that’s localized to Spain, but is that version appropriate for users based in Latin America?
Automatically selecting a user’s language
Many websites and apps will automatically select a language based on a user’s IP address, then divert the user to a localized version. This creates a smooth experience for native users, but it’ll make it tough for tourists or immigrants to use your app.
If a non-Korean speaker lives in Korea and gets served a version in Korean, it will be hard to navigate to a different language unless you’ve made the global gateway immediately obvious.
You can get around this by letting users choose their region and language when they first hit your app. That way, a user in Korea could select Korea as their location and English as their chosen language.
Mistake #5: Your app isn’t optimised for local internet speeds
There’s no point spending time localizing your app if you don’t account for local internet speeds. Your app can’t benefit users if it won’t even load.
Internet speeds vary hugely between countries. For example, a website or app designed for users in Japan will load much slower in India or Venezuela.
Make sure you match your app or site to the internet speed of your target location. You can do this by removing or editing videos and graphics that could take a long time to load.
Mistake #6: Your text is embedded in graphics
Embedding text into graphics makes the localization process much harder because you can’t easily access the text for translation. As a result, the graphics will need to be created from scratch for each target language.
It’s best to use the HTML of the site to overlay text onto graphics, rather than within the design file. That way, it’s easier to switch out the text and image with each localized version of your app.
Like choosing culturally-appropriate colours, existing graphics might not work for a multilingual application. An image that resonates with US audiences might feel strange or inappropriate for users in Saudi Arabia, for example.
A successful multilingual application should be smooth, easy to use and culturally relevant, regardless of the language a user speaks. Avoid these common UI mistakes and you’ll help to convert your users into customers.