1919-09-01

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 UI 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.

Language Switch 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.

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.

globe-icon-language-switch
Source: http://fontawesome.io/icon/globe/

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.

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 Switch Designs

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: https://dribbble.com/shots/2386084-Language-Selection-Modal

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 Switch instead of Icons

After much discussion and user testings, the result and user feedback leaned towards text-based language switch. So 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.

Language Switch is key for UX

When you offer a multilingual website or product, thinking about the language switch is probably 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.

If you’re still unsure about which design to choose, get some user feedback and conduct some testing. To learn more about how to do user testing download this free ebook How to Build Products Users Love with interviews with Trello, Prezi and HotelTonight.

Resolve issues faster with visual bug reporting.

Visual bug tracking by Usersnap

Simplify and reduce issue & bug reporting efforts with screen recordings, screenshots, and annotations.

And if you’re ready to try out a visual bug tracking and feedback solution, Usersnap offers a free trial. Sign up today or book a demo with our feedback specialists.