: Patterns for creating a Language Switcher? I'm a big fan of the book The Design Of Sites which has patterns for diverse things needed in webmastering and site design. However the topic about

@Smith883

I could find the following reference about langauge choice from the user-experience community:

In summary of the Language Choice Section - International Web Usability (Aug 1996; by Jakob Nielsen):

It coins around the ideal international user interface and that is to be automatically offered in the user-preferred language. Nielsen does not think that content negotiation is used widely enough back in 1996 to have these one-time-settings in the users-browser reliably working so manual options for language selection are necessary.

He recommends to link-list all languages in their own name and gives the "English – Français" example. List between 8-21 languages should be made more usable with visual symbols (best would be flags which are also criticized because they are about countries not languages "The problem with using flags as symbols for language choice is that some languages are spoken in many countries."). More than 21 languages are unable to scan in his opinion, suggesting a long alphabetical list then instead.

Choice should be given on every page, not only on one, because websites are often entered on different pages via search-engines. So he does not recommend placing a language choice-page before the user can reach a homepage (like you choose a language on a DVD before you reach the main menu), but to choose the most likely language instead. This is illustrated by giving the example of the Paris Louvre Museum which is in French per default. Which btw. is still the case today even I have content-negotiation activated in my browser while reviewing and that is 17 years later then Nielsens' original article.

Nowadays these suggestions can get some variations and adoptions. The flags argument can be found in the W3C Internationalization Best Practices (Apr 2007) within Best Practice 16: Using flags to indicate languages which is snap and sound:


Do not use flag icons to indicate languages.


Adoption rate with content-negotiation is higher than back in 1996, albeit the same general problems remain. Like it is not suggested to rely solely on automatic translated texts, a site should not fully rely on the Accept-Language HTTP header or obtaining country information that suggests language preference as well from the users IP-Address (GeoIP) or Location Tracking (Geolocation).

Some site add the language in the name of the currently active user-interface language as well next to the language in it's own name, but I have not found much reference if this is accepted by users.

Also the stylistic variations of lists differ nowadays, as select boxes and lists can be progressively enhanced with and without javascript. This can be used to make lists of many languages much more accessible by turning a list into a pane of columns:



Image: Javascript Disabled on French Google Translate site in English Screen Language 1



Image: Javascript Enabled on French Google Translate site in English Screen Language 2

A similar approach can be seen with a language switcher from Facebook:



Image: Facebook Language Switcher

More overview and concrete discussion about usability of language selectors are on the Usability Multimedia Language Selector Page on Wikimedia.

On Quora What is the most usable UI for switching a website's interface language? is also not giving really pin-point suggestions. Like Nielson wrote, users should not have to select the language however, "Defaulting to the language of the browser, or IP sniffing by geography is unreliable and without a fallback option to the user, somewhat poor practice. Ask foreigners who travel through Switzerland with a notebook." as Paul Gailey starts his answer then discussing placement of a language switcher on a web-page with examples:



Dell list of 936-1 ISO-Codes of the most prominent countries on the bottom (javascript disabled). 4



Istock Photo globe-icon "International" drop-down in the top-right corner using language names in their own name e.g. español and italiano. 5



IBM - Redirect based on Content-Negotiation (-> ://www.ibm.com/us/en/), then prompt language splash screen with remember me (cookie) preference. 6

Gailey also noticed that flags are not used often any longer, merely for the same reasons given back in 1996 by Nielsen ("political rather than linguistic"). He thinks it is missing that it's not possible to switch language on each site and mentions limitations in underlying content management systems. His answer could be probably seen as an review what Nielsen posted back in 1996 with feedback from more recent examples (Dec 2010).

Sister-Site User Experience (ux.stackexchange) has also the topic Choose Your Country: Best Usability approach merely linking examples, not much giving nor arguing. This ranges from "do like the apple website does"



Image: Choose your country or region - Apple Inc.

Which should not be considered applicable in my honest opinion and taking this for granted would shed a wrong light. Same for another high-voted answer suggesting detecting visitors country by their IP address without further addressing pros and cons. Even the opposite is the case, catchy marketing-phrases by the vendor are blindly repeated, the problems inherit to content negotiation are not discussed at all in that answer. Brian is more differentiating suggesting to combine things to reduce the users burden in selecting the language:


For international Websites I always propose the zero-click interface [...]. The browser's accepted language and IP address may result in a top 5 list of countries which can be at the head of an otherwise lenghty country selection page.


He continues:


It is good practice to list each country/language in English as well as their native language, e.g "German/Deutsch" or "Japanese/日本語" (beware to use UTF-8 on your Web pages). If it is clear that the original page is in English, I would expect the English alphabetical order. For countries like Switzerland I would add all possible pairs (Schweiz/Deutsch, Suisse/Francais, Svizzera/Italiano).


He suggests to not use maps as visual identifiers of countries or to not choose your country from a map because it's not feasible and you can run into cultural / political problems.

That site also dicsusses placement in Placement of a Change language button but it got not much traction. Answers tend to suggest Top/Right but it's warned that this might be cultural influenced (from an answer by Alconis):


[...] the primary use of such a selector is when landing the very first time on the website, as soon as the user sees that he does not understand the site language [...] this should be a secondary action. So given the cultural context, I'll put it on the top right corner for left-to-right layout.


It's also stressed a bit on the difference between language and country selector, the differences are merely with the site. For long country lists Smashing Magazine has published Redesigning The Country Selector by Christian Holst in Nov 2011 which again demonstrates well how javascript capabilities can be used to progressively improve usability for these long lists.

And there is: Select Country; Select Language (Dec 2010; by John Yunker for UX Magazine) also overviewing the topic but I have no summary to offer yet.

Vote Up Vote Down

@BetL925

Users often find my site through search engines. As such it is usually not a good idea to switch the language of the site based on the HTTP headers automatically. The HTTP headers can be a good guide for suggesting a language to a user, but a site that relies on search engine traffic should have the language of the content determined by the url.

So I tend to use alerts in the page when the language specified by the user's HTTP headers does not match the language in the URL.


There is an English version of this page available. Click here to view this article in English.


Such a message should always be written in the target language (not in the language of the current page). Sometimes the HTTP headers indicate that a user may be multi-lingual and several such message can be presented at the same time so the user can choose their preferred language.

Somewhere on the page there should be list of all the languages available. There are several common ways to do this widget:


Flags -- I don't like this approach. For the English website which flag should you use? British, American, or maybe Australian? Unless you have a site for each country, then you are likely distancing yourself from users when you don't choose the flag from their country.
Drop down menu -- I don't like this approach much either. The drop down menu has to be labeled something like "Language:". If a user lands on the wrong page they may not be able to recognize the widget because they can't read the word for "Language:" in another language. In addition, search engine bots might not be able to follow links in a drop down menu (depending on the specific implementation).
A list of links -- The drawback to this is that it can get large and ugly and take up a bunch of space, but it is my preferred solution. I tend to put these links in the footer where they are not too distracting. The links should each be in the language of the target page so that the user can identify them. Eg: زية | Англійская | Български | Català | Český | Dansk | Deutsch | Ελληνικά | English | Eesti | Suomi | Français | Gaeilge | हिंदी | Hrvatski | Magyar | Indonesia | Íslenska | Italiano | עברית | 日本語 | 한국어 | Lietuviškai | Македонски | Melayu | Maltija | Nederlands | Norske | Português | Română | Русский | Slovensky | Slovenski | Shqiptar | Српски | Svenska | ภาษาไทย | Türkçe | Українська | Tiếng Anh | 中文（简体） | 繁體中文

Vote Up Vote Down