When and how to use flags in navigation design

By Emma Chittenden,

Published on Mar 15, 2022   —   2 min read

Summary

Folks, we’re talking all things flags in navigation today, when to use them and when the frick not to use them (as quite a lot of people seem to have forgotten how to use them properly.

Can we collectively agree that using national flags as language selection tools is a f*cking terrible idea?

I mean, I thought we’d already had a conversation about this, but I guess that’s what happens when you get rid of information architecture as a skill.  FML.

Unfortunately, I’ve seen several instances where this appears to have gone out the window.  So I guess it’s lesson time.  Sit down, shut up, and pay attention people.

What is a flag?

A flag, you know that thing that gets waved on a flag pole.  They’re used to signify what country you’re from, if you’re a pirate, or to tell the world if you’re football hooligan.

I’m British, so my flag is the union jack 🇬🇧 if I were Ukrainian then I would wave this flag 🇺🇦.  Although right now I might just wave it in solidarity.

Why is it used in design?

There are two ways that flags are often used in design, one is good, the other is bad.

Good

Please pick your country

🇬🇧 United Kingdom

🇺🇦 Ukraine

Bad

Please pick your language

🇺🇸 English

🇨🇦 French

The problem with this approach

Using a flag to identify country of origin is the correct and proper use of the flag. It’s also useful because an emoji is written in unicode, this means a screen reader will read the code and know that it is a flag of origin.

If you use an emoji flag to represent a language however, you’ll find it confuses people who can see it. You’ll have to either implement a code change to make it accessible, or ignore accessibility (that you’ll want to avoid, right? 😉)

Confusing AF

I’m old enough, and ugly enough, to remember when we started looking at usability of websites en masse.  When we did, the information architects among us (i.e. me) saw that there was a problem with using country flags to represent language.  Let’s dive into that.

🇺🇸 English

The problem we have here is that the flag says “yes yes” but the label says “wait, what?”.

You’re going to get two potential problems happening here.

First, people don’t read they skim.  If they’re skimming they’ll see the flag first and assume it’s a country selector.  At this point they’ll either stop and have to go back (bad) or they’ll assume incorrectly and pick the wrong thing (very bad).

That little micro-f*ckup is going to leave a bad taste in the mouth of the person using your site.  They wanted to come and buy something from you, and you’ve just given them an intelligence test trying to select the language on your site.  Not cool people, not cool.

Let’s recap

So, to recap.  If you’re going to use a flag to help people pick things, limit it to country selection.  Don’t use any flags or other emojis to “help” people pick a language to read the site in.

Share on Facebook Share on Linkedin Share on Twitter Send by email

Subscribe to the newsletter

Subscribe to the newsletter for the latest news and work updates straight to your inbox, every week.

Subscribe