Language Selector
A Dutch traveler opens a retailer's site from a hotel in Tokyo. The site reads the location and loads in Japanese.
Make every language feel at home: a short listen for the road.
Listen to the full Language Selector course on DesignPath
They cannot read any of it, including the word that would take them out of it. The control they need is an icon in a header written in a script they do not know. The fastest route back to English is to leave and search again.
Nothing there was a bug. Somebody decided that where a request comes from indicates what language the person reads, and that assumption is the root of nearly every problem in this pattern.
The same instinct produces the rest of them. A French flag standing in for a language spoken in Belgium, Switzerland, Canada and much of Africa. A list labeled French and Chinese in English, for people who do not read English. A single country setting that decides the language, the currency and the units together, when real people mix those constantly.
Anatomy of a Language Selector
The component is usually built as one dropdown, and the trouble starts there, because it is being asked to carry answers to several unrelated questions.
Three Settings, Not One
Language is what the interface is written in. Region is where somebody is, which decides shipping, availability, tax and legal text. Currency is what they want to see prices in.
Real combinations break any control that bundles them. Somebody in Germany who wants the English interface. Somebody in the UK who wants prices in dollars. Somebody in Switzerland who wants German text and Swiss francs. A single country dropdown cannot express one of those, and Adidas is Friedman's example of the coupling done tightly enough to trap people.
The Rest of the Preference Set
Below those three sit several more that are usually inherited from the country guess.
Units, in metric or imperial. Time as 12 or 24 hour. Date order. Timezone. iHerb exposes an unusually full set including units and shipping method. Most products do not need all of them, and the ones they do need should not be decided by a flag somebody picked in a header.
The Parts of the Control
Five pieces, plus one that lives elsewhere on the page.
The trigger, meaning the icon and label that opens it. The list of available languages. The label on each option. The search, once the list is long. And the current-language marker, so somebody can see what they are on. Separately there is the suggestion, a banner or dialog offering a different language, which is a different component with different rules and belongs to article 3.
What the Choice Has to Survive
A language selection is not finished when the page reloads.
It has to persist into the next visit, travel in a link somebody sends, and hold when they open a page that has no version in that language. Those are decisions about the system rather than the dropdown, and article 6 covers them. A selector that works perfectly and forgets by tomorrow has solved nothing.
Pro tip: Write down what your one selector currently changes, in a list. If language, currency and shipping region all move together, you have three settings in one control and the fix is structural rather than visual.