Just Flagging This One Up

How many times as a designer have you been asked by an enthusiastic marketing person to to do a language selection dropdown menu “with all the flags”?

I decided to write this all down so I can just read it out next time it happens. Because it will.

Languages Don’t Have Flags!

The whole point of a flag is to promote a nation or cause and have something to wave in the face of other nations when you are arguing with them. Flags are burnt in protest. The risk of offending somebody by doing something wrong with their flag is high. Just show the Union Jack upside down to a pedantic Brit (or even call it the Union Jack instead of the Union Flag at the wrong time) and you could have the Royal Navy hunting you down. Interestingly the UK is one of the most lenient countries when it comes to messing with their flag, but there are a surprising number of things nations get touchy about when it comes to their precious brand.

So, flags are emotive and a distraction from what you are trying to do – read a website. But that’s not the main problem. The thing about a flag is that it represents a country, territory or organisation…but not a language! This is the thing that seems to escape website owners all the time.

The Logic

How much of the world speaks English? Quite a lot. We won’t get into the reasons why (most of them are bad) but English is used all over the world and, at the time of writing, is present on more than half of the world’s websites (feel free to check Wikipedia to see if I’m still right). So when you pick English as your language, how many times have you seen it represented by an actual English flag? Probably none. English is usually represented by the US flag (or sometimes Union Jack). How is this right? Picking a different country’s flag for your own language makes no sense to me. Even if the icon to select English is a Union Jack it’s still wrong: what if you speak Welsh or Scottish Gaelic? There is no such thing as a British language. The logic falls apart the more you try to make it work.

What if you live in Brazil? Big country. Several times bigger than Portugal – yet you’d have to pick the Portuguese flag to read the website in your own language. This adds the complication of geography. What if you need Brazil-specific products or delivery and need to visit the Brazilian part of the website? How is picking Portugal from a menu going to make any sense? Will that show you Portuguese delivery options or the ones you want to see for Brazil? You could have a Portuguese and a Brazilian flag both pointing to the same pages but that adds more to the menu, and possibly more confusion. If there was a Brazilian flag for you to pick instead would I be getting pages in Portuguese, Spanish or English? Would there need to be three Brazil flags, each with an extra flag next to them to indicate the different language options? Same for Belgium, Switzerland or other multi-language countries. Doesn’t work.

What if you are in a fiercely independent region like Catalonia? Picking a Spanish flag might rankle a bit. It’s the sort of thing that grows into a social media storm. But putting a Catalonian flag on a site might have political consequences for a site owner, though – it could be seen by Spain that you are making some kind of separatist statement when, in fact, you were only innocently trying to be helpful to your visitors. Again – doesn’t work.

A single country can speak more than one language. A single language can be spoken in more than one country. Flags don’t, and never will, work where languages are concerned.

So What Do I Do?

This might seem strange from a designer who spends his days making visual representations of things…but sometimes it’s best to stop trying to be clever and just write stuff out. Your language menu should simply have the language selections in words and in their own language. If you only speak one language, your eyes will slide down the list and automatically focus on the one you recognise – it just happens. If you’re a polyglot…well good on you – you’re our ideal visitor and you’ll find it easy whatever.

It’s worth mentioning that in the past we’ve looked at auto-detection based on the IP address or geodata from the user’s device. However this isn’t totally reliable, plus users can block this kind of information from websites, so you still need to have a manual override for when it gets it wrong. Also, there’s a big non-technical problem with this approach: what if you are German but on a trip to Italy? The site would kindly set the language to Italian so, again, we’d always need a menu to override this anyway.

The Last Challenge

That leaves us with one challenge: how do I title my politically-correct, non-offensive but, at-the-same-time-useable menu?

You could just list all the languages out loose as links in a fat footer if your site design allows, which is a nice, open solution…but I tend to think that picking your language should be the first thing you do, so I think it really needs to be at the top in the site’s header (opinion). Menus are there to hide ugly lists until you need them, but that means you need to title them somehow to let your user know what’s hidden inside them.

There’s not realistically going to be enough room to write “Select your language” in every language that your site covers in that tiny gap before your language selection menu in your header. You could have a rolling animation which uses the same space to flash up all the options in order – but that would be pretty annoying. You can’t use the well-known trick of making the visible top menu item unselectable and using it as the title because you only have one line so it will only be in one language. So you’re left with a similar problem to the flags. Can I represent what the language selection menu is and what it does with a single symbol that everyone can understand the meaning of? Well, no – judging by the attempts so far. In this case it’s a bit safer to attempt to use an icon as there is less risk of offending anyone; we’ve just got to find the one icon we can all agree on.

Wikipedia uses an international “turnstile” symbol which was the winning entry in a competition to create a universally recognised language selector symbol. This symbol, however, has only really managed to become recognised by Wikipedia itself and its use is hasn’t become widespread.

The famous, er, thing from Wikipedia

FontAwsome has decided to favour the “language” symbol in their icon font. Again, not that intuitive, but it might catch on.

F.A.
FontAwesome’s version

For a while Adobe used to use a world map, which I liked and it worked well on their site, but it was one ambitious feat of graphic design to try to draw the whole planet into a 30×30 pixel gap. Our favoured approach was what Adobe ended up doing as well.

Globe
Ours vs. Adobe’s

A globe symbol to me seems to say exactly what it needs to and gets across the international concept without having to use any words (although Adobe chickened out a bit and added the words “Change region” to it). But then is using a globe offending Flat-Earthers? When you’re trying to please the entire world you can never really win…

Yorkshire Purchasing Organisation

YPO Logo

Coverworld Steel Roofing and Cladding

Coverworld Logo

Superfast South Yorkshire

SuperFast South Yorkshire

Webasto Thermo and Comfort

Webasto Logo

The Copacetic Gentleman

Copacetic Gent Logo

The Garrison Hotel

Garrison Hotel Logo

Oakworth Homes Timber Housing

Oakworth Homes Logo

Sensoria Festival

Sensoria Logo

Healing Little Hearts

Healing Little Hearts

Hybrid3