Best practices for language selector (and why not to use flags)

The common practice for representing language selector on websites is to use country flags. Unfortunately, it’s not a good way of doing so in terms of UX.

I know it is tempting to go with the crowd and just throw icon flags on your website and be done with it. Like most of us, at some point, I used to do that too. But a little research shows that it’s a bad way of presenting users the possibility to change the language. Let’s find a better approach and use it from now on.

Best practices for presenting languages

• Use the native language names
• Try to detect the user’s language and show the appropriate content
• Display the language selector in a clear way, e.g. with a globe icon in the footer, in the header, or in the main navigation
• Use flags only if the content is specific to the country
• Remember about HTML hreflang

HTML tags

Tell Google and other search engines about localized versions of your page:

<link rel="alternate" hreflang="lang_code" href="url_of_page" />

Further reading

• If you want to know more on the subject, I recommend Flags are not languages blog as a great resource about designing global UX (1, 2, 3, and more).
• To learn more about HTML tags check the Google documentation.

Share

Thanks for reading. If you liked it, consider sharing it with friends via:

https://www.damianwajer.com/blog/language-selector/

Let's be in touch!

Don't miss other useful posts. Level up your skills with useful UX, web development, and productivity tips via e-mail.

Don't you want to subscribe via e-mail?

See other ways to keep in touch.