How Do You Represent a Language on the Web?

The internet is a little like a world-sized roll of duct tape, binding us together in a million different ways.

While vast distances have often melted away online, some global differences are more fundamental. Language is a big differentiator, and is arguably the most important way that we localize our sites and apps.

This leads us to an important UI question: “How do you graphically represent a language on the web?”

What’s the Problem?

At first glance this seems like a ridiculous question. Using flags to represent languages for a website seems like a no-brainer. But look a little bit closer and we start to notice obvious issues.

A flag is a pictorial symbol representing a nation or group, and is most commonly tied to a distinct geographical area.

The problem with using flags to denote language is that many nations around the world have two, three and even four national languages.

This means that displaying, for instance, a Swiss flag is not especially useful to denote language as Switzerland recognizes German, French, Italian and Romansh as national languages. Even ‘playing the numbers’ and choosing to select the most commonly spoken language is only likely to disenfranchise locals who do not speak the majority tongue.

By the same token, languages are also shared across nations, so it’s as counter-intuitive for New Zealanders to click an English flag as it is for Brazilians to click a Portuguese flag.

What are the alternatives?

Looking at the current state of play, there currently isn’t any widely agreed upon solution. Certainly many sites still use flags to note translating options while others have gone a different route. While not conclusive in which is a better method it is a great way to get more people talking on what is the best way to solve this apparent issue.

I think this article is as much a question to provoke discussion as it is any kind of answer.

Solution 1: Flags with Abbreviated Text

One common variation is to keep the flags but add a text label. This is seemingly an improvement as it clears up any possible confusion that visitors may have. It also allows you to keep a graphic while allowing visitors to identify their country without much effort.

Accompanying the flag, a simple abbreviation of your preferred language can be placed beside or below your icon. This gives you the ability to not just generalize one language per country. You can now, with the appropriate abbreviations, display a Swiss flag with the abbreviations such as GER,FRA, ITA and ROM. This allows visitors to view your site in the language they know best and doesn’t isolate anyone.

There are some clear problems to this method however, as it assumes that all languages can be abbreviated with two or three flag-ready letters.

But what about users who speak Persian, Arabic, Thai and Telugu just to name a few? How do you abbreviate those?

Solution 2: Translation Image

Another solution substitutes the flag images for something new altogether, instead showing a graphic that visually communicates the concept of translation.You may be familiar with this type of setup seeing as sites like Google already do this on their translate page.

Here you would see a letter from the alphabet, typically the letter “A” that is then connected with a two sided arrow to a different symbol. Usually this symbol is either a Chinese or Japanese character. Ideally this icon would serve to inform visitors that the site features translation services and once clicked a pop of menu would prompt them to pick their preferred language.

While this does come out to be a preferable option in lieu of the flag, there is something to consider. Though it might be understandable to most users that pressing the button will display other language choices, some may be under the assumption that, let’s say, a kanji glyph will only offer translation to Japanese.

Solution 3: Text Only

Our third solution sees us just tossing out graphics altogether, which may be the wisest option to avoid any type of confusion.

There are many sites that currently follow this method, and it seems to be gaining mindshare over the flag users. Perhaps it’s safe to assume that this method if done correctly causes less issues than flags.

There are various options available when just using text to display available languages. You can use drop down menus, place your language choices at the bottom of the screen or some other way so that it fits within and compliments the design of your site with no problem.

Other than general literacy problems, there doesn’t seem to be any other issue to understanding why the languages are shown. You will however need to make sure that each language link/button is written in the language for which it is targeted.

In other words, ‘German’ should be shown as ‘Deutsch’ and ‘Spanish’ should be shown as ‘Español’. Also make sure to denote between American English and British English, i.e. English (US) and English (UK).

Solution 4: Autodetection

Last but not least you can always use autodetection instead of prompting users for a press of the translation button. This is obviously a technical solution that generally tries to identify the user’s language via their browser settings. Once configured, the server will attempt to automatically display the site in the language which it detects. It will fallback to a default if no useful language data is available.

Facebook is just one of many sites that utilize autodetection in order to provide a better experience in regards to language preferences.

Of course, with autodetection there is no way to ensure 100% accuracy with its detection results. Sometimes a visitor may be temporarily abroad or simply be using an unfamiliar browser, so the detected language may not be the best match for them.

Autodetection is a great first guess, but always ensure there is a visible option to change the language just in case. There are few more frustrating tasks than trying to find hidden language controls on a site you can’t read.

Conclusion

So there you go, four possible approaches to combat the flag as a language dilemma.

Now it’s time for you to chime in. What do you think is the best method to graphically represent a language? Do you have your own solution? Let me know what you think in the comments and feel free to share any site translation issues you may have encountered.