Take the 2-minute tour ×
Webmasters Stack Exchange is a question and answer site for pro webmasters. It's 100% free, no registration required.

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 translation, localization and internationalization is a bit short (in 2nd edition pages 350ff) not giving much guidelines how to create a user-centered language switcher.

Does anyone know about some patterns from the scientific and user experience community regarding how to switch the language on a webiste? I'm especially interested in user-centered design patterns.

I've review the question What's the best way to determine users' preferred language? - My differentiation: This is a low-level technical ask-about, e.g. technically HTTP/1.1 is already taken into account on my site. All it says is that it should be easy to change the language, which is inheritly part of my question already asking for a user-centered pattern (and not asking for a pattern and the answer then is take a user-centered one). It also asks specifically about to find out about the user-preferred language, and I'm looking for a pattern regarding offering a language switcher, e.g. a widget where the user can control the langauge setting of the website.

share|improve this question

2 Answers 2

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 | 中文(简体) | 繁體中文
share|improve this answer
    
Isn't it the case that users are using a translated search engine and that way should only see the results in their language (ideally). I just ask back because you deflect the usability issue back to the search engine (you do a compromise check then with headers, however browsers do it already that way, isn't that a duplicate-quadruplicate messaging?) Just thinking loud. About flags: don't like it either. For drop-down: this would be the classical part of user-interaction. List of links: Good to have in footer anyway. –  hakre Aug 27 '13 at 10:47
    
Search engines usually send users to pages in an appropriate language but they occasionally get it wrong. I'm not aware of any browser feature that alerts users when content is available in their language. It might be a feature that is possible for browsers to implement if you use hreflang links in your meta. –  Stephen Ostermiller Aug 27 '13 at 11:02
    
The browser offers to translate if the content of the page is different to their preferred language, that is the feature I mean with the messaging part. You probably know it from chrome (offering the site with the non-automatic translation is sure much better and I like the compromise idea you outline on first sight, but it's new to me and probably to early for opinion [for me]). However, can you create a screenshot of it (if I may ask)? That would be cool, I can imagine that it's a nice principle worth to add a picture for. –  hakre Aug 27 '13 at 11:04
    
"hreflang links in your meta" - Just looking into it, but it seems to be an additional technical tool (like for example a sitemap) then something on the user-facing side. rel="alternate" hreflang="x" - Help Google serve the correct language or regional URL –  hakre Aug 27 '13 at 11:11
    
It is metadata embedded in the page source. If a browser were to alert you that the page were available in another language, it could use that as a source for this information. I've never seen a browser do that though. I know that Chrome offers to translate pages sometimes, but that is machine translation and it won't make your website look good to users. –  Stephen Ostermiller Aug 27 '13 at 11:30

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:

Javascript Disabled Language Switcher

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

Javascript Enabled Language Switcher

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:

Facebook Language Switcher

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 Footer List of 936-1 ISO-Codes

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

Istock Photo Language Switcher

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 Language / Country Splash Screen

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"

enter image description here

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.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.