Battle of the ISO codes: why Malaysian isn't Montserrat

When it comes to developing for internationalisation, there are two very important ISO codes: ISO 639 (languages) and ISO 3166 (countries). Within these codes there are two- and three-letter code variations for both language and countries. The simplest (and one of the most popular) are the two-letter code variations: ISO 639-1 for languages and ISO 3166-1 for countries.

Unsurprisingly, many countries and languages share the same two letter code. Spain and Spanish (es), France and French (fr), Thailand and Thai (th).

But there are some rather important languages codes that do not correlate directly with a country code. For instance, the Arabic language for uses ar which is Argentina’s ISO 3166-1 code. English’s en has no matching country code at all — it’s official 3166-1 code is gb for Great Britain. The Chinese language is zh in ISO-639 whereas China’s ISO-3166-1 code is cn.

Music streaming service Deezer uses flags to represent languages. One example in particular shows the pitfalls in assuming direct connections between languages and flags: the language code for Malaysian (ms) is different from the largest Malay-speaking nation, Malaysia (my in ISO-3166-1 — also, Malaysian is also spoken in Singapore).

Instead the flag next to the Malay link (Melayu) is actually that of the tiny Caribbean island of Monserrat, whose country code is (of course) ms.


For the record — Montserrat is nearly 35,000km away from Malaysia

The largest and simplest lesson from the Deezer example is to simply check that any flags you use (for any purpose) are actually the right ones.

But this issue wouldn’t have arisen at all had Deezer not decided to compliment languages with flags from the outset.

Update, January 6th 2013: Deezer have fixed their Malaysian flag, but are still using flags for their language options flag overload? is an excellent online language resource with online translation as one of its core services — in an impressive 22 languages.

The site makes heavy use of flags as iconography, with some interesting flag choices: Arabic is represented by the Egyptian flag, Swahili by the Kenyan flag and Hindi by the Indian flag.

Arabic is an official language in 24 countries other than Egypt (however, Egypt is by far the largest by population) and Swahili is an official language in four countries. While Hindi is the most widely spoken language in India, there are 22 official languages in India.

Furthermore, English is represented by the Union Jack; however it is an official language in over 50 countries. Also, the United States which has many more English-speakers than the United Kingdom. (The same argument can be applied to the use of Spanish and Portuguese flags for those languages in relation to Mexico and Brazil respectively).

Regardless of whether flags are appropriate in this situation, another question can be posed: do the flags actually aid in legibility of the translation menu? Or are they actually distracting?

Consider the Google Translate interface that supports 65 languages:

Arguably the Google Translate is easier to read and far more compact on screen: and it achieves this in part by not using flags to represent languages.

Bethesda Blog: language or location?

It’s hard not to look at the Bethesda Blog ‘gateway’ page and ask whether they’re asking for your location or language.

Language or location?

Many sites that use flags to represent languages rely on the subtle implication that a flag will assist users in choosing their language. But the fact that this page is solely dedicated to language selection and only presents users with flags explicitly suggests the site is only accessible by users from the USA, France, Italy, Germany and Spain.

The flags are also large and bold in their size: there’s no excuse here that as icons they take less space.

Would simply listing the language names not be far simpler and more effective?

After all, on Bethesda’s main site, they’re doing exactly that:

Iconography for translations: best practice for communicating availability of translated content

While flags are sometimes used to show the availability of translated content, there are many other methods and conventions available — many of which are simpler, more effective and more appropriate.

Individual flags

Deutsche Bahn’s language selection is linked directly with region

If the content is specific to language and country, then individual flags are highly appropriate. But languages within countries should not be generalised: many countries such as Belgium, Canada, India and Switzerland have a mix of different primary languages. The reverse goes for languages — languages are not always exclusive to countries. For instance English and Spanish are both spoken by far larger numbers of people outside of England/Britain and Spain respectively.

Multiple flags

Sometimes flags are used as a more general abstract concept in communicating the presence of translated content.

Shutterstock screenshot

Some potential problems with this approach is that it lends itself more to ‘global’ or ‘international’ symbolism. While this certainly overlaps with language, it may not be the best choice unless your content varies both in language and by region. For instance, many airlines may want to present different languages and different content depending on a user’s location.

But take a website such as city tourist board or local government. This approach is not particularly suitable, as the content is unlikely to change based on a users location: only on a user’s language.

‘World flags’

The Apple OS and many Linux distributions use a United Nations-esque flag to represent ‘international’ options. These settings also commonly overlap more than just languages: they often include date formats, number and currency formats and also language. Within a system preference environment, this icon works relatively well – as there is very little for it to be confused with. But in a broader context of the web and beyond it may be more confusing: users may wonder what the United Nations has to do with your content.

Globe icon

The globe is a powerful and highly recognisable icon. While that may be its main strength, it also represents a weakness, as it has come to represent a broad range of subjects.

The globe can broadly be interpreted as region, country, timezone as well as a representation of networks and the web. For better or for worse it has also been chosen by Facebook as the icon for ‘notifications’. John Yunker argues why this is a bad choice – and while his arguments are convincing – it still means that another meaning has become attached to the ubiquitous globe.

Returning to some of the reasons why multiple flags may not work, the same reasons can be applied to the globe: if your content is regional/country and language specific then it can be a good choice. However if you’re only providing the same content to all users in a variety of languages, the regional-aspect of the globe icon might not be the most appropriate choice.

The translation icon

OMC² Design Studios in Italy have thought about many of the dilemmas already described here and have attempted to create an icon that best represents translations.

There is obviously a need for an icon of this sort, but the problem with the icon they have produced is that it is perhaps too abstract. Nothing in the icon really suggests translation or languages. While globes and flags may not be the best they would still provide a far more powerful visual message than this icon.

Update (May 2014) – this project has changed it’s recommended icon to this icon:


Designed by Farhat Datta this ‘turnstyle icon’ won the A’ Design award in 2013. It is arguably a far stronger icon that reflects other approaches outlined on this page.

Speech bubbles

Speech is inherent to language – but in the majority of situations translated content is read and not heard (or spoken) – especially online.

Much like the globe, the speech bubble is often also used to symbolise ‘contact’ and also messaging — such as with Google Talk and Apple’s iChat shown above.

Mixed characters

Another approach to graphically representing translation is mixing characters: probably the most ubiquitous being Google Translate’s logo, which places the Chinese character ‘文’ (which can mean script, page or character depending on context) next to the latin ‘A’. This approach definitely relates to the reading element of translated content far stronger than speech bubbles do. It also works well through contrast: Chinese and latin characters are so different it’s hard for this design to have many other meanings apart from one related to language.

Google Translate is also a truly multiplatform product: the same Chinese/latin icon appears across not only the web but also mobile and tablet apps.

Microsoft’s approach to translation icon design reflects Google’s: the only difference being a choice of the Japanese letter ‘あ’, which is the first character in Japanese alphabetical ordering.

Much like Google, this icon is seen across many platforms: from Outlook through to Bing Translate.

Design-wise, the mixed character approach is very strong: it is simple and uses contrasting icons within itself to evoke a higher meaning. Coupled with the clout that Google and Microsoft products have, is this the strongest convention we have for symbolising translation?

While these icons pertain specifically to providing a translation service, pre-translated content can certainly leverage the fundamental concept of these icons.

Is the mixed script the best icon available – or are there other approaches that are more powerful and appropriate?

The underwhelming dropdown: making language and region selection visible and effective

Dropdown menus, when used well, are a very useful form of interaction. While the pros and cons of dropdowns have been well discussed elsewhere, it’s useful examining them in the context of language/region selection.

When a user interacts with a dropdown menu, it’s a reasonable expectation that there are a certain degree of choices contained within the menu — hence the designer’s choice in hiding the content.

Left to right: The Guardian, Moo and CNN

But looking at the region selection dropdowns at The Guardian and Moo, the dropdown only reveals one extra choice: wouldn’t this be far simpler (and more obvious) as either a radio button or list of links? CNN has more regional choices than The Guardian or Moo, yet they have opted just to list the options available.

Apple’s website also features a two-items dropdown for
languages for both their Swiss and Belgian sites

CNN’s approach is simple and effective: don’t complicate selections of anything on your site with a dropdown unless there are numerous options that would otherwise clutter the page.

(Note: while CNN is very well designed, linking to the Arabic edition of its content would be better done with Arabic written in its localised form rather than just the English). effective design for region and language

The LEGO website is available in 17 languages. When a user goes to select language, they are prompted to first choose their country or region and then their language as appropriate.

LEGO language selection

Belgian users have the option of French or Dutch content specific to their country; Spanish users can select Spain or Latin America as appropriate.

The use of flags here gives priority to country/region first — which is why it works. Only for Latin America is a flag not used, as it is obviously referring to a whole region and not a specific country. Language is a secondary option. In this scenario, LEGO’s use of flags works very well.

As a global brand, LEGO has registered domains in many other countries even though they do not have local content for all of them. The site does its best to redirect users to the most appropriate version of the site. Australia users visiting are redirected to the UK English site; Canadian users visiting are redirected to the US English site.

As the site gives priority to country over language, this is a much better approach than just combining flags with language names.

However, there are limitations to this approach: Swiss users accessing are redirected to the German site. French-speaking Swiss users may not appreciate this, but given there is no specific Swiss content available this is far more acceptable than just redirecting them to a generic German-language site. Ideally, however, the LEGO site would do better checking the language of the user and redirecting them based on that — not just the domain they’re visiting.

While it’s not perfect, the thought that LEGO has put into its user experience for international users is highly commendable.

Steam: choose language or choose country?

The Steam client is a great video-gaming platform. It allows users to buy and download games, connect with friends and share screenshots from their gaming experiences. The website is available in 24 languages, and it even has a community-driven translation project.

However, unlike the website, the Windows client has some issues with language versus location.

Steam install screen

Steal install screenshot

The choice of Chinese Simplified versus Chinese Traditional is interesting: Simplified is the norm in mainland China, yet Traditional is mostly used in Taiwain (but also Chinese ethnic groups outside of mainland China).

But the other flag choices are inconsistent: the United States flag is used for English. Understandable perhaps as Steam are a US-based company, but a look at the Steam client stats server reveals Steam has heavy usage in other English-speaking countries such as Australia, Britain, Canada, Ireland, New Zealand, Singapore and South Africa.

While there is no data on Brazilian users versus Portuguese, by sheer population numbers one would expect Brazil to have more users than those in Portugal: yet the Portuguese flag is used for Portuguese. Again, this is inconsistent with the choice of the US flag for English.

As for Spanish, how many users are in Spain compared to Argentina, Chile and Mexico or other Spanish-speaking countries?

Are Steam really asking what country the user is in, or what language they prefer? It appears to be a confused mix between the two.

Another problem with this install process is the lack of localised names — forcing users into selecting a flag to for their language (whilst the language is labelled in the English-name for that language).

The Steam website handles translations brilliantly: each language is localised and also in English for disambiguation. And no flags.

However, their installer client needs some more thought.

Montreal Canadiens: powerful and clever language selection

Many Canadian websites provide content in both French and English. The Montreal Canadiens, an ice hockey team based in French-speaking Quebec, have employed a powerful and clever way for users to choose the language they prefer for their site.

Montreal Canadiens

One half of a player’s face links to French, and the other half of another player links to English. Both links are accompanied by the Canadien’s motto: ‘rise together’ in the appropriate language.

An inspiring way of integrating language selection with the motto and ethos of a sports team.

"Romanians are smart" campaign and the problem of similar flags

The website Romanians are smart has an interesting and noble objective: change the results associated with “Romanians are…” on Google into something more positive.

If you go to Google and type “Romanians are” in and wait for the autocorrect to kick in and you’ll see for yourself how racist the current results are.

The site encourages users of different languages to click on a link that enters the term “Romanians are smart” into Google (in their language), hopefully moving the more positive search term further up Google’s list of autocorrect options.

On the homepage there are links in English, French and Romanian. These languages are also complimented by flags. Romanian has a Romanian flag and English gets the United States treatment. But as for French, it appears the site has the wrong flag.

Romanians are smart

Light blue on top, white in the middle and red on the bottom — the flag used for French is far more similar to Luxembourg’s flag than that of France’s.


French is spoken in both France and Luxembourg

However, the flag used could also be seen as the Dutch flag — could this flag choice confuse a Dutch user thinking they were accessing content in Dutch?


The Netherlands and Luxembourg share an almost
identical flag but share no common language

Obviously this is probably just a simple design oversight — the French flag is simply upside down. But it still demonstrates the problem with using flags to represent languages.

Continue reading "Romanians are smart" campaign and the problem of similar flags

Tate Art Galleries: 12 languages, 9 flags

The Tate Galleries in the UK are a word-class collection of galleries and have a great website — with the exception of the language links on the homepage.


The most interesting part of this design choice is that there is obviously a cultural awareness that flags may not properly represent the Arabic and Chinese languages — so these languages are just written in their local equivalents.

But not so for French, German, Italian, Portuguese, Spanish, Japanese, Greek, Russian or Polish.

Furthermore, the flags are repeated in the content area of the pages these links lead to: of course with the exception of Arabic and Chinese.

(It’s also worth noting the BSL — British Sign Language — link. The hand icon here seems very appropriate for this).

Another issue with the choice of flags for some languages and the language name for others is also simple consistency.

Wouldn’t this design work far better if it just showed the language names?

Simple, consistent and uncontroversial?