Last updated on 3 October 2017
Allowing users to choose different display languages seems like a UI design no-brainer, but plenty of us still get it wrong. In short, here are three things a web designer or web developer can do to make it easier for users to find the right language for her website’s content:
- Figure out which language a user wants, and show that one to her.
- Show her your offered alternatives and offer her the option for her to choose one.
- If she chooses a different language, translate what she’s looking at; don’t send her somewhere else.
That’s it. If you understand and agree, you can stop reading this.
<British accent> please allow me to expound!
The Good, The Bad, and The Ugly
Disclaimer: These sites may have changed since writing this post; the following descriptions are accurate as of 22 December, 2011.
The Good: Wikipedia
- Win: Detects language automatically.
- Win: Shows available languages in the respective languages.
- Win: You can switch languages on the same page.
The Bad: Moleskine’s e-Shop
- Fail: The site defaults automatically to its Italian version.
- Fail: The language selector is in the current display language.
- Fail: Switching languages kicks the user out to a new home page.
The Ugly: Nintendo’s Website
How to Figure Out What the User Wants
navigator.browserLanguage properties. Apps should use the device’s or operating system’s language. Facebook apps can detect users’ Facebook language settings. Just detect and dynamically serve the content in that language; the best way to make a choice is not to make one at all.
By the way, language is not the same as location! These two properties should be treated separately at all times. In situations where location is necessary to determine which (variation of) content to display, take a user’s device location, or use her IP address if not. Device location is more accurate, but requires users to explicitly share it, while IP address is readily visible.
How to Make It Easy to Choose Another Language
Users are looking for what they want and need, not for what they already see. That’s why showing a link called “English” on an English page makes no sense. To put it in perspective for us westerners, take for example a site in Hebrew or in Japanese. Can you change the language there in 30 seconds or less? Real users will only give you ten seconds before they give up and leave.
Facebook’s approach is a good compromise; they detect a user’s language automatically, then show a selection of alternative languages with an icon to reveal the rest.
How to Keep the User on Her Desired Content
Lots of websites use different domains to localize their content. Others keep it all on one domain, but use folder structures, like domain.com/language/page.html. With these structures, it is easier to redirect users to new homepages each time they change languages.
I understand that this is difficult for multinational corporations that have different product offerings (ergo different content) for different countries. However, as stated above, location is not the same as language, and the two should be treated independently of one another. Think about the poor expats who cannot shop in their new home countries!
Three Simple Things
If all multi-language websites would follow these three simple guidelines, bounce rates would be lower, profit margins would be higher, and users could focus on the content, rather than the language selector. Oh, and world peace. Thanks and good luck!