How Should Language Selection be Displayed on the Web?

Creating sites in other languages is known as internationalization. A common debate in internationalization is about how language choice should be displayed on the web.

Roger Johansson from 456 Berea Street proposed 4 options for language display. Mr. Johansson is a web professional who focuses on web standards, accessibility, and usability. Note, that his articles are based on his personal opinion. However, note that in this particular article I’m citing, there are a number of people from around the world who have chimed in and given their opinions and described their experiences. Think of this as a small survey study.

4 Options

  1. The flag of the country most closely related to the language.
  2. The name of the language as text in the language itself, possibly followed by the name of the language in the language of the current page.
  3. The flag of the country most closely related to the language plus the name of the language as text in the language itself.
  4. A neutral flag plus the name of the language as text in the language itself.

The preferred method of use by most is #2: The name of the language as text in the language itself, possibly followed by the name of the language in the language of the current page. This is because using flags are problematic. Flags represent countries, not languages, thus should not be used as a way to change languages. W3C agrees and so does other well known web professionals and web usability professionals such as Jakob Nielsen. They all claim that the name of the language in the language itself is the preferred method. Information Technology Generalist and Specialist, Jukka Korpela, does a good job explaining why the use of flags for languages is plain wrong in his article, Flag as a symbol of language – stupidity or insult? Even neutral flags such as that used by the United Nations or a globe does not represent languages well. Not all countries are members of the United Nations and the typical US centric position does not adequately represent the whole world. A flat-world in the shape of a flat would be too much and does not guarantee that users will make its association with language.

Some commenters also suggested country codes such as those given on the ISO 639-2 Registration Authority site. Codes may work for geeks but the average user may not even know what the code is for their language. One commenter noted that Switzerland has four languages and you would easily offend a Swiss French speaking user by offering him or her an icon with a flag from France. Similarly seeing a French flag would be an insult to the Quebecois in Canada, as noted by another commenter. It appears that many people look upon the use of flags with quite a bit of sensitivity. Jukka Korpela states that a flag of any country should be treated with respect; insulting a flag insults the country and its people.

Flags can work well to communicate the geographical location (i.e. localization) but text works best for language changes. Flags bring you to a localized version, usually for the sake of currency (see Apple.com below). One commenter noted that when they see a British flag, they assume it’s British-specific content, not just English. Therefore, localization should not be confused with internationalization.

Apple.com screenshot

Another thing to note is that content negotiation, where content is automatically served in the language the user’s web browser specifies as the preferred one, is not yet a reliable solution so many websites still use manual options for language selection.

From our research findings, we would recommend option #2 from Mr. Johansson’s list but with a few possible variations.

  • #2 above but instead of including a translation of each language name in the language of the current page, include the word “Language:,” “Change Language:,” or “Select a Language:” in the language of the current page. This will make it clear what that link is for for everyone.

For lists of 4-5 languages, they can be listed across the top of every page. If there are more languages or if the client intends to add more languages down the road, use a drop down menu for the list of languages (see This is New York City).

Here are some screenshots of popular sites that provide language options without the use of flags:

This is New York City:

nycvisit.com screenshot

Choose Chicago:

choosechicago.com screenshot

Facebook:

facebook.com screenshot

Love Life Live Nikken:

lovenikken.com screenshot

 

Latest Tweets

imagex_media: Friday food for thought: Designing Websites for the Blind & Visually Impaired http://t.co/w0Y6jEmv #webdesign

imagex_media: Useful #CSS Snippets for Your Coding Arsenal http://t.co/5JHMhL9r #webdev

imagex_media: New developer tools in #Firefox 10 and 11 http://t.co/H8Z52Mcn #webdev

imagex_media: Check out some not so beautiful websites http://t.co/jRk6qB8s #webdesign #design #webdev via @tomho529

imagex_media: Happy Groundhog Day! RT @willieofficial: Early spring it is!!! http://t.co/U6r17clk

Get In Touch

Looking to get started on your next project?
Request A Quote
Got a question or comment?
Contact Us