Internationalize: Three Interface Design Guidelines for Multiple Languages

Last updated on 19 February 2022

Allowing people to choose different display languages seems like a UI design no-brainer, but plenty of us still get it wrong.

TL;DR

In short, here are three things a web designer or developer can do to make it easier for people to find the right language for her website:

  1. Figure out which language a person wants, and show that one to them.
  2. Show them your offered alternatives and offer the option to choose one.
  3. If they choose a different language, translate what their looking at, instead of redirecting elsewhere.

The Good, The Bad, and The Ugly

Note: These sites may have changed since writing this post! The following descriptions are accurate as of 22 December, 2011.

The Good: Wikipedia

wikipedia article
  • 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

moleskine 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 person out to a new home page.

The Ugly: Nintendo’s Website

Screen shot of Nintendo's country selector

Before a person can see any content, they have to look at an ugly country selector?! Fail!

Figure Out Which Language They Want

People usually set up their browsers and mobile devices in their preferred language. For websites, JavaScript can detect navigator.language or navigator.browserLanguage properties.

Apps should use the device’s or operating system’s language. 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. If location is necessary, like when a shop sells different products in different countries, derive a visitor’s location from their IP address. Device location is more accurate, but it’s usually not necessary for these use cases.

Make It Easy to Switch Languages

People 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 people will only give you ten seconds before they give up and leave.

Facebook’s unethical behavior notwithstanding, their product’s internalization approach is a good compromise. They detect a person’s language automatically, then show a selection of alternative languages with an icon to reveal the rest.

facebook's solution

Keep Them in the Same Place

There are four ways I can think of to enable a site to change language without changing context.

Some websites use different subdomains to localize their content. For example, switching from English (en) to Spanish (es) could look like this: en.site.com/this-page to es.site.com/this-page.

Others keep it all on one domain, but use folder structures,. Going from English to Spanish could look like this: site.com/en/this-page to site.com/es/this-page.

The most elegant way to implement these would be to dynamically change the content, without loading a new page. It’s more elegant because:

  1. The change is faster, so it doesn’t feel like navigating to a new page
  2. The URL is updated, so the page can be shared in the right language

Three Simple Guidelines

I understand that this can be 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 can’t shop in their new home countries!

If all multi-language websites would follow these three simple guidelines, we’d have lower bounce rates, higher profit margins, and most importantly happier customers.

Oh, and world peace. Thanks and good luck 😃