Flags to represent languages?
I was working on my portfolio page and I wanted to make it available in English, Spanish, and French. I started by using the flags of the origin countries of the languages. So I initially used the England flag 🏴, the Spain flag 🇪🇸, and the France flag 🇫🇷. But then I thought, "I don’t speak Spain’s Spanish, I’m Mexican 🇲🇽, and I’m more familiar with US 🇺🇸 English than UK’s 🇬🇧 English. Should I change those flags?" And what about French from Quebec, Switzerland, Belgium, or the Democratic Republic of the Congo? If I’m using flags to represent languages and basing them on North America, maybe I should just use the Mexican flag 🇲🇽 along with two Canadian ones 🇨🇦🇨🇦 and call it a day. Or maybe use the US flag 🇺🇸 for Spanish since they have a lot of Spanish speakers. Should I use the flags of the countries with the most population speaking that language?
That finally got me wondering, what’s the best way to design the options for language switching? And so, I started my research.
I came across a wonderful website straight up called Flags Are Not Languages dedicated entirely to this issue in the UX design context, and it helped me clear my questions about this.
Why is this a problem?
Mexico 🇲🇽 has 69 (nice) national languages. Using the Mexico flag could be used to represent Nahuatl, Maya, Mixtec, Zapotec, and lots of other languages, but it’s usually used to represent Spanish. Sure, that’s the most widely spoken language here, but it’s not the only one. Also, there are a lot of other countries around the world that use Spanish as an official language. Why not consider them? Because they don’t have the same amount of population? That’s unfair. Why not use the Equatorial Guinea flag 🇬🇶 instead? Is your content really solely in Mexican Spanish targeting a purely Mexican Spanish-speaking audience? Or are you keeping it neutral for a broader audience?
This is a wider problem for countries like Switzerland 🇨🇭 where 62% of the population speaks German, 22% speaks French, or Belgium 🇧🇪 where 59% speaks Dutch and 40% French, countries where the use of more than one language in different regions is more common than in Mexico where more than 90% of the people are Spanish-speakers.
As you can see, this raises some questions about countries with multiple languages. However, it doesn't end there because we have some political issues as well, such as in China, Taiwan, and Hong Kong, which have political problems. Using one of their flags to represent Chinese might cause trouble for the others.
Solutions
First of all, to represent the language switching option, instead of using a globe which can be mistaken for regional configurations (time zones, formats, and such), or a speech bubble which can be mistaken for a chat section, there’s an icon called the Language icon (the one used as a cover in this post), which has the intent to help with this very issue, and it may be familiar to most users for its similarities to the Google Translate button, for example. It is a great and clear way to show that you need to click there to change the language. (More about iconography for translations here)
You can use the ISO 639 codes for each language, like [ES] for Spanish, [FR] for French. The only problem with this one is that some people can find it confusing if they’re not used to it, and it’s still a bit troubling with languages that use different forms of writing like [ZH] for Chinese. It’s the solution I chose in my portfolio because it helped me save some space, and the three languages I use are easily recognizable this way.
You could also auto-detect your user's language configuration as we did with this site using i18n and just forget this issue. But some users (like me) prefer certain languages or having the choice for different reasons, like language learning. For example, I use some sites like Facebook in French while keeping most of the others in English.
The best solution overall is writing the language in its local format, “Español” for Spanish, "中文” for Chinese, and so on. The user looking for its language will have an easier time finding their language this way, and you’re not tying them to any region!
I like flags, and you won’t stop me!
Yeah, flags are cool and really interesting, and you can still use them if you want, especially if you’re targeting your product to a specific region or with a political reason. For example, maybe using the Chinese flag to represent 中文 instead of the Taiwanese flag because your product will be published in China may give you an upper hand with the Chinese government, or using the Ireland flag to represent English in a product only available within the EU. Keep in mind that in the majority of cases, the user won’t give it much thought while choosing their language because we’re now used to doing it this way, but it’s still not the best representation for a language, and you can keep it neutral and more friendly if you stick to just writing the language in its local format. Again, just suggesting not forcing anyone.
TLDR; Flags do not represent a language, they represent a country/region but they are not defined by their language. Write the name of the language in its own language, like “English”, “Français”, “Español”.
There’s also a great video by Name Explain about this issue called ”Flags Are Terrible At Representing Languages” where he mentions some of the stuff discussed here. Please go ahead and watch it.
