Simple Inputs - Language Selectors
"Language is the road map of a culture. It tells you where its people come from and where they are going." - Rita Mae Brow
"If you talk to a man in a language he understands, that goes to his head. If you talk to him in his own language, that goes to his heart." - Nelson Mandela
So - your product is available in multiple languages.
Great!
Provided your translations are accurate you’ve taken a great step forward with your user in mind.
If you’re selecting between a few languages, a nice set of radio buttons works quite well.
Done?
No - we can do better than that.
When we display languages like this, we’re assuming that our users can read and understand English.
So, let’s make sure our users can find their language IN their language.
That’s much better. Make sure to show this option as soon as possible – so you can start translating the copy for your user.
But what if we wanted to get more creative, colourful, and clever with our design?
Let's have some fun with flags!
Bright, colourful - let's ship it!
We got a bit too clever there - let's think about this before we get the dev team to add 200+ flags.
There are a number of reasons why flags get tricky - here are just a few:
Multiple Countries - One Language
French is the official language in Benin, Burkina Faso, Burundi, Cameroon, the Central African Republic, Chad, Comoros, the Democratic Republic of Congo, Congo, the Côte d'Ivoire, Djibouti, Gabon, Guinea, Madagascar, Mali, Niger, Rwanda, Senegal, the Seychelles, and Togo - and that's JUST Africa.
So, what to do? Show the French flag for everyone? List each with its own flag?
What about our French Canadian friends?
One Country - Multiple Languages
Canada has two official languages - sort of - and how about our friends in Papua New Guinea?
Belgium has 3 official languages - French, German, and a Dutch dialect - Flemish. I don't think this is going to work...
Colonialism
Speaking of Belgium - maybe our users don't want to be reminded of previous colonial rule - maybe they just want to select a language? I'm seeing flags, alright - and they're all red.
Okay, okay, okay - this is clearly NOT the solution. So let's take it back a step.
Recommended Solution(s)
Good
We can pair each language with its ISO code.
This is better than having a simple list of languages, but this assumes that folks know what their language code is.
Better
Pairing the language with the translated version.
By leading with the English version of the names, the keyboard can be used to jump to the right language.
Best
Let's go to our users in their own language.
This one can be tricky for implementation, and is a good reason to think about accessibility from the start of your project. Not all fonts support all scripts, but Noto does!
What do you think?
I’m sure I’ve missed something, or maybe you have a simpler approach to this issue. Let me know!
About the Series
I’ve been designing websites and apps (in one form or another) for over 15 years – and I spend a lot of time thinking about User Interfaces. It’s easy to start dropping elements into a form or inputs into an account management page, but if we’re not careful we can cause some real problems for our users.
Keeping things simple is important – but simple isn’t easy. It requires that we think through our designs thoroughly and from perspectives outside of our own. When we design for inclusion, we let our users know that we respect and appreciate them, and we keep our products accessible for all.
In the Simple Inputs series, we will walk through some of the many things to consider before adding that “simple input” into your next design.
.png){kind=small}
