Designing a language switch: Examples and best practices

Building a global SaaS product isn’t easy. You have to localize your product, translate your website, and make sure that everything’s still up and running.

And there might be a major interface problem, which looks like a tiny thing at first but is actually something to think about a little longer. What I’m talking about is the visualization of selecting a language. How can you visualize the option to change languages so that your global audience can choose which language they want to use?

In this article, you’ll find everything you need to know when it comes to designing a language switch for your application or website, including some examples and best practices.

If you like this article, give it some sharing ❤️

Language icons

When offering a multilingual software or web services, you’ll end up at some point thinking about a language icon.

A language icon is a visual aid, indicating the existing languages of the used application. The problem, however, is that there’s yet no standard definition on how a language icon or language switcher should look like.
language icon google search

Language icon initiative

As I mentioned before there seems to be no standard definition on how a language icon should look like. I might be wrong. There’s a language icon initiative started in 2008 which aims to standardize the language selection icon.

The standard language selection icon looks like this:

But have you ever seen that icon on one of your favorite websites or applications? I haven’t. And our user tests showed that people won’t recognize this icon as an option for selecting languages.

It seems that the standardized language icon isn’t widely used. Even though many other sites – like Font Awesome – list the standard icon as their prior icon.

Other language icon ideas

So, we weren’t 100% happy with the language icon provided by the language icon initiative. As we continued our research, we found out that a globe icon is a popular icon used for language switching.

The problem with globes? Different people have different associations with globe icons. If you’re a heavy facebook user, you’ll identify this icon as your notification center.

facebook notifications globe

So, definitely no globe icon for us.

The problem with flags and countries

Intuitively, we tend to think about countries when we talk about languages. Chinese = China, Japanese = Japan, and so on. However, there are some major limitations when you start using country flags for your language switcher.

So, why you shouldn’t use country flags:

  • There are design limitations if you use more than 20 languages for your app. Displaying 20 country flags can be quite messy.
  • Countries do not represent languages, nor the other way round.

language switch icon

Flags symbolize nations, not languages. It’s that simple.
country switch icon

And I recommend to only use country flags if your product is different from country to country and not from language to language.

Best practices of language switchers

So, you might wonder. How should I visualize a language switcher?

If you like country flags and really want to stick with country flags, I’d recommend a solution like the following one:

language selection

Source: dribbble.com

Language buttons

The US government released a comprehensive guide on web design standards a while ago, so I was curious how they solved the problem of language switching.

As you can see in the screenshot below, USA.gov makes use of a language button and its styling is clearly defined by its web design standards.

usagov language switch

Source: usa.gov

Text links

Text links for offering language switching option are widely used. Google.com can be named as a great example here.

google language switcher

Language switcher as part of the main navigation

Text links are a great way to offer your website or app in other languages. By embedding the language switcher in your main navigation, users will easily find the option to change languages.

Trello, for example, embedded the language switch in the app settings.

Language switcher as part of the footer navigation

Other websites and applications enable their users to change languages in the footer section of their site.

Facebook seems to be one of the prominent examples for doing so:
language switcher footer facebook

Text-based language switcher instead of icons

After much discussion, user testing, and meetings we decided not to use any icon at all.

Why? Because it seems that there’s no language icon available which creates a mutual understanding.

As we already had a text-based language selector on our website, we decided to be consistent.

Summary

When you offer a multilingual website or product, thinking about the language switcher is probably not the top priority.

Making use of various language icons, country flags, or other graphics can lead to confusion and doesn’t create a mutual understanding of its features. Therefore we at Usersnap decided to use a simple text-based switcher.

A well-designed language selection option is one of the key things that enhances usability and creates a simple user experience for your website visitors and customers.

All about web development newsletter!

People from companies like Facebook, Google, and Microsoft are reading our articles.

If you like this article, give it some sharing ❤️