An ever-lasting issue for multilingual websites: which language icon?
By Edouard on October 13, 2017
Finding a simple visual cue that can be inserted on your front page to notify your users that your website is available in several languages is a tough problem to solve. Here are 4 classic ways to implement a language switcher, plus a lesser known way.
1. Just listing your languages
The most simple and effective way to let people switch language is to just list the languages you support. This is what Facebook does that and so do we. People expect this list to be in your footer, and the languages should be listed in their original, non-translated names. English for English, Français for French, Deutsch for German, etc.
Pros & Cons
On the upside, your users will eventually find a language that they know if it’s listed there.
The downside is that it takes up a lot of space in your design, so you might be temped to only use this on your landing page. Facebook trims it to the list of the most used languages and adds a “plus sign” to view all their supported languages.
2. A language dropdown menu
You can also insert a drop-down menu set by default on the current language, like English for instance. This is what Stripe does this for instance.
Pros & Cons
On the upside, it takes up less space in the footer compared to the previous solution.
The downside is that it lacks clarity for a user browsing the website in a language that he doesn’t know. As you can see on the image below I would get lost on the Chinese version of Stripe’s website 😅
This is where an icon helping foreign users identify the language switcher would come handy.
3. A language dropdown menu using country flags
Some multilingual websites who make the choice of using an icon often use a country flag which changes with your choice of language. This is how Slack does it for instance.
Pros & Cons
On the upside colorful flags attract attention. They also are universally known and people understand that they might be able to change some kind of regional setting here.
The downside is clear: country flags represent countries, not languages and some users won’t like it. Users visiting your website from the United Kingdom may not like to see the stars and stripes banner. Also, an American user might not like to see the Union Jack banner. Besides, English isn’t the only language spoken in UK. What about Welsh, Scottish, Gaelic? Basically, you may hurt people’s sensitivity.
4. A language dropdown menu using neutral icons
Designing an icon conveying the meaning of “Changing Language” is hard. Popular choices are icons of a globe, or a flag, or a globe in a flag, as Apple does.
Pictures of “exotic” characters such as 文 are popular too. This is what Google and Microsoft use in their user interfaces.
Pros & Cons
The upside is that while these icons are clearly visible, they won’t hurt anyone’s sensitivity.
The downside is that these icons aren’t unified across software vendors so it might be difficult for a user to identify quickly and precisely what this icon means unlike the hamburger button or cog icon which are now known by many people using computer interfaces.
Now, wouldn’t it be nice if there was an widespread, already existing user interface icon that conveys the idea of changing languages? Well, you know what? There kind of is.
The language Icon project
The language icon project attempts to change that. The language icon icon was designed during a competition in 2011.
The initiative is very interesting and the design clever.
Some could argue that this design, if never seen before, might not straight away be perceived as a language icon, but it surely would if it was used more by software vendors.
It is meant to be used for commercial and non-commercial projects. It was released under a CC license with following terms: Relax-Attribution. It means that if you use it, you are suggested but not required to attribute the work to its creator when using for internet or digital use.
If software vendors were to use it more, it would become the norm like our beloved hamburger button, and it would become an obvious choice for any developer when localizing their software.
And who knows, maybe an even better Language Icon or —even better— an Emoji defining “Change Language” will pop up one day?