Designing A Better Language Selector — Smashing Magazine

Quick abstract ↬
In this collection of articles, we spotlight design patterns and strategies to design higher interfaces. You can discover extra examples in “Smart Interface Design Patterns”, a 6h-video course with 100s of hand-picked examples, curated by Vitaly.

Imagine that you just’ve simply arrived in Tokyo. Full of impatience and pleasure, you’re nearly to hit the street, but there it comes: an pressing warning out of your cell supplier, nudging you to prime up your dwindling steadiness. With some justified concern, you go to the website, simply to be redirected to the Japanese model of the positioning. You can’t learn Japanese simply but, but there isn’t any apparent choice to vary the placement, and there’s no choice to vary the language both.

As the information retains dwindling, you juggle between auto-translation and your restricted VPN choices — simply to expire of information in the midst of the session. The language selector is someplace there, but it’s disguised between cryptic symbols and mysterious icons, nowhere to be discovered on the spot.

Stripe with a popover permitting customers to leap to a distinct nation within the footer.”>Stripe with a popover allowing users to jump to a different country in the footer. Stripe (Large preview)

Chances are high that at some point you had a similar experience as well. As designers, we can of course make language selectors more obvious and noticeable, yet most of the time, the appearance of a component is only a part of the problem.

Too often, when we design interfaces, we subconsciously embed our personal assumptions, biases and expectations into our work. Of course, we can’t possibly consider all exceptions and all edge cases, along with all happy or unhappy coincidences. So we focus on the most common situations, eventually breaking a beautifully orchestrated user experience entirely for some of our disgruntled users.

Can we fix it? Absolutely! We just need to decouple presets, allow for overrides and allow users to specify their intent. But before we dive in, let’s explore what options we have in front of us.

The Fine Little Details Of A Language Selector

Usually, we all know after we want a language selector. Every multi-lingual website will want one, and this positively holds true for public companies and corporations residing in nations with a number of nationwide languages. It can also be vital for international manufacturers, organizations and the hospitality business — in addition to eCommerce the place items could be paid in varied currencies and shipped to varied locations world wide.

Hikvision with a sidebar overlay on the right.Hikvision with a sidebar overlay on the appropriate. Hikvinson (Large preview)

Where will we place a language selector? Well, customers have their regular suspects in fact. In my expertise, when requested to vary a rustic or language, a overwhelming majority of customers will instantly head to the header of the web page first, and if they will’t discover it there, they’ll bounce all the best way to the underside of the web page and scout the footer subsequent.

As for indicators of nation choice, flags really do work pretty nicely, and if customers can’t spot them, they search different icons which may symbolize a language in by hook or by crook — such because the globe icon or a “translation” icon. Obviously, relating to translations of articles or particular pages, customers depend on the legal guidelines of locality and seek for a number of language subsequent to the title of the article. So far so good.

Lululemon with a sidebar overlay on the right. The language is selected with a separated dropdown.Lululemon with a sidebar overlay on the appropriate. The language is chosen with a separated dropdown. Lululemon (Large preview)

Design-wise, nevertheless, there are many intricate particulars that we have to account for. Surely the selector by itself will stay someplace within the footer of the web page, and it’s also very prone to make its look within the header as nicely. However, we may additionally auto-redirect customers primarily based on their location and auto-detect language primarily based on the browser’s preferences, or immediate a modal window and ask customers to pick out a area first. We could possibly be utilizing textual content labels or abbreviations, icons or flags, native or customized dropdowns, preferences panes or sidebars, toggles, or standalone pages.

As we are going to see, many of those options have usability points on their very own; and if we need to maximize readability and cut back ambiguity, we have to provide you with a correct technique of easy methods to label and group languages, easy methods to current them, and easy methods to make the language selector apparent to customers — with out working right into a wild combination of accessibility and auto-translation issues down the road.

Let’s begin with one thing that’s in all probability apparent, however value stating nonetheless — auto-redirects could be useful, however they usually trigger extra frustration and annoyance than a assist.

More after bounce! Continue studying under ↓Feature Panel

Avoid Auto-Redirects

Many web sites depend on redirects primarily based on consumer’s location (IP) or browser’s language. However, if an individual is situated in Tokyo, it doesn’t essentially suggest that they fluently learn Japanese. And if their most popular locale is Dutch, it doesn’t imply that they need to ship bodily gadgets to the Netherlands. In the identical approach, if the popular locale is French, but it isn’t out there on the positioning, a consumer may encounter a fallback language that isn’t essentially the language that they’re most snug with.

We can’t confidently infer customers’ preferences with out asking them first. That doesn’t imply that we should always keep away from redirects in any respect prices although. If a consumer occurs to be connecting to a US website from Germany, it‘s perfectly reasonable to nudge them towards a German website. But if they happen to be connecting to a German website with an English locale preferred, it would be confusing to redirect them to the UK or US version of the site — even though it might very well be the user’s intent in some uncommon instances.

In basic, redirects primarily based on location are in all probability extra instructive than redirects primarily based on the browser’s language, however they’re error-prone, too.

A language selector drop-down within the header of Dyson.be. (Large preview)

On the very first go to, Dyson.com nudges guests to pick out the popular area and language within the header on the web page. Users can dismiss the bar and find the language selector within the footer of the web page once more.

BackcountryBackcountry auto-redirects customers to a different website. (Large preview)

Backcountry, a US firm for out of doors gear and clothes, robotically redirects its customers to a different website. Since 2018, the website is now not out there exterior the U.S. as a solution to the GDPR laws. With a VPN, it’s inconceivable to achieve the website, for instance, to buy and ship a present for a pal situated within the U.S.

AudiAudi auto-redirects customers primarily based on location. (Large preview)

Audi robotically redirects customers to a rustic deemed as a finest match. However, customers can select their nation by clicking on the language selector in the appropriate higher nook. On click on, a modal exhibits up with autocomplete and a disabled “Continue” button.

BMWBMWBMW avoids auto-redirect and guides customers to a alternative that works for them. (Large preview)

A worldwide BMW website doesn’t robotically redirect customers to any website. Instead, you’ll be able to find the “BMW in your country” choice in the appropriate higher nook of the header. It opens a modal with all of the choices listed, together with the distinguished button on the prime “BMW in your country”, which, on click on, redirects customers to the website thought-about to be the most effective match for them.

IKEAIKEA, with a sensible autocomplete for a language choice. (Large preview)

IKEA, with out an computerized redirect, however a really massive nation selector that understands domains, endonyms and languages of the most important nations on the earth. The “Go shopping” button could be the largest button on the earth and may deserve a spot within the World Guinness Records Book. Unfortunately, on the positioning, you’ll be able to change the nation, however not all the time the language.

While well mannered nudging is cheap, computerized redirects aren’t. Once we begin transferring customers from one website to a different with out asking them in any respect, we begin baking our assumptions into the design, and that’s often a pink flag. We shouldn’t be shocked by elevated ranges of frustration and abandonment consequently. Ironically, this knowledge isn’t tracked or referred to as the abandonment is occurring on the “other” website, with completely different departments and groups on the opposite aspect of the globe.

Either approach, whether or not we need to nudge customers in direction of a distinct website, or we completely want to make use of an auto-redirect, it’s positively a good suggestion to all the time permit customers to override redirects with guide preferences. This requires us to tame our assumptions and decouple our presets.

Decouple Location and Language Presets

Many websites rely on an assumption that location, language and currency are usually tightly coupled. After all, if a user chooses a location in Germany, they are very likely to prefer the German language and see prices in Euro. However, this is based on assumptions that work for many people, but break the experience entirely for others.

Delivery location and language choice are tightly coupled on Adidas. It’s inconceivable to regulate the nation and the popular language individually.Delivery location and language selection are tightly coupled on Adidas. It’s impossible to adjust the country and the preferred language separately. (Large preview)

For example, if you want to purchase sneakers on Adidas from Germany but deliver them to your friend in Poland, you need to be able to make sense of the Polish language when checking out. You can either choose the German language with delivery to Germany or the Polish language with delivery to Poland. It’s impossible to select the English language with delivery options to Poland, for example. In other words, both language and location are tightly coupled.

As it turns out, there are plenty of scenarios where this assumption doesn’t work:

  • A person is using a German VPN, but not be located in Germany nor understands German;
  • A person is connecting from Germany, but be visiting for a few days, and they might not speak nor read German at all;
  • A person is living in Germany, access a website in German, but prefers to pay with a company’s credit card in USD, rather than in EUR;
  • A person is living in Germany might want to deliver an item from an American store to an American friend, but keeps getting redirected to a German website;
  • A person is connecting from the USA but needs to be able to provide a VAT number because the product will be purchased by a German office with a German credit card.

Of course, we might consider all these situations to be very rare edge cases and dismiss them. But first, we need to track how many people actually experience such issues and end up leaving as a result. In practice, especially for global brands, these numbers might be more significant than one might think.

These problems appear because we frame common situations in tightly coupled and rather inflexible presets. Surely presets are useful as default options, but they break down when defaults aren’t good enough. That’s why it’s usually a good idea to decouple all presets, and allow users to make standalone choices.

An identical design, however a distinct method. On Mondraker, customers choose location and language individually.An identical design, however a distinct method. On Mondraker, customers choose location and language individually. Mondraker (Large preview)

On Mondraker, customers choose location and language individually. All nations are grouped into tabs, and on the backside customers can select the language of their choice. A really related design, however a fairly completely different method. A draw back: labeling all nations in a particular language might be not as efficient as utilizing corresponding native labels as an alternative.

Monese with tabs, separating language and nation choice. (Large preview)

Monese exhibits two tabs in the appropriate higher nook of the header. Users can swap between language and nation, defining preferences for every individually.

User preferences don’t need to be restricted by nation and language alone. We can permit customers to customise additional elements of the UI, from forex and auto-translation to items of measurement and date formatting.

Allow Users To Set Custom Preferences

For many websites, language and placement are simply the primary necessary attributes that convey what website could be a very good match for a buyer. However, to ship worth to customers, we’d need to go just a little bit past that.

Revolve.comRevolve.comRevolve with separate alternatives for language, nation and forex. (Large preview)

Revolve.com makes use of language, nation and forex presets primarily based on the consumer’s IP and their browser’s locale. However, customers can override these presets with customized preferences. They can select a rustic for transport, the language on the positioning and the forex. The trace for preferences is situated within the header, with a mix of a language abbreviation, flag and a forex indicator.

These particulars are sufficient to present all merchandise with the ultimate value that features supply prices to their nation and within the forex that’s most acquainted to them. That’s what the proper decoupling of location, language and forex is.

The language and nation choice are decoupled on AirBnB. (Large preview)

AirBnB suggests languages and areas in teams, but in addition permits customers to regulate their preferences and select a language and area of their alternative. Additionally, customers can opt-in to robotically translate descriptions and evaluations to English. The modal is prompted by a faucet on the globe icon in the appropriate higher nook of the header.

Once the settings are set, customers can bounce from one location to a different, examine costs in the identical forex and see evaluations robotically translate to a language that they could perceive higher. That’s undoubtedly a win for the customers.

iHerb with loads of additional preferences out there to customers. (Large preview)

iHerb goes the additional mile by offering a complete vary of further preferences for his or her customers. Not solely can customers select their language, most popular forex and transport vacation spot (and specify it with ZIP code for US locations) — they will additionally select most popular items of measure and verify out there fee strategies and out there transport strategies. Bonus factors for good autocomplete enter slightly than a not-so-good old style -dropdown, which is commonly the slowest kind element, all choices are displayed in plain textual content, therefore being searchable by in-browser search.

SkyscannerSkyscanner, with the language, location and forex all decoupled and displayed in a modal window. (Large preview)

For comparability, Skyscanner permits customers to immediate all customization choices with one massive button, grouping all choices in a number of drop-downs. Also, the interface all the time permits customers to fall again to the English language in the event that they’ve by chance made a mistake.

Which choice is healthier? Ultimately, this can in fact be determined by usability checks. In this explicit case, displaying a modal window upon entry won’t be a nasty concept because it gives tangible worth to customers — a price that they won’t be capable of spot in any other case. However, there could be another choice that might work even higher — utilizing a non-modal dialog as an alternative.

Patagonia uses a sticky non-modal for location and language selection.Patagonia makes use of a non-modal for location and language choice. Patagonia (Large preview)

Upon website entry on Patagonia, a sticky non-modal dialog seems within the left backside nook. Users can select location and language and save their preferences as a cookie. They may also all the time deliver the choice again by accessing the preferences bar within the footer.

State Street Global AdvisorsReplacing modals with non-modals is often a good suggestion. A mock-up of State Street Global Advisors – SPDR. (Large preview)

In the mock-up above, the necessary content material isn’t blocked by the modal; customers can scroll, navigate, choose and copy-paste. However, the choice pane seems within the backside proper part of the display. It may also be collapsed or minimized, nevertheless it does require an motion from the consumer. It is just a little bit extra intrusive than when silently positioned within the international navigation, however is simpler to find as nicely.

If you aren’t sure about the most suitable choice in your challenge, contemplate including a hyperlink within the navigation bar first. Measure design KPIs and check how they alter with a non-modal choice — a a lot much less intruding and extra pleasant choice — and finally a modal. Chances are excessive that the modals may carry out higher than one may suppose.

Large companies know the issue too nicely: navigating dozens of choices in a small overlay, and even a big modal is sort of cumbersome and requires a wholesome dose of scrolling. So it’s not very shocking that always web sites current all out there choices on separate pages, damaged down by areas and typically illustrated with nation flags.

RevolutRevolut with all out there choices displayed on a devoted web page. (Large preview)

Revolut shows all out there choices on a separate, devoted web page. The nations are written within the English language, organized in teams and listed alphabetically. However, the web page doesn’t solely showcase out there places, but in addition places that aren’t out there but. For this explicit case, it could be a good suggestion to permit customers to filter — e.g. cover all unavailable places, maybe with a toggle or tab above the record.

LogitechLogitech shows languages of their native format — that could be simpler to cope with for a very international viewers. (Large preview)

Logitech shows most languages of their native format — e.g. “Deutschland” for Germany, and “中文” for China. This eliminates the idea that the consumer wants to know English to seek out the nation or language of their alternative. On the web page, all nations (and out there languages) are grouped by geography and displayed throughout columns, making it simpler for customers to find them.

DellCountries grouped into tabs on Dell. (Large preview)

Rather than displaying all out there choices on one lengthy web page, Dell breaks nations by areas inside tabs. No flags are getting used, making the scanning a bit harder. Countries and languages are mixed. In this case, much less scrolling is required to discover a location that may match customers finest.

CiscoVertical tabs in motion on Cisco. (Large preview)

Not all tabs are alike although. Cisco makes use of a small overlay with vertical tabs, slightly than horizontal ones. This makes the choice very compact, and the answer very simple. It’s value noting that the principle drawback of tabs is that they make the content material inaccessible with an in-browser search (nicely, for now). The consumer all the time has to pick out a area first.

eDreamseDreams with accordions in motion. (Large preview)

Another choice, in fact, is to group the nations with a vertical accordion, because it’s performed on eDreams, for instance. You may want a bit extra vertical area consequently, however all choices might be scanned from prime to backside in a single go.

OracleOracle (Large preview)

A barely completely different form of nation selector on Oracle: a click-through overlay menu, with all nations grouped, slightly than displaying a standalone web page. That’s a really compact and simple answer.

If that you must show a variety of languages, discover in case you can group and show them on a single web page. If it’s getting too overwhelming, contemplate grouping them inside accordions or tabs — assuming that tabs appear as if tabs and don’t comprise cryptic labels. Or even higher: present customers with poignant autocomplete solutions.

Show Autocomplete Suggestions

Getting autocomplete proper isn’t a simple process. This is particularly troublesome if we’re coping with a number of items of data without delay, i.e. each nation and language. For it to work nicely, we have to assist frequent abbreviations, endonyms, and shorthands for all out there choices. And then, in fact, our autocomplete solutions ought to show each nations and languages, with an choice to decide on one choice or one other. Plus, we additionally may need to contemplate the assist of a number of “primary” languages (English, French, Spanish, to call a number of). Thats’ not simple in any respect!

FrameworkFramework (Large preview)

On Framework, customers can choose nation and language individually, each with autocomplete, with the most frequent choices highlighted on focus. There is not any have to scroll via the record of nations to seek out the popular choice. While this could be completely sufficient for some situations, it won’t be ample in a scenario when the consumer’s nation isn’t out there within the record. Instead, we may point out the closest places to the popular choice, slightly than guiding a consumer to a lifeless finish.

FrameworkWe may permit customers to leap to the places close by. Just a mock-up. (Large preview)

In the mock-up above, “4 locations nearby” may open an accordion, highlighting the closest places subsequent to Lithuania (Lietuva), indented. This sample won’t be relevant when a consumer is making an attempt to open a brand new checking account, nevertheless it could be helpful when a consumer is in search of a specific workplace of their nation, however can’t find it.

WiseWise (Large preview)

Wise additionally contains autocomplete for language settings. If the identical language seems in a number of gadgets, the autocomplete specifies what nation it refers to. All language choices are offered of their native format.

PorschePorsche (Large preview)

Porsche makes use of an accordion together with autocomplete as a web page overlay. The interface helps abbreviations and signifies out there choices with flag icons.

Undoubtedly autocomplete is a good addition to language choice. However, when testing it, discover how folks use autocomplete, and what they’re really typing to seek out their nation. Sometimes the fine-tuning of constructing autocomplete work for a lot of completely different languages could be an effort approach too underestimated and approach too time-consuming.

Grouping Countries

Not each location or language has to symbolize with a separate entry within the language selector. If a number of nations are talking the identical language, what if indicated by grouping nations inside one choice?

Daniel MarchiniCan we groupo nations and languages? A mock-up by Daniel Marchini. (Large preview)

Daniel Marchini has provide you with an fascinating idea of grouping flags inside a single choice. If the content material will seem precisely the identical for a number of nations, is it actually vital to indicate them individually? For instance, the Portuguese language is displayed as an choice for Portugal and Brazil, whereas the Spanish language is highlighted for Mexico and Spain. Obviously, not all nations could possibly be grouped this fashion, however in case you goal customers from particular nations, this could be value a shot.

AirwallexEuropean Union representing all European nations without delay, on Airwallex. (Large preview)

Airwallex’s nation selector teams all European nations as “European Union”. The service is obtainable within the complete European Union, so it’s not vital to pick out a person nation. However, if in case you have a barely longer record of choices, and you’re in search of an choice to open a checking account within the Netherlands, you may want a little bit of time to understand that the Netherlands is assumed as a rustic throughout the European Union.

Use Flags For Countries, Text Labels For Languages

When designing a rustic selector, it feels nearly pure to consider the flags they’re represented by. After all, in comparison with simply plain textual content, it must be a lot simpler for customers to find the icon that they will instantly acknowledge. This is certainly true, nevertheless, as James Offer has instructed in his fantastic weblog on Flags aren’t languages, flags are particular to nations, however languages usually cross borders.

We can discover French-speaking folks in Canada, Vietnam, Senegal, Switzerland, and plenty of different nations. It could be inaccurate to imagine that each one customers from these nations affiliate their alternative of language with a French flag.

Zsolt SzilvaiZsolt Szilvai (Large preview)

In the article “My Take On Language Selectors”, Zsolt Szilvai exhibits an fascinating instance of such a conundrum. During the usability checks of an software designed for the UAE, many individuals discovered the truth that the Arabic language was visualized with one single flag, as it’s utilized in many nations and can’t be recognized with any explicit flag alone.

CurveCurve (Large preview)

Curve.com opts in for a default worldwide model which is obtainable in English. There are a number of different choices out there as nicely however one may surprise in regards to the distinction between “International (English)” and “English (United States)”. When flags are used to point languages, it may possibly rapidly turn into just a little bit complicated.

BackmarketBackmarket (Large preview)

Backmarket features a record of flags within the footer of the web page to point native websites of {the marketplace}. When we need to drive customers to particular native web sites, we are able to safely use flags that finest symbolize nations, slightly than languages. Many websites additionally simply add hyperlinks within the footer as an alternative, making language labels simpler to seek out with an in-browser search.

BolBol (Large preview)

Flags for nations, and plain textual content for languages. Everything appears to be about proper on Bol.com. The nation selector (with a flag) is situated in the appropriate higher nook, the place most customers count on it.

To keep away from misunderstandings, just be sure you use flags in case your customers want to pick out a particular nation. However, in case you’re offering customers with a alternative of a particular language, then flags are in all probability not going to work nicely. There, an autocomplete with all out there nations and labels for languages written subsequent to them may work higher.

This in fact brings up a query: how ought to these labels really be written? In English or in a language’s native format?

Label Languages Locally

Assumptions are error-prone, and if it goes for combos of forex, language and placement, this holds true for the way we label languages as nicely. We shouldn’t assume {that a} consumer shall be talking one of many languages we select to see as a default choice. Instead, when customers choose a language, often it’s higher to all the time use the identify of the language in its native format.

So slightly than providing a alternative of German and Chinese, assuming that customers perceive English, we are able to label these choices as Deutsch and 中文.

StripeOn Stripe, every language is labelled regionally. No flags in use. Stripe (Large preview)

But if the languages are labeled regionally, anyone who occurs to be in China could be experiencing points switching to a barely extra acquainted language. Surely flags would assist to find a button that may permit for that, however we may additionally prefix the chosen language with a label, for instance, “Language” to make it simpler to identify the selector. Or we may simply add a hyperlink saying “English” within the header. This in fact depends on assumptions we’re making, nevertheless it could be simpler than hopping via the navigation bar and view-source with fingers crossed.

BookingBooking (Large preview)

Booking gives a touch to point that customers can change the language in a neighborhood language. If you favor to indicate a touch on hover, that’s one of many only a few instances the place one may think about using a language that many customers would perceive, and it could possibly be English.

BookingBooking (Large preview)

The Globe and Translate Icons

Since flags might be considerably problematic, what could be an inexpensive different to them? As briefly talked about firstly of the article, we are able to additionally use icons reminiscent of “Globe” or “Translate” to point the selection of locales. There is as nicely an official language icon, which is free to make use of, however sadly continues to be not as recognizable as the opposite icons.

Language selector buttons with icons. Icon 1 shows the earth, icon 2 shows two letters from different alphabetsLanguage selector buttons with icons. Icon 1 exhibits the earth, icon 2 exhibits two letters from completely different alphabets. Designed by Zsolt Szilvai. Zsolt Szilvai (Large preview)

Surely not everyone will be capable of perceive the icon together with a phrase that they will barely decipher, but when it’s prominently situated within the header or the footer, the prospect to be found are considerably increased.

TomorrowTomorrow (Large preview)

Tomorrow.one shows a big drop-down selector with a globe icon within the footer of every web page. It’s not out there within the header on the positioning. Because pages aren’t very lengthy, that’s in all probability not a giant downside, however customers may quit in the event that they need to embark on a long-running scrolling marathon, or if the infinite scroll prevents them from reaching the footer.

AtlassianAtlassian (Large preview)

On Atlassian, the language selector is tucked on the very finish of the web page within the footer, with a globe icon indicating the choice. However, if the consumer with a distinct browser language choice enters the positioning, it suggests altering the language on the very prime of the web page, with a globe icon showing there, too.

MondayMonday (Large preview)

Monday.com retains the language choice on the very prime of the web page, within the left higher nook. All choices are offered in three columns, with the present choice highlighted in blue.

While flags are simpler to acknowledge, icons can work in its place choice as nicely, particularly if that you must present customers with language choices, slightly than decisions for location. Even if the choice is offered within the header, it’s a secure wager to additionally place it on the backside to make sure that customers can discover it when they should.

Avoid Language Shorthands or Initials

Another fascinating downside that Zsolt Szilvai has found in testing is said to the use abbreviations, initials or shorthands to point a specific language. When we’re working out of area in navigation, we could possibly be utilizing “EN” for English, or “DE” for Germany, or “UA” for Ukraine. Indeed, these shorthands are sometimes well-understood, however they convey shocking outcomes when a consumer’s browser auto-translates all web sites in a specific language.

DecathlonDecathlon with fairly shocking language choices on cell (on the appropriate). (Large preview)

Not solely does it usually lead to damaged menus and shocking layouts; browsers additionally translate language shorthands, producing an interface that could be very troublesome to make sense of. However, had been the shorthands prevented in favor of the complete native identify of the language, the consumer wouldn’t need to cope with these points in any respect. Instead, the translator would assist them discover a language that may work higher for them.

N26N26. (Large preview)

N26.de makes use of a shorthand “EN” for “English”. The chosen language is disabled within the record of choices, nevertheless it’s in all probability a good suggestion to extend the colour distinction just a little. As customers scroll down the web page, the header stays sticky, so there’s actually no have to show the language selector within the footer as nicely.

WiseWise, with languages displayed in full in a drop-down. (Large preview)

Wise makes use of shorthands for language choice in the appropriate higher nook, however shows the languages in full on click on, with a noticeable focus model to point the place a consumer presently is. This avoids the issue of auto-translation that always turns abbreviations into seemingly random strings.

Wrapping Up

The country and language selector might appear like a quite trivial design challenge, but there are plenty of fine details that make or break the experience. When designing one, always decouple presets and reduce assumptions about groups that are likely to go together. Users expect the language selector to be located in the header or the footer of each page, and they often watch out for flags, “Globe” or “Translate” icons to find it.

If you have just a few languages, a drop-down overlay might be perfectly enough. If you need 10–15 languages, perhaps it’s worth exploring the option of a non-modal overlay with autocomplete. If there are even more options to display, consider using a standalone page, with countries grouped into tabs or accordions.

Language Selector Checklist

As usual, here’s a general checklist of a few important guidelines to consider when designing a better language selector:

  • Nudge users, but avoid auto-redirects.
  • Decouple presets, be it location, language, or anything else.
  • Allow users to set custom preferences (currency, time zones, units of measure).
  • Consider using a non-modal dialog.
  • Organize countries and languages in sections, tabs, and accordions.
  • Provide input with autocomplete suggestions.
  • Use flags for countries, but avoid them for languages.
  • Consider the Globe and Translate icons instead of flags.
  • Label languages locally, e.g. Deutsch instead of German.
  • Avoid language shorthands or initials.
  • For accessibility reasons, make sure the country selector appears in the header as well as in the footer, and is keyboard-accessible.

Meet Smart Interface Design Patterns

If you have an interest in related insights round UX, check out Smart Interface Design Patterns, our shiny new 6h-video course with 100s of sensible examples from real-life tasks. Plenty of design patterns and tips on all the things from accordions and dropdowns to advanced tables and complex web kinds — with 5 new segments added yearly. Just sayin’! Check a free preview.

Smart Interface Design PatternsMeet Smart Interface Design Patterns, our new video course on interface design & UX.

100 design patterns & real-life
examples.
6h-video course + stay UX coaching. Free preview.

Resources

If you discover this text helpful, right here’s an outline of comparable articles we’ve revealed through the years — and some extra are coming your approach.

Smashing Editorial
(il)

Leave a Reply

Your email address will not be published.