Web

Design Examples of Website Internationalization and Localization

Internationalization and localization are the processes of designing a website, rich internet application or any other software so that it can be adapted to different languages and regions. One important problem is how to make this possible from the technical point of view, the architecture behind the application. Another problem is how to communicate to users about the internationalization and localization options. In this article I explain the later.

If a website is available in several languages it is, logically, very important to give users an easy way to change to their preferred one. Unfortunately there is no standard interface design on how to do it, every website it’s taking a different approach.

 

On a little research I did I’ve found the following:

- Showing a flag is the strongest way to show that your website is available in different languages or for different regions.

- Showing a world icon works well, but not always.

- Using phrases like "change to global edition" does work but it is not always easy to find.

 

Here there is collection of website UI design examples presenting internationalization and localization options: 

 Amazon detects that the user is connecting from another country and offers to switch to the local version of the website. The message is displayed very big but when the user changes is difficult to go back to the American version.

Amazon

 

The BBC News website also shows users the option to change internationalization options with a prominent message.

BBC

 

Ciao, a comparison shopping website, does not offer a link to its European websites on its American version. I’m not sure if this have been done for political or marketing reasons, maybe it is not the best approach.

Ciao Homepage

 

On the other side, Ciao offers links to its international versions on their European websites. The links are a bit hidden, at the bottom of the homepage, but at least they are there.

Ciao Countries

 

Another website having a high level of internationalization but not displaying it too much is eBay.

eBay Homepage

 

eBay users have to scroll down to the bottom of the homepage to see the links to the local versions.

eBay countries

 

 Is there something more international than Coca-Cola? Users landing to coke.com are presented to the localization options in a prominent position. The combination of "Change Country" plus a flag icon makes the option difficult to skip. A problem could be that once the user chooses a country is difficult to go back to the internationalization options.

Coke Countries

 

El Pais is a spanish leading newspaper. Although it offers news in Spanish language only, it also offers an international version showing less local articles. The option is displayed in a prominent position but the lack of a icon makes the link a little bit difficult to see.

ElPais

 

Last.fm offers language options placed in a way that it’s difficult to overlooked. The planet icon alone would not have been enough for most users.

lastfm

 

 For Mapoot.com, a real estate listings website, we noticed that a "language" link was not working. Adding a little flag icon made the internationalization options more visible.

Mapoot Homepage

 

The New York Times’ link "switch to global edition" is the first option of the navigation bar.

NYT Homepage

 

 Yahoo Canada detects that the user is not connecting from Canada and shows internationalization options in a highly visible section.

Yahoo

 

YouTube displays internationalization and localization options in a highly visible position.

YouTube

 

Apparently, there are several approaches to design a user interface with internationalization and localization options. My general recommendation is to place the links in a visible position and to display a flag icon if that matches your website design.

 

Standard

One thought on “Design Examples of Website Internationalization and Localization

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>