Category: Uncategorized

Famous Birthdays has been described as a “Wikipedia for Gen-Z”. It’s an insight into popularity across the internet of influencers, not just from traditional stage and screen but also social media channels such as TikTok and Instagram.

It’s also available in four languages: English, French, Portuguese and Spanish. The site presents options to these language versions in a manner that’s quite obvious given this blog’s title: flags, of course. 

The argument goes that flags are instantly recognisable; especially to users from that country. Without getting into the country of origin of languages debate here (and the entire premise of this blog being that it’s not the best choice), the most interesting aspect with the design of Famous Birthdays’ language selection is that the flags appear greyed out (unless you hover on desktop, when the colour is revealed, but nothing on mobile).

Screenshot of Famous Birthdays footer. Note that on the Spanish, Portuguese and French sites, the US flag is used for English.

How recognizable are icons greyed out like this? Not very, and that runs foul of specific web accessibility guidelines – namely WCAG 2.0 Success Criterion 1.4.3: Contrast (Minimum). The green and red of Portugal’s flag are indistinguishable here – and is that a French flag? It could be any country that uses a vertical triband. To be fair to Famous Birthday’s developers, they have correctly implemented appropriate alternative text descriptions, albeit “French” instead of “Français” etc.

If you’re using flags for whatever reason ensure you display them accurately – by their very nature they are of course colourful, so by manipulating their appearance you are degrading the concept of an easily identifiable symbol of a nation (and not a language).

The latest version of Apple’s macOS, Monterey, has removed one of the longest and most prominent examples of using flags for languages: on the macOS language selector.

New language selector from macOS Monterey

The new UI is purely text, whereas previously flags were shown in this selection screen since macOS’s release in 2001.

Previous macOS language selector (Source: BusinessInsider

Given macOS supports hundreds of languages (and regional variations), this change radically simplifies the macOS language selection UI and also removes the requirement for Apple to maintain flags to match each language. It also makes this a simpler option for both users and Apple, and also one that no longer confuses languages with flags.

What if a user visiting an e-commerce site wants to change the language of the site? Or the currency? Thinking about currency, the main reason a user would change currency is because they’re viewing the site from another country. So often currency and country selection are very closely tied. Language, however, can be less straightforward. Countries like Belgium, Canada, Singapore and Switzerland may have multiple languages but only one currency.

Revolve approach the scenario of languages and currency in a rather cumbersome way: they have a separate currency selector and language selector.

First and foremost, and this is why this example has been used in this particular post, Revolve has bizarrely ended up with the flag of the United Arab Emirates for German. Probably a simple mistake but another reason why using flags to signify languages can lead to embarrassing mistakes like this one. The other choices of flags in this menu imply country selection over language: for example the Brazilian flag for Portuguese and Mexican flag for Spanish.

How many users are likely to browse the site in Chinese and want to see prices in Russian Rubles? Probably very unlikely. How many users browsing the site from Mexico want to view the site in Spanish but see prices in Mexican pesos? Probably a lot more, but while the Mexican flag is used for Spanish, Mexican pesos is not an available currency.

Thinking about the scenario of changing currency it would be most closely linked to the country of the user. And the country of the user would of course also relate to language. This is where the G-Star Raw site provides a far simpler UX solution that uses flags correctly.

It asks the user to specify their shipping destination and their language from a single dropdown option:

This is a far simpler approach that also uses flags appropriately.

Even if Revolve didn’t want to focus on shipping destination and just give a user the ability to view different currencies and languages, they could do so very easily by following the same approach as G-Star Raw and avoid these issues with flags.