Working with international clients and creating digital products for their customers comes with its design challenges, such as designing for multilingual products. We’ve created a number of designs that are used in websites and apps in multiple languages. It’s often a challenge for many designers, so let’s look at the considerations around it.
Creating consistent visuals
One of the main challenges that comes with working with multiple languages is creating a consistent design across all of them that also works well for the target audience. For example, the font size needs to be appropriate for the reader without affecting the overall look and layout of the product. Here are more examples.
English words tend to be quite short and easy to fit on mobiles, however, when translated into German or Russian, can double in length and require a much larger space. This can change how buttons or graphics look, affecting any features next to them, as well as how they are read. It’s possible to slightly reduce the font size to fit in longer words, however, it still needs to be legible. We have to, therefore, give extra consideration to products with a multilingual design, giving more space for words, buttons and other elements to grow as the language changes.
Arabic is read from right to left, so when translating from English, everything needs to mirror it. For example, Etihad Airways’ website in Arabic mirrors the English version and all graphics are on the opposite side.
Etihad Airways pages for English and Arabic speakers
Chinese characters are very intricate and in some cases, making them smaller isn’t an option. It’s important to allow for space in order to fit everything into space on the screen. We often have to scale fonts on such occasions to make sure they are legible and work with the design.
Using appropriate translation methods
The way the content is translated also affects the product. The translation needs to be correct and relevant to the user. Product owners need to consider how the translation happens - whether it’s done automatically, using a translator in the backend, such as JSON or l18n, or if the translated content is uploaded to a specific page.
One of the solutions to display relevant content in multiple languages is using JSON configuration files which include all the words and phrases for each language that you want to serve - see our example below. You can start with the original language and get it translated into the ones you want to use to make sure they all correlate and are concise. To create the config file, you start with a set of ‘keys’ (blue) that have different ‘values’ (white). The keys will remain the same across all files, so the system can detect where to use them, but the values will change according to the selected language. This also means you’d need to update each file accordingly whenever you want to add new content.
You can also use automatic translation, leveraging Google’s built in translation services, to display directly on-page. However, this requires extra work to make sure the buttons aren’t pictures so the auto-translator could pick them up. Because this functionality might be translating single words or phrases, there’s also a risk of it displaying translation out of context. For example, full sentences are fine, but gambling terms, such as ‘stake’ or ‘returns’ have different meanings. So, it’s important to keep that in mind.
i18n ( stands for internationalisation - 18 letters between i and n) - is a software plugin/library that helps to handle different languages and cultures, serving localised content. It helps to display websites and apps into the most appropriate language, using locale (geographic or cultural region) detection and a library of languages. Whenever a user from a different region or culture lands on a website, by using automatic language detection or user preference, i18n displays the most appropriate language and way of reading (e.g. right to left) for them.
If you use a real translator, it’s important to have predefined terminology to help them create consistent content to match the original language, particularly if the terminology is quite specific. It also needs to have the same meaning across all languages used and use the most appropriate translation.
Relying on geolocation
To reach the right audience and serve content in the most relevant language, companies use geolocation and i18n. This reduces the need to change language for the users and helps them to browse the site straight away. However, even then, product owners need to be careful with locations like Switzerland or India where multiple languages are spoken and it’s hard to determine which one is the preferred one.
Selecting a language
There’s also a consideration as to how the user decides which language to use, how to change it and when. It depends on the audience and the type of product. Travel companies may need this functionality right at the beginning to help their customers select flights from wherever they are based and provide language support. For example, KLM ask to select a country on the homepage. Companies from other sectors often have this option in the header, so users can do this whenever they need to while still browsing the website.
KLM country selection on homepage
It is common to offer language selection indicated by various flags. However, we don’t think it’s the best practice. Not all flags represent a language and it might exclude a particular audience. Cathay Pacific offer language selection based on a region and country to try to include as many people as possible. The BBC website offers content for Welsh speakers, however, it seems to focus mainly on local events.
Cathay Pacific country and language selection
BBC Cymru content for Welsh speakers
A useful UX tip is to remember the preferred language and use it upon future visit, so there’s a one less step for users to choose from.
Using the right font
Another challenge for designers can be selecting the typography that would work across different languages. The majority of fonts are based on the Latin alphabet, using additional characters to support those that use umlauts. While these fonts don’t present many problems for the majority of these languages, they may not always work for languages that use different alphabets (Greek, Arabic, Chinese etc). This means that designers need to either find a font that supports all of the required languages or use an alternative one that closely matches the main one.
With an alternative option, you need to see if the design can cope with these changes and how it affects the space and layout. Google has designed its own font, Noto, that supports all languages. It does require you to load font files for each language to your website, but it is a good solution.
However, if you want a more stylised font, you’d need to find one that works for your product and the required languages. Typically, fonts that work with non-Latin characters are very large - 2MB+ per font used. As designers like to use separate files for different font weights, it can have a negative impact on site performance. You need to be very careful around picking fonts that wouldn’t affect the product.
Designing multilingual products is really interesting and makes you consider how customers from other parts of the world may interact with your product. The challenges we mentioned above are important to address if you want to provide a consistent customer experience and provide support for your audiences across the globe.
We’ve created a website for our client Flint Group that required certain pages to be available in multiple languages. Some of their products weren’t available in every country, so we created rules around that. Handling content in multiple languages was one of the requirements for the site build. You can find more info about this project here.
To conclude, there are enough challenges with designing products for one language, let alone for multiple. Designers need to consider how apps and websites should look like across all languages to create a consistent look and experience for all customers. However, it’s also important to take into consideration the different ways of how languages are read (e.g. Arabic or Chinese) to support users around the world access and engage with your product easily. You may need to think about the font size and creating space to fit in larger text in case it’s longer than the original version. However, these tips should help you understand these challenges better and create a user-friendly product that can be used across multiple languages.