Website Language Selector Best Practices For a Simple UX | Smartling (2024)

Matt Grech

Content Marketing ManagerSmartling

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.

Why do we need a language selector?

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.

Automated language selection handled well

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:

Website Language Selector Best Practices For a Simple UX | Smartling (2)

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.

Website language selector strategies

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.

1. Selection Menus

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:

  • How will you organize the menu and represent each language? You could separate the menu by region or continent and include every spoken language offered for easy navigation.
  • Will you list languages only, or list countries multiple times for different languages?
  • What kind of icon or button will you use to highlight the menu? It'll need to be recognizable

Porsche is a simple example of a clean menu for users visiting their international site that incorprates a dedicated menu with flags.

Website Language Selector Best Practices For a Simple UX | Smartling (3)

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.

2. Dedicated Language Buttons

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:

  • The biggest design challenge here is space. Any more than two languages and it'll get busy fast.
  • You'll also need to carefully consider exactly where these buttons live. They shouldn't be in the way of content or a major focus of your navigation, but they also can't be hidden. We want to minimize clicks for users. is one of the most popular examples of this, offering users the option to instantly translate the webpage into Spanish.

Website Language Selector Best Practices For a Simple UX | Smartling (4)

Simple, easy, and quick.

3. Text links

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:

  • Dynamic would mean looking at the IP of the visitor to determine the rough location and serve the appropriate text link(s) for that region.
  • Static would mean incorporating text links as a permanent fixation in your UI, like the aforementioned example of including text links in your footer.

Google is a great example of this. When you visit their French URL,, you'll start in English.

Website Language Selector Best Practices For a Simple UX | Smartling (5)

But there's a simple link at the bottom of the page that directs you right to the French version.

A word on flags

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.

Website Language Selector Best Practices For a Simple UX | Smartling (6)

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.

Website language selector best practices

There are some standard best practices that you should adhere to when designing a website language selector:

  1. Always use the local format and spelling of the language. It needs to be recognizable instantly to native speakers. For example, German should be listed as Deutsch.
  2. Automation is great to have, but you want visitors to have the option to tailor their experience
  3. Make it easy to find, you don't want to end up frustrating visitors. Redundancy helps a lot, and it might make sense to combine strategies like a menu up top with text links in the footer.
  4. Avoid flags unless content is specifically tailored to that individual country.
  5. Implement visuals like a globe or even a map for a more visual experience.
  6. Be careful implementing a drop-down menu, especially when designing for mobile with limited real estate.
  7. Don't forget to tailor the currency based on the visitor's location, and even provide an option for users to specify the currency if it isn't already localized

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.

Tags:Consumer Web/MobileeCommerceWebsites and Web Applications

As an expert in website localization and user experience, I've had extensive experience in optimizing digital platforms for global audiences. My background involves working with various companies and contributing to the success of their online presence through effective language selection menus and seamless localization strategies.

The article by Matt Grech, the Content Marketing Manager at Smartling, provides valuable insights into the importance of a well-designed language selection menu for websites. Grech emphasizes the significance of a user-friendly experience in navigating websites and how it contributes to user retention. Let's delve into the concepts covered in the article:

  1. Localization and User Accessibility:

    • The primary goal of localization is to make a website accessible to users worldwide.
    • A localized site is most effective when users have the option to choose their preferred language.
  2. Automated Language Selection:

    • Automation can play a crucial role in selecting the user's language based on factors such as IP address or browser default language.
    • The example of ASOS is highlighted, showcasing successful automation of language and currency preferences.
  3. Website Language Selector Strategies:

    • The article discusses three common strategies for implementing a language selection menu:
      • Selection Menus: Dropdown menus are effective for a large number of languages. Organizing by region or continent and using recognizable icons or buttons is essential.
      • Dedicated Language Buttons: Useful for specific markets, with consideration for space and placement to avoid clutter.
      • Text Links: Simple links in the footer serve as a middle ground, particularly when there are too few options for a full menu.
  4. Challenges and Considerations:

    • Challenges include space limitations and the choice between dynamic (IP-based) or static (permanent) text links.
    • The article provides examples from and Google as illustrations of dedicated language buttons and text links, respectively.
  5. Flags in Language Selection Menus:

    • While flags may seem intuitive, nuances and potential political implications exist.
    • Not all nations recognize the same flags, and using flags to represent languages can be misleading.
    • The article recommends alternatives, such as listing the language multiple times or using visuals like a globe or map.
  6. Website Language Selector Best Practices:

    • Adherence to local language formats and spellings is crucial for instant recognition by native speakers.
    • Offering options for users to tailor their experience is essential alongside automated features.
    • Best practices include making the language selector easy to find, avoiding flags, and implementing visuals like a globe or map.

In conclusion, the article provides a comprehensive guide for designing effective language selection menus, considering user experience, localization, and best practices for global websites.

Website Language Selector Best Practices For a Simple UX | Smartling (2024)


Where do you put language selector on a website? ›

Selection Menus

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.

Which language is best for UX design? ›

What are the best programming languages and frameworks for user interface and user experience design?
  • HTML, CSS, and JavaScript.
  • Swift and SwiftUI. Be the first to add your personal experience.
  • Kotlin and Jetpack Compose. ...
  • Python and PyQt. ...
  • C# and Xamarin.
  • Here's what else to consider.
Sep 20, 2023

How to handle multiple languages in a website? ›

Managing multilingual versions of your site
  1. Use different URLs for different language versions. ...
  2. Tell Google about your different language versions. ...
  3. Make sure the page language is obvious. ...
  4. Let the user switch the page language. ...
  5. Use language-specific URLs. ...
  6. Using locale-specific URLs. ...
  7. How does Google determine a target locale?

How to make a language selector in HTML? ›

Language links should contain a span element with the lang attribute. Every language link in the language selector dropdown that is different from content of the current page, should be defined using the lang attribute on a <span> tag wrapping the relevant text (e.g., <span lang="es">Hola</span> means Hello. ).

Where should the language switcher be placed? ›

Place language and country switchers in discoverable positions (top right or left corner of the page or a hamburger on mobile) and make sure that people will recognize them by using the additional signifiers such as the country flag and currency and displaying each language name in that language.

How do websites know what language to use? ›

There are three major ways websites detect users' preferred language. It could either be based on browser preference, IP address, or internationalization.

What is a language selector? ›

A language selector is an element or feature of user interface that can be found on websites, apps and software to offer multiple languages for their users. It's most commonly represented as a drop-down menu or list and usually found in a header or footer element, or within Settings.

Which language is used in UI UX? ›

While there isn't a specific language used for UI design, if you're designing for the web, you'll benefit greatly from a good foundation in HTML and CSS, even if it's just to be able to communicate with your team.

Should UX designers know how to code? ›

As a UX Designer, you don't need to know how to code. However, a basic understanding of how software and websites are built is essential. By understanding fundamental programming concepts and language, you can: Understand which parts of your design are technically complex.

What are SEO best practices for multilingual websites? ›

10 multilingual SEO best practices
  • Use dedicated URLs. ...
  • Don't forget to apply hreflang tags. ...
  • Stick to one language per page. ...
  • Translate the “hidden” parts of your website. ...
  • Use location-based keywords. ...
  • Invest in quality translations. ...
  • Always localize your content. ...
  • Consider local hosting.
Apr 16, 2024

How do I switch languages on a website? ›

Android Phones
  1. Open the Chrome app.
  2. To the right of the address bar, tap More (three dot icon) > Settings > Languages.
  3. Under “Chrome's language,” tap the current language.
  4. From the language list, select the language you want.
  5. After the language downloads, in the toolbar, tap Restart.

What are the two most commonly used website languages? ›

Languages most frequently used for web content as of January 2024, by share of websites
CharacteristicPercentage of websites
9 more rows
Feb 19, 2024

How do you create a language guide? ›

How to Create a Language: A Guide
  1. Find a Name for Your Language. Naming your language is not just a casual decision. ...
  2. Build a Lexicon. Now that you have got a name for your language, it is time to begin. ...
  3. Write Grammar Rules. ...
  4. Create a Writing System. ...
  5. Work on the New Sounds. ...
  6. Practice Your New Language. ...
  7. Teach Your Own Language.
Aug 2, 2023

How to create a custom language? ›

How to Create Your Own Language
  1. Name Your Language. ...
  2. Build Grammar Rules. ...
  3. Consider Basing Your Artificial Language on an Existing Language. ...
  4. Combine Words to Make New Ones. ...
  5. Get Inspiration from Existing Alphabets. ...
  6. Record Everything. ...
  7. Practice Your Language.
Mar 2, 2021

How do you create a visual language design? ›

How to Create a Unique Visual Language for Your Brand
  1. Stick to your style guide.
  2. Be creative with your materials.
  3. Don't be afraid to come up with your own meanings.
  4. Use consistent visual elements.
  5. Stick to the principles of visual communication.
  6. Always look for design inspiration.


Top Articles
Latest Posts
Article information

Author: Dan Stracke

Last Updated:

Views: 5511

Rating: 4.2 / 5 (63 voted)

Reviews: 94% of readers found this page helpful

Author information

Name: Dan Stracke

Birthday: 1992-08-25

Address: 2253 Brown Springs, East Alla, OH 38634-0309

Phone: +398735162064

Job: Investor Government Associate

Hobby: Shopping, LARPing, Scrapbooking, Surfing, Slacklining, Dance, Glassblowing

Introduction: My name is Dan Stracke, I am a homely, gleaming, glamorous, inquisitive, homely, gorgeous, light person who loves writing and wants to share my knowledge and understanding with you.