Using flag in language selector is still okay
Gunnar Bittersmann had a great talk on designing user experience for multilingual websites at <a href="http://2013.front-trends.com/">Front-Trends 2013</a>. But one of key ideas from his talk seemed arguable and I could not fully agree. He offered to <a href="http://bittersmann.de/articles/no-flags/">never use flags</a> and use language labels instead.
The main argument agains flags is that flags don't match with languages. And that's true. So you should not use flags for the list of languages. But the alternative is to use language labels, no matter how many languages you have. That's what makes me feel uncomfortable: for truly multilingual website with great user interface and design, is that really a good idea to have language label for every language at every page? What if you've translated your web service to 50+ languages? 50+ labels does not seem like a great design, it's more likely to spoil your interface with lots of information which 95% users will not probably need in everyday service usage. And that's the main problem.
Having a lot of text information and elements that are not used daily is unnecessary. The lighter your web service is, the easier it is to use, which means the better user interface. Language switching is something you don't need often, and most users will not need to switch language ever.
Let's have a closer look to initial problem. Imagine you are in china and don't understand chinese. You want to use twitter and it looks like this:
How do you find the language selector in order to switch the language? You can't. And flags don't match languages, so there are no flags. Well, not exactly. There is one case when flag matches the language: the current country flag. The default language of the country will always match the flag of country you are located in. So it's OK to show the flag for default value. And we can use it for language selector. Is there any problem finding language switch control when we add flag?
It seems clear enough that flag of current country is the element you need to click in order to switch language. And after you see the dropdown with languages, you should not use flags for the language list, because in the list languages still may not match the flags. So the initial language selector, for switching from default language is the only place good for a flag icon.
Think of Switzerland. They speak french, italian, and german (all official languages). It's wrong to use german flag for Switzerland. And it's wrong to use swiss flag for german language in the list. But if you are in Switzerland and the default system language is German, it's OK if you see swiss flag in the language selector control. And you can easily guess that clicking on the flag will trigger the language selection.
So which one is better: having lots of language labels at the bottom of your website or having one flag in the dropdown? It's for you to decide. But there clearly is an option to use flag for language selection control, and it's also a nice way to handle multilingual interface. Just remember: it's probably not the best idea to have a lot of unnecessary elements on your website if they are not useful for most of users.
P.S. I would appreciate your feedback on <a href="https://qbaka.com">Qbaka</a> frontend error monitoring and analytics, the tool I've been building with other developers last year.
Written by Andrey Mima
Related protips
1 Response
Having 50+ languages in a menu might indeed be problematic. Wikipedia would list them all in the sidebar. Which works on wide monitors when you can’t use the full width for the main content anyway. (The measure should not exceed 80 characters per line.)
Especially on small devices you might want to hide the language menu (or part of it, showing the main languages covering a large part of the target audience and a clear indicator that there are more languages to chose from).
However, I still don’t think that a flag representing the language menu would be a good idea. Language–flag mismatch aside, your proposal indicates where you are (current language), not that there’s a way to somewhere else. But that’s what a marker should do: indicate that there are other options. Instead of a flag for the current language there should be an icon for other languages.
There had been an attempt to introduce such icon [http://www.globalbydesign.com/2009/04/23/is-this-the-next-language-icon/] but they failed, and right so. The best icon we have so far is a globe or map. It doesn’t clearly say ‘language menu’, rather vaguely ‘some kind of localization‘, but the user would figure out its meaning.
So I would go for a globe or map icon—not only for hidden language menus but also as an eye catcher on fully visible language menus. I should have mentioned this in my talk at Front-Trends.
Have a fresh tip? Share with Coderwall community!
