Over the past few years, I have been working in back-ends and cloud infrastructure/architecture and have not worked much with front-ends at all, let alone the user experience. It has also been a long time since I worked on anything that needed any translation.

Recently the subject of translation had been mentioned for websites and I wondered if anything had changed since I last worked with multilingual websites with regard to the user experience.

It appears that designing multilingual websites is still a challenge even in 2020, there are still websites tying regions and languages together, flags to pick languages and language direction not always being applied.

We have to think about the whole user experience, what language is shown as the default? does the language require the layout to be right to left or left to right? If so what other controls need to be changed? what font size is required for each language so it displays correctly? Are images, icons, colours culturally appropriate? Will they offend?

There a lots of things to consider around user experience, but for this article I am just concentrating on language selection but the other things are equally important and need to be considered.

Language Selection

We live in a world where people live and work in multiple countries, some move to other countries and we go on holidays in other countries. This means we can no longer say everyone viewing my website in a given region speaks and reads the main language used.

Imagine a tourist website in England that only supported the English language, we would be expecting all the visitors coming for a holiday and finding places to go to also be fluent in the language. Now I think we can all agree that picking up a new language just to go away for a few weeks is a bit much, not that we wouldn’t try to speak some, but reading an entire website in a new language involves knowing a lot more.

So let’s looks at the issues for language selection:

Associating a Region and Language Together

There are many reasons why you might have your website in different regions, for example you might want or need to have different products or services available, or simply to make a region specific version of your website. For each region you add you may need to support additional languages.

Nike is a great example of a website that sells products depending on the region you are in. Not all items are available in all regions and shipping is only available for the selected region.

Scenario: You are working in France for 6 months, you’ve moved there temporarily for work and your grasp of French is not great and you need to buy some footwear. So you navigate to Nike’s shop and picked the region you are in.

Now the website is loaded, the language selected is French (Français), but there is no way to select another language which is not very helpful for this scenario.

Nike support a lot of languages and regions, separating the region and language selection would surely be a benefit and resolve this type of scenario. So for this scenario, if you were English, the language is supported in other regions just not the one you are in.

Where there are multiple official languages for a region, Switzerland for example have four languages, German (Deutsch) currently making up the largest share of around 63%, French (Français) around 23%, Italian (Italiano) around 8% and Romansh around 0.5%. Nike’s solution to this is separate entries for each supported variation, this would become difficult to navigate if more language choices were added per region in the same way.

Whilst I have used Nike as an example there are other companies doing similar.

I can understand why these region language combinations exist, its a one click selection, getting the user to a region with a language that they understand. But in providing a simple user experience it has missed other scenarios like the one above.

Associating a Flag with a Language

A countries flag is a representation of a nation, a symbol of recognition, however it is not a representation of the language spoken by the people. Using Switzerland again as an example, they currently have four official languages, so picking the Swiss flag would render which language? The current most popular? Would there be four Swiss flags one with each language next to it? It raises a lot of questions.

Then we are back to the scenario used above, you are in France and want to view the website in English, picking the English flag (for example) just feels odd when selecting the language.

There are known issues using flags and some of those have caused offence, from the wrong flag being shown, the wrong language being picked for the flag or the user is simply not from the region but speaks the language e.g. Using the flag of Spain for selection but the Spanish language is spoken in many different countries, Spain, Mexico, Columbia, Venezuela, etc.

Using flags for language selection is best avoided entirely.

Changing Language Direction

This article has been discussing language selection and why associating regions or flags with language have issues, but some languages require a change in direction reading left to right or right to left. It is important to understand that certain languages require this level of change and need to be thought about when supporting such languages and what happens when they are selected.

For example if a website was in the region of Saudi Arabia and it only supported the official languages English and Arabic. The website would need to render left to right for English and right to left for Arabic and not just change the text to the appropriate language.

Conclusion

So when we need to support multiple regions and languages decoupling the region and the language would improve the user experience. We should consider which languages are supported and which ones are the default for a given region e.g. picking the French region and defaulting to French (Français) but allow your users to select your other supported languages. We also need to make sure that we have the correct reading direction and consider any icons, colours, etc. that might cause offence in the region. There is plenty of information out there but I think this colour chart shows cultural colours really nicely.

The messages to take away are region does != language and flag does != language.

And remember when you are creating a language picker, display the language names as they would be in the requested language e.g.
English
Français
Deutsch
Italiano
Español
العربية
中文

I hope this was useful and helps build better user experiences for multilingual websites.