One of the most prevalent mistakes made by designers of international websites is the use of country flags to represent different languages within a site’s language selector. While flags are tempting to designers for a number of reasons – they’re colorful, iconic, and space-efficient – it’s a trap. Flags were never designed to depict languages, and they do a very poor job of it when leveraged in this way.
Don’t do this: a prime example of the flag language selector
Languages Are Border Blind
Humans have always been curious about what lies beyond. Throughout history, we’ve been crossing borders, venturing into the unknown, and sometimes settling down in lands that aren’t our own. Wherever we go, we take our mother tongues with us. Languages are blind to borders, and because of our traveling tendencies we see the same language in use in disparate places all over the map. Let’s look at Portuguese as an example.
Portuguese is an official language in Portugal, Brazil, Cape Verde, Guinea-Bissau, Mozambique, Angola, São Tomé & Príncipe, East Timor, Equatorial Guinea, and Macau. It also has cultural presence (in both traditional and creole variants) in India, Sri Lanka, Malaysia, the ABC islands in the Caribbean, and the Indonesian island of Flores. Which country’s flag should serve as a representative for this group?
Furthermore, while The Portuguese Language Orthographic Agreement seeks to eliminate many of the spelling differences between official variations of Portuguese, these new spellings remain controversial for many native Portuguese speakers and will likely take many years to be embraced by the populations they affect most – particularly within the cultural vernacular, which is what a company’s translation or localization efforts may want to target.
Flags representing languages on the language learning site, Duolingo.com. The Brazilian flag stands in for Portuguese.
If a designer chooses to use the Brazilian flag to represent Portuguese, like Duolingo does (shown above), how will Lusophone users from other countries react? By choosing the flag of one country to represent a globally spoken language, designers risk confusing – or even offending – a significant portion of their target audience.
Countries Are Not Language Homogenous
On the other side of the coin, a single country can’t be confined to a lone official language. India is a perfect example of language diversity. Though the Indian government has selected Hindi (written in Devangari script) and English as the two languages used for official purposes, the Indian constitution does not designate a national language. Admittedly, that would be a difficult choice to make, as India is home to 448 distinct living languages.
An extremely generalized map of language regions in India.
How can the Indian flag accurately convey to a user which language will appear? If the site presents several Indian languages, should the designer simply insert the flag of India multiple times? Depending on how many languages are represented for a country, users could be faced with a long list of their country’s flag and no idea which one applies to them.
These concepts don’t apply just to India, of course. Take a look at a linguistic map of most countries and it becomes clear that a single flag cannot accurately reflect the tapestry of languages found there.
Flags Are Not Common Knowledge
What about making sure that a designer chooses the correct flag for the country? We don’t all know every country’s flag, and introducing this element can backfire when coupled with simple human error.
Revolve.com’s language selector
On Revolve Clothing’s website, the flag of the United Arab Emirates (UAE) is used to represent the German language. While there’s no doubt that there are German speakers living in the UAE, Arabic is the official national language and the number of German speakers does not represent a reasonably significant portion of the population. Clearly, the Emirates’ flag was mistaken for Germany’s.
The danger of mistaking one flag for another in a design is one issue, but there is also the user’s perspective to consider. Designers can’t be sure that users will even recognize the flag selected to fill in for the desired language, and could exit the site unaware that what they were looking for lay right in front of them.
The Language Selector Done Right
There are established best practices for designing language selectors, and plenty of websites that do this well. Plus, there are some great methods to employ flags as a design element without compromising their inherent meaning or the usability of a website.
- Always write out the names of languages
It can’t be assumed that a country name, flag, or other icon can convey to users which language will be presented. - Always show the name of a language in its native spelling and script
Designers should always make it easy for users to find what they’re looking for, and the language selector is no exception. For users that may not know the name, spelling, or script of their desired language in the website’s native tongue, this can become a serious accessibility problem. - Make the language selector easy to find
The header and footer are typical places that users know to look for language selectors. For mobile content, it can often be found in the main menu. Designers should avoid straying too far from these established norms, as users who aren’t native speakers of the site’s default language may have trouble navigating to a selector that is difficult to find or in an unusual position. - Flags aren’t completely useless
If a website’s content has been localized for more than one country, flags can actually be used effectively in the design. While flags should never be used to represent a language, they can be paired with their country and ultimately lead users to language selection.
Country and Language Selector from LandRover.com
Land Rover is one company that does an excellent job presenting language selection via a country list that includes flags. First, they ask users to select their country – and each country is paired with its (appropriate) flag. From there, users are able to select from a variety of supported languages that are found in their chosen country.
Country and language selection page from Nest.com
Nest also uses flags accurately. Rather than splitting up the country and language selection steps, they’ve shown everything all together on a single page, with duplications of flags where multiple languages are provided for a single country. Key to this style is framing up the selection process as “Choose your country,” rather than “Choose your language.” Should Nest begin to support more than two or three languages for a given country, they might want to consider moving to a split model to present users with more digestible groups of information.
If the website does not present localized, country-specific content, it’s best to avoid this particular user interaction pattern in favor of a simple text-based language selector.
Power To The People
At the end of the day, a designer’s job is to help people – to create the worlds that allow people to seek knowledge and connect with one another across the globe. These worlds are only helpful when they are intuitive and approachable for the users they’re made for. A well-designed language selection process is a key component of an international website and, armed with this knowledge, designers put themselves in a stronger position to create accessible UIs that empower their users rather than hinder them.
