Internationalize: Three Interface Design Guidelines for Multiple Languages

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:

  1. Figure out which language a user wants, and show that one to her.
  2. Show her your offered alternatives and offer her the option for her to choose one.
  3. 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.
If not, <British accent> please allow me to expound! </British accent>

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

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

 

The Ugly: Nintendo’s Website

nintendo.com
Before a user can see any content, she has to look at an ugly country selector?! Fail!

How to Figure Out What the User Wants

Users 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. 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.

facebook's solution

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.

Other sites are more elegant. One great example of this is Flickr, the photo-sharing website. No matter on which page a user is, changing the language shows that same page in the new language. Flickr uses cookies, so the URL does not even change.

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!

Be First to Comment

    What do you think?