Every little detail matters. You want to make your website as easy to navigate as possible, and you want a satisfying experience to keep users coming back.
This requires precise attention to detail and some creative thinking to innovate. A great example is designing the language selection menu on your site.
It seems simple at first, right? Maybe a quick drop-down menu listing different languages, and some flags for visual aid.
Of course, that's a quick and easy fix, but it doesn't foster the best user experience possible. Who wants to scroll through an endless menu? What happens on mobile when you can only display 20 languages at most at a time?
There's a lot to consider when designing a great language selection menu for your website.
The goal behind localization is to make your website as accessible to users as possible. But what good would a localized site be if the user never has the option to select their language?
Now, this is a great scenario for automation.
Simply configure your site to automatically detect the user's location via IP address, or even better, their web browser's default language, and serve that user with the right localized version of your site. But that only works when you localize into specific languages.
When designing for French and English markets, users with their default language set to English see the English site, and those with their browser set to French see the French site. Any other visitor without these two options should automatically be directed to the most popular choice, in this case, English.
What if that user doesn't even speak English, but they speak French? Now they're stuck on a website they can't read.
And it wouldn't work well if you default based on location, either. What if you have a website visitor from the U.K., and they're shopping on your U.K. site, but would prefer to browse in their native language, German? Defaulting them to English forces an experience they might not want.
And that's where the problem lies: users still need the option to choose the language they prefer.
ASOS offers the perfect example of a successfully localized eCommerce platform. ASOS has achieved 149% over the last 5 years solely through digital sales, surpassing even established retailers. All without a single physical store location.
Part of their success is in their seamless localization experience. ASOS leverages automation to automatically select both the user's language and currency preferences, and more importantly, when they're directed to the incorrect location, ASOS includes a little prompt as an anchored footer:
They're both enabling the user to browse a foreign version of the site while pointing them in the right direction. This is just a sleek approach that incorporates a lot of the best practices we're going to cover.
So, how do we design and implement a language selector for a seamless experience?
Just like with translating user-generated content, there isn't always a one-size-fits-all solution. Let's run through some common strategies.
Menus work well when you have a lot of languages to deal with. The easiest option to design and implement would be a simple drop-down menu.
Where you house this on your website will come down to individual design, but you'll commonly see them on the top right or bottom of the page. Simple enough, implement a drop-down menu with a clear label and include every language your website has been translated into.
You'll have some options for the best implementation based on your needs:
Porsche is a simple example of a clean menu for users visiting their international site that incorprates a dedicated menu with flags.
Separated by region, users can quickly find exactly what they need without having to wade through a massive list. They've even included a search function for an extra touch.
If you're targeting a very specific market, for example, you only see to the U.S. and need to localize for Spanish and English, you can include language buttons on your website's navigation menu.
A simple selection enables users to opt-in and quickly flip over to a localized version of the page.
There are still a few considerations to make:
USA.gov is one of the most popular examples of this, offering users the option to instantly translate the webpage into Spanish.
Simple, easy, and quick.
You can also keep it simple with text links, generally housed in the footer of your site, for each localized version. This works great as a middle ground between dedicated buttons and selection menus when you don't have enough options for a full menu, but too many for individual UI buttons.
Challenges and considerations here are of course space limitations, and either a dynamic or static approach:
Google is a great example of this. When you visit their French URL, google.fr, you'll start in English.
But there's a simple link at the bottom of the page that directs you right to the French version.
It might seem like common sense to include flags in your language selection menus. They're easy to identify to simplify the UX and add extra weight to the design.
There's a lot of nuances, and even politics, involved. Not all nations recognize the same flags, and no one country represents a specific language.
For example, you wouldn't want to use an English or U.K. flag for Ireland, despite both countries speaking English primarily, the Irish would rather have their flag and country represented.
One easy way around this would be to just list the same language multiple times, and specify which country that site is localized for with the flag, like what Porsche does.
But you'll also have to determine the best way to implement the designs; some flags are intricate, how will you design them in a familiar format that's quick and easy for development?
It might be easier to forego the flags altogether.
There are some standard best practices that you should adhere to when designing a website language selector:
But don't be afraid to get creative. There are some great designs and implementations out there, and this challenge requires some unique innovation if you're trying to develop the best user experience.