How to graphically represent a language

Question

Websites often present language selection to users with flag icons, but I think this is simply wrong. Flags represent countries.

There are two reasons for a user to change the display language (or at least click on that flag):

• Change the language as he can't read the one displayed: even if the country is correct (say Switzerland), people can speak different languages (French, German and Italian)
• Adapt the content to his country: even if the language is correct, an English speaking visitor may be interested in British content rather than US content.

The logic I would follow is:

1. If you have country specific content, let the user select his country first. Flags are perfectly correct in this case.
2. If the country has been selected or if the content doesn't depend on the country, let the user select his preferred language. And back to my question here: how to graphically represent a language?

I've seen "English" flags half US/half UK, but how would an Australian identify to that?

My question is not about the techniques used to recognize a user's culture or country of origin using his IP and browser preferences, but how to avoid displaying available languages by their names?

Conclusion considering the answers:

Do not use a flag to represent a language. There is no natural graphical representation for a language. The only acceptable icon for a language is its two letter code as it is used in the Windows standard language toolbar. Even with this icon, it is highly recommended to put the language name in plain text, preferably in its native form.

Update: I just discovered that there is a running competition to Create an icon to signify "language". The results should have been published by Jan 15th 2010, but two months later there is still nothing. It must be a problem with no solution. Update 2013: There is finally a winner for the "switch language" icon. It doesn't solve the graphical representation of a language but I think it's a nice solution for its purpose:

Answer 1

Perhaps just the opposite of what you wanted but we have in a few cases of municipalities with diverse ethnicities resorted to displaying the top languages by name and adding a globe icon for other translations.

You could also try making icons with abbreviations of the language name next the actual name.

Answer 2

There is no good graphical language representation.

• Flags work in some situations, when there are limited choices (up to 4-5 flags) and no ambiguities. They fail for multilingual countries (e.g. India, China), and can look jarring for multi-country languages (e.g. English, Spanish).
• ISO 2-letter codes are often confusing and unfamiliar. For instance, BS is Bosnian (BA is country code and TLD), MS is Malay (MY is Malaysian TLD... but MY is Burmese language).

The way BBC lists languages works well (as @Hisham suggested):

Benefits:

• Not confusing language with country. However, it does allow distinctive country-specific services when necessary (note Brasil and Portugues).
• Sorting the languages by their English name.
  • Easy to find in a long list.
  • Easy to search for using Ctrl+F on a busy page.
  • Politically neutral (avoids questions like "why is Urdu below Tamil?").
  • Familiar to non-speakers (e.g. if you want to print an article in a language you don't know).
• Shows the native-language name, for those not familiar with English.

The obvious disadvantage is that it takes up a fair amount of space.

Unrelated tip: put the language choice on every page, linking to the the copy of that page in the relevant language. Many sites take the user back to the home page in the given language -- easier to implement, but almost never what the user wants.

Answer 3

I see two different questions being asked:

1. how to represent a language, and

2. how to represent a country

These are entirely two different things. Representing countries is easier because there is a one-to-one correspondence with flags, you can use an approach similar to this one:

For representing languages, I like how the BBC does it, showing the language's name in the local script:

If you click on the More languages link, the BBC presents a page that not only shows more languages, but also maps country names to a map – and vice versa.

Answer 4

I see that a decision was made on the Design A Language Icon page (as mentioned in the original post). They' gone with this:

Apparently, the reasoning behind this is:

Why this color? : It is similar to the color of tongue. It is pastel and not disturbing (indeed color options are available but this is our choice).

Why this glyph? : Because it is not related to any other idea or symbol, it does not signify something else, it is exlusive for selecting language.

Why the shape? : It is easy to draw, learn, recognise and remember. It works both black and white, very scaleable, simply put it has all the aspects of a working logo.

I don't believe this has actually been taken up by any major sites as yet, and my opinion is that it looks more like a SAVE icon (3.25 floppy disk) than a tongue. However, is this something you would go with?

Answer 5

Sorting through a large list of flags has never been helpful to identify your content. Having to identify your specific requirements amidst such a huge plethora of graphics is cute for designers, but unhelpful to users, who, unless they are familiar with the particular icon set and/or every country flag, will have a hard time visually processing and sorting. In comparison, most people with access to a web-navigating device are familiar with the Latin alphabet and which of its letters their country and language begins with (when romanized form when necessary). In seeking to represent languages pictorially, you would be creating a new visual taxonomy from scratch. Massive exacerbation. My advice is to include a single visual device (say a globe or blank flag) to prepend the label for quick recognition of the functionality, and a pure-text alphabetized list by drop-down for input. People can then use the universal functions of the Latin alphabet, direct text input, scrolling and arrow buttons to quickly select their desired option without first having to decode a new interface (when the whole purpose of multi-language or -country selection should be to minimize the user's need to assimilate new taxonomies).

Answer 6

I suggest using icons with an abbreviation of the language on them.
There are two major standards for language name abbreviation. One is ISO 639, which allows abbreviation languages into two or three letter abbreviation.
Second one is IETF(I can't post more than one link so use wikipedia), which is more advanced and allows you to abbreviate both a language and a country.

You can combine the selection of country and the selection of flag, by displaying the abbreviation with the flag as the background.
Anyway, do not forget to add tool-tips with full language names.

Answer 7

I agree with the initial suggestion, namely: flags should not be used to represent languages.

For some web site visitors, a particular flag might be a natural representation of their language, and such a visitor if asked this question might mistakenly think people are being either politically correct or excessively analytical.

My business relies on people making a purchase on the web sites I'm involved with. It's crucial they get the right impression within the first few seconds. This involves an emotional response as much as a logical one. If I want to pay my mortgage this month and next, do I want to start by confusing, insulting and frustrating the customers? You bet I don't.

So what is the best solution? I suspect that languages don't generally have better graphical representations than simply the name of that language written naturally.

As a footnote, we should acknowledge that we're talking mainly about written languages in this Q&A, which is what counts for most web pages (which are typographical). There are a number of spoken Chinese languages, but for a web page it's likely the distinction between scripts.

Answer 8

This perhaps disagrees with the general consensus here that 'flags are bad for language', but how about the following:

The Apple way is to do the Country first and then the Country Name in the language - so reverse the standard locale from en_GB to GB en.

I think it makes sense that some one Suisse will search for their Country first and then the language.

If you want to represent it graphically too then have two flags next to each other

So Swiss German is | and Belgian Dutch is | .

I think this would work for most European and South American languages, but I don't know how it would work for Asian languages. You could focus on the symbols that are used to change language with in country websites.

Answer 9

Difficult to get a single icon to represent each language in terms of agreement or design time. John Yunker's insights on global gateways may help. Using a globe icon to initially get users to a choice list and then spelling out language and country options in their own local language seems to be optimal:

http://motivawebconsulting.com/2011/to-flag-or-not-to-flag-language-links/

Flags have a place, the question is do they scale to your audience requirement and are they usable:

http://www.globalbydesign.com/2010/10/28/apple-giving-up-on-flags/

Also, maybe step back and consider the entry and exit points to the language choice. Are users searching, navigating by links? In some sites above you can see how enabling users to get to their country option and then choose a language is priovided, in others I have seen, where entry locales cannot be detected by browser etc, providing a long list of country/language (or locale) options in the native language preferably.

Answer 10

I had this problem on my website, with an added limitation that I could only use static unicode symbols, no images or dynamic text, because the translate button plugin didn't allow such customization.

I went with （語）. My reasoning is that:

1. This is an Asian han symbol that roughly means "Language", and it is understood by f.ex. Chinese, Korean and Japanese people alike.

2. If people that don't understand Asian languages look at this symbol, they recognize that it is not English, and thus since the rest of the site is English, the button probably has something to do with language.

So most people, regardless of what language they speak, should be able to deduce that the button has something to do with language, and therefore most likely is a button to translate the site.

Answer 11

If I look at other products (not on the internet) that contain language-specific information, for example user manuals and product packages listing the ingredients and such, recurring ways of doing that usually are oval-shaped language codes (which might still be country codes), small flags, or the full language name.

As a user, I find flags work best when it comes to indicating the place of language choice: when I see a flag, whichever country it is from, it clearly states that that's where you can change the language. I would suggest putting the language choice in the upper right corner or on the bottom of the left menu column - those are the places that are most commonly used and therefor easiest to find.

As for the sorting of longer lists (and especially sorting on English names), I'd suggest you actually try to find out what the users find easiest. Sorting a list on English names makes it very difficult to find a language that doesn't start with the same letter. (I can either interpret English, or look at the different fonts, but not both. This has been shown also with display of a word saying 'red' in a blue color. People can observe one easily, the other one with a little more difficulty, but both at the same time is really really difficult.) My suspection is that the list given as an example, although very clear and goodlooking, might not be actually be the easiest in use.