How would you provide an UI to change user interface language? Say we have an web app that supports 20 languages and has fully localized user interface for all those languages. How to represent the feature to change the currently used language?

The "official" icon for this (http://www.languageicon.org/) is really poor in my opinion. That icon design fails miserably if the icon should be displayed in small size (minimum suggested size is 24x20 pixels and I'm trying to scale down to 16x16 size). In addition, this icon is not widely understood and plain wireframe globe symbol seems to be better understood, yet that is not globally understood, either. The small area is required because the service contains publicly accessible content that is often accessed via Google and about half of the visitors are using mobile phones so display area is really short all the time.

I'm open to solutions other than plain icon, too. I'm currently thinking keeping our current icon-only style because that takes so little space but it is not working well with real world audience.

The hard use case I'm thinking is Arabic user visiting the service while staying in China (that is, all guesses about correct user interface language have beed missed, writing direction is different from expected and currently used language does not have even concept of a letter). The user interface has zero words that can be even understood as a "word" for Arabic user. Having a box with letters "ch" as commonly used on technologically oriented sites does not cut here. Neither does displaying a national flag for China because nations and languages do not have 1:1 relation. A poor man's solution would be to always display "Change language" and assume that everybody understands English that much.

We're currently using Android 2.x–4.x-like "letter A with three dots" as a symbol for changing the localization. It turns out that even though Android is pretty widely used, this symbol is known by pretty much nobody. Android 6.x uses wireframe globe symbol (https://commons.wikimedia.org/wiki/File:Globe_icon.svg) so I guess that's one option to take. Update: Android really uses a bit simplified icon that would match my requirements: http://uxrepo.com/icon/android-language-by-google-material – this will scale much better to small icon sizes (alt source: https://design.google.com/icons/#ic_language).

Can you suggest anything better?

  • 3
  • I agree that this question is similar. The possible duplicate question is stricly about icon only design. I'm open to other solutions, too. I'll reword to make this difference more clear. – Mikko Rantalainen Apr 25 '16 at 9:51
  • @MikkoRantalainen the second link is not working, can you please edit/update it? Thanks – Abektes Apr 25 '16 at 10:20
  • uxrepo.com seems to be really unstable today. Keep hitting the refresh button and it will work sometimes. I'll add an another URL for the icon. – Mikko Rantalainen Apr 25 '16 at 10:55
up vote 2 down vote accepted

I don't think there is a perfect solution for this, but this site has various very good posts about the topic:

http://flagsarenotlanguages.com/blog/2013/10/case-study-onefinestay-com-and-dropdown-language-selection/

Key lessons learned (the TL;DR version):

  • users are easily able to find translation links in footers
  • language names work well at communicating links to translations – but only if the user is familiar with that alphabet (for instance, as English-speaking user won’t recognize Chinese lettering if Chinese is the current language)
  • the use of flags do not aid users more than listing language names and using other iconography for selectors
  • be careful when using online remote testing. Careless participants can skew your outcomes
  • Can you quote the relevant info so if that link dies it's still available? – Midas Apr 25 '16 at 9:57
  • That's a fine link and I marked your answer as accepted. I agree with Midas that the answer should contain the most important parts copied ("quoted") here in case the original site is not available in the future. I read the article as "put a globe icon on the top right corner of the site and a list of all supported languages with each language name spelled in its on language at the bottom of the page". The language list is going to look like wikipedia left sidebar (en.wikipedia.org/wiki/Energy#p-lang-label) in case you have lots of localizations and feature accessibility is a must... – Mikko Rantalainen Apr 25 '16 at 10:11
  • Fair enough. My idea was not only this link, but the blog as a whole. I think the topic is a bit too complex for a one answer fits all... – Remy Apr 25 '16 at 12:31
  • The idea of copying relevant info is to make sure the actual answer does not get lost. I would guess that stackexchange.com is going to live a bit longer than flagsarenotlanguages.com. – Mikko Rantalainen Apr 28 '16 at 12:35

Your Answer

 
discard

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Not the answer you're looking for? Browse other questions tagged or ask your own question.