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