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.
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. 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.
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.
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:
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.
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.
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.
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.
How to use breadcrumbs on websites: Best practices and types of breadcrumb navigation
This post originally appeared on babich.biz, written by Nick Babich. Nick is a software developer who’s passionate about user experience. Breadcrumbs (or breadcrumb trail) is a secondary navigation system that shows a user’s location in a site or web app. The term came from the Hansel and Gretel fairy tale in which the main characters…
11 best web development blogs you should be reading right now
This article is brought to you by Usersnap – a visual feedback & bug tracking tool, used by software companies like Facebook, Google, and Microsoft. Creating software isn’t that easy. There a ton of things to consider. The more you actually create, the more you’ll learn. And since there are many developers out there who share their…
How to build a cloud-based SaaS application
More and more SaaS businesses are taking off the ground today. And it’s great. The SaaS business is a super-fast growing industry attracting more and more people and companies. These organizations are more and more floating applications in the cloud. Scaling in the cloud has some essential benefits and risks as well. In this article…
23 amazing lessons learned from interviewing the world’s top developers
Three months ago – on Thursday, April 16th – we launched bugtrackers.io as a new platform showing the life of people in web development. I expected it to be super fun. And of course, I expected it to be successful. After all, we showcased the life of famous, successful or extraordinary tech people, like CTOs, developers,…
How to be a faster programmer: 7 helpful tips for being faster & more successful.
A while ago, I published some ideas on how to become a faster programmer on Quora. Since then, people have left comments and wrote follow-up questions. I think I have dipped into an interesting topic and decided to collect my tips in a blog post. I hope you’ll find it helpful and it will make…
How to improve loading times of your website
Developing a great website requires a lot of work. Besides the development process itself, there are a lot of things to consider. Think about SEO, content, optimizing every single page with a clear call-to-action, and so on. We’ve built dozens of websites ourselves. Usersnap actually evolved from our work in building websites & web applications for…
Get website feedback. Keep clients happy. Repeat.
Let clients draw directly in the browser.
Fix bugs in minutes with screenshot & metadata.
Trusted by 1000+ customers worldwide.