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?
Answer
I don't think there is a perfect solution for this, but this site has various very good posts about the topic:
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
No comments:
Post a Comment