Flag icons are a bad choice for language navigation within websites. We explain why, and look at some better options, in the first of our series on multilingual website design.
The internet has allowed an explosion in multilingual communication. Previously companies or organisations had to produce printed publications in a limited range of languages and physically get the right language version in the right place. Now a website can easily be translated into several languages, preferably by a professional translator of course.
But what is the best way to show site users how to switch between languages? One option that appears attractive initially is to use flags to represent the different languages available.
The problem with flags
However, pausing for a minute just to consider the English language shows this is problematic.
Which flag should be used to represent English?
The UK’s Union Jack is one option. Yet the UK is home to only a small proportion of the world’s English speakers, with few in the rest of the world feeling an allegiance to this flag. Worse still, for some, it may have overtones of a colonial past. Another option is the US’s Stars and Stripes. This is guaranteed to annoy many users from Britain and other English-speaking countries.
Perhaps, then, the England flag would be appropriate as the closest match to “English”. Few outside the UK will necessarily recognise this emblem, and the choice could leave Scots, Welsh and others dissatisfied.
And what about Ireland or New Zealand or Jamaica or Canada? A glance at the list of countries where English is one of the official languages shows this is just the start of the problems. Yet these complications are not restricted to English: similar issues arise with other languages.
Why flags fail as language symbols: 5 reasons
- Languages are multinational. Many languages are spoken in several countries. Should Spanish have a Spanish flag, a Mexican flag, an Argentinian flag, a Columbian flag, or the flag of one of the other 16 countries where it is the de facto official language?
- Some countries are polyglotal. A country may have more than one “native” language with equal weight given to speakers of different languages. Should a Belgian flag take you to a page in French or to a page in Flemish? The population is split approximately 40% to 59% – with a further 1% speaking German. Here the choice has cultural and even political overtones. The people of India speak many different languages collectively, and in many cases as individuals too!
- Your visitors are not flag-spotters. They may not recognise the flags. You might have an encyclopaedic knowledge of the flags of the world, but why should your users? A point demonstrated by this acerbic but amusing example from the “Front tegen taalkeuzevlaggetjes” — or “Front against language flags”.
- Flags change. Sometimes countries change their flags, for instance Libya and Burma in recent years. This is usually a decision fraught with political, cultural and social connotations: probably not something you want your website to get caught up in.
- Flags are not languages. This should be obvious from the examples above, but is worth reiterating that they are different categories. A flag represents a country, a language may be spoken across several different nation states or may vary within a given country.
As an aside, using flags to indicate languages can lead to some unusual choices. In the run up to the London Olympics earlier this year, train company First Capital Connect produced multilingual advice posters. Each language was denoted by a flag. Given that Arabic is spoken in 22 languages from the Atlantic to the Arabian Sea, the poster makers had to pause for thought. The eventual choice was the flag of the Arab Revolt –an uprising against the Ottoman Empire in 1916! However, as the poster’s Arabic text was gibberish due to incorrect typesetting, this was not their main problem in this instance!
As so often in life, there is a proviso: a scenario when using flags is a great idea. If your site has been localised for individual countries, perhaps with a different offer by country or varying shipping rates or contact details, then flags are a great way of presenting the options to your users. In this scenario, you positively want to send visitors from the UK to one “flavour” of your pages and visitors from the US to a different “flavor”. Just bear in mind that some countries speak more than one language so you might have to offer a choice of languages subsequent to the user’s choice of country.
While I’m considering the esoteric, a word about auto-detection which comes in two versions.
The first is setting a language by auto-detecting the country a visitor is browsing from: a very bad idea. Not everyone in a given country prefers to read in that country’s dominant language. Do you really want to force a Polish speaker in London to read your website in English when they could read it in Polish? Or for that matter, do you want to force an English expat in Spain to read your site in Spanish rather than English? Of course not! And what about our favourite bugbear of countries that speak more than one language? How do you know if your visitor from Belgium speaks French or Flemish primarily? You don’t know, they do – so let them choose.
The second, more subtle, version of auto-detection is to detect the browser’s language setting. In my opinion, this is still a bad option. It assumes that users have correctly set their browser’s language – many will in fact have it set to default. It assumes that people don’t share browsers: sometimes people who speak different languages live or work together. Do you really want them to re-set their browser settings every time they browse your site? And why assume that the same individual always wants to read in a particular language. A genuinely bilingual individual might prefer to read the latest news from France in French but UK travel information in English.
The best solution for multilingual website navigation
If flags fail for navigating multilingual website, what is a better solution? The short answer is to use language names.
After all, the aim is to offer users a choice of languages. To help, you could provide users a list of language names in their that language. So instead of “English, Spanish, German…” offer users “English, Español, Deutsch”.
Or even better, use a bit of nifty CSS to rollover the language names from one language to another. That way, the language is listed in its own language at first, luring in speakers of that language. But it is shown in the language of the page when a curious user mouses over it.
If space is short, you could consider using language codes such as “EN, ES, DE…” although some may find these more difficult to fathom. At worldaccent.com, we use a combination of these methods: languages are listed as language codes combined with their name in their own language, changing to the name in the current page’s language when a user hovers on them.
If you remain unconvinced, more background and examples of confusing flag use can be found at the trenchant and incisive blog Flags Are Not Languages. And if you have a query about multilingual navigation or an example of a site that works well (or really badly!), feel free to share it in the comments below. Next time in our series on multilingual website design, we will be asking “Which languages should I translate my website into?”