How to Build a Thoughtful Website Language Selector
Categories
Pro Tips
Web Design
Author
Lee Barguss
Published
30 Jul 2023
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.
The purpose of a language selector is to allow content to be accessible by a wider international audience, usually in a user’s native or proficient tongue, so there’s an improved level of communication between the writer and reader.
It’s crucial that any language selector is intuitive and easy to use so that visitors can quickly access content in their preferred language. So let’s build one together!
To keep it simple, we’ll use English as a Default language since we’re already reading/writing in English, and we’ll add to this list the top 10 most-spoken (native and non-native) languages in the world (Data from ethnologue.com):
English (1.452 billion speakers)
Mandarin Chinese (1.118 billion speakers)
Hindi (602.2 million speakers)
Spanish (548.3 million speakers)
French (274.1 million speakers)
Standard Arabic (274 million speakers)
Bengali (272.7 million speakers)
Russian (258.2 million speakers)
Portuguese (257.7 million speakers)
Urdu (231.3 million speakers)
The Default language will be pre-selected, and tapping on the button will open out a drop-down menu with a list of the 9 remaining languages.
Language Selector V.01
List in Default Language
This is the most obvious place to start when beginning to build a language selector, and one of the most commonly implemented selectors across the web.
This version is really bare-bones and not very user-friendly. As an English speaker, I can easily scan down the list and select the language I want to view the content in. However, there is a big problem. If I’m not proficient in English and/or Latin script, this list will be quite difficult to navigate. What if I only understand Chinese and I don’t know how the word Chinese looks in English?
Language Selector V.02
List in Native Format
This version is essentially a duplicate of the previous version, but instead we’ve replaced the names of each language in English with the name of each language in their native written form (let’s just call it Native Format for short). This means even as a non-English speaker, I can easily scan down the list, look for any list items that I recognise, and click to select.
It’s very simple, easy to decipher, and applies well to most cases. But I think we can explore further and see what other options and variations we can figure out. This version is more ideal for smaller lists, but if we have a list of tens of languages, there will definitely be lots of scrolling and searching up and down without a search bar embedded into the element.
Language Selector V.03
List in Default and Native Format
Here we have the next version in two different variations to see how they look – The first listing the language in Default (English), supported by the Native Format, and the second listing the language in Native Format, supported by Default.
This is also a great option as it combines both the first and second versions we created above, meaning that users with proficiency in any language from the list can read this list and select what they’re searching for.
My feeling is that this version might be a little too “wordy” since there are multiple words that mean the same thing. If you’re trying to read/scan the supporting text only, it can be difficult to follow the second column down the list, since the start of each word is placed at different positions because of the differing lengths of the first words.
Let’s try something a little more streamlined and visual.
Language Selector V.04
List in Native Format, supported with Locale Flags
We’re upping the game here with three variations in this one version, all of which contain a country flag (a visual indicator of a language origin) to support the various texts.
In the first variation, we have the name of the language in its Native Format, the second has the name of the country in Native Format, and the third has the languages written in their 2-letter ISO language code (ISO 639–1).
Adding a small visual indicator (image/icon) is a great way to improve a list and make it easier to navigate without having to read – A reason why you will come across these variations a lot across the web.
However, a language is not always defined by a country so this option is not always for everyone. Take English for example. It may be the same language used in the UK and say the USA, and they’re mutually intelligible, but different locales have some different variations in vocabulary and spelling.
Native French speakers in Europe can be found not just in France, but also Belgium, Luxembourg, Monaco, and Switzerland all have French as their official language. If you’re writing content for users of one country, you might not want to use another flag in the language selector, especially if there is some bad history there.
Language Selector V.05
List in Native Format, supported with Locale
Since a language isn’t equal to a country, let’s try ditching the flags and going back to basics with a text-only application. This version includes the language name in Native Format, supported by the country name also in Native Format.
For a list of just 10 languages, adding in the locale might be a little overkill, but this does set us up for two main functions. The first is future-proofing the language selector, meaning that this format allows for a large expansion of languages and locales without needing to change up the format. This will work great if you’re building a large platform that you want to be accessible from all over the world.
For example, if you want to publish a website with content and products for users in both Portugal and Brazil, then you can list languages like this:
Português | Portugal
Português | Brasil
or for countries that have multiple official languages like Switzerland:
Deutsch | Schweiz
Français | Suisse
Italiano | Svizzera
Rumantsch | Svizra
The other function is that this format coincides with Locale IDs, which are identifiers in various platforms and software that consists of both language and locale codes. For English, they’re formatted like this:
en-au | English – Australia
en-ca | English – Canada
en-gb | English – Great Britain
en-ie | English – Ireland
en-us | English – United States
Language Selector V.05 (Expanded)
List in Native Format, supported with Locale
If we were to have a platform that supports all locale for each of the 10 languages we’ve implemented, we’d need to create a scrollable dropdown element (or even a dedicated page) to be able to cover the number of items we’ll have.
As an alternative or addition to a search function for a long list, we could instead list all language options in their Native Format, supported by the Locale name also in Native Format.
Since there are a lot of countries (and some with multiple official languages) that we can add in here, I thought it would make sense to group the list items into regional categories. In the example here, I’ve adapted the categories to work with the supported languages – Merging the categories of Africa and the Middle East.
Again, this version would only be reserved for larger platforms that are providing content across the world. The primary function of listing the country at this point would be to ensure that users are accessing region-specific content.
An example of this usage could be a clothing store that offers content in Spanish language. Selecting Spanish/Spain (Español/España) would allow the user to view products being sold to Spanish customers, prices in Euro (€), shipping availability in Spain, and so on.