I first began working with multilingual websites in 1995. In those extremely early days of the web, the technical difficulties involved in translating web content were formidable, even for European languages. Many of the difficulties in displaying translated text were, however, resolved with the adoption of Unicode, but throughout the last 20 years one issue with websites has remained difficult to achieve a consensus on: how best to indicate the selection of languages that a visitor can choose from.
From the earliest days of localized websites, national flags have been used to show that content is available in a particular visitor’s language. This is now, unfortunately, a convention, and like so many other conventions connected to the web, difficult to change. Few today remember the origins of the word spam, there is no logical reason why unwanted email should be named after a Monty Python sketch(!), but the nature of web conventions is that they are convenient and can provide a quick and easy identification process.
What flags offer is an instantaneous indication that a website has other language or locale versions available and where to click to access them and, based upon this, there is a certain design and user experience (UX) argument to be made for their use. The practical and cultural negatives associated with their use, however, should outweigh any UX arguments.
Why flags are the wrong choice
- Flags do not represent languages, they represent countries, provinces or other physical locations.
- There are over 6000 languages in use in the world but only 195 actual countries.
- Flags represent a country or a nation, but languages may be spoken in several different countries or across national borders. By using a flag to represent a language, website users may be offended or confused.
- The population of a country may speak several languages. By clicking on a Swiss flag would the user arrive on a page with content in French, German, Italian or Romansh? It is a similar problem with the Belgian or Indian flags which also represent multilingual countries.
- logically perhaps, the English flag would be the most appropriate choice to represent the English language but how many people outside of the British Isles recognize the single red cross of the flag of England as opposed to the union flag of Great Britain?
- The Spanish national flag is most often used to represent the Spanish language but in Mexico there are more Spanish speakers than in the whole of Spain. Spanish is also spoken in many other countries including Argentina, Colombia, Peru, Venezuela and the United States. There are also important linguistic differences between European and South American Spanish which need to be addressed.
- French is an official language in 29 countries, which is nine more than Spanish. The French national flag may appear an obvious choice to represent the French language but it cannot represent 29 different nations with all their cultural, historical and linguistic differences, which, in the case of Canadian and European French, are pronounced differences.
- In India, Hindi is the most popular language with over 400 million speakers, but it is only one of 22 official languages. There also more than 80 million speakers of Bengali in India and over 70 million speakers of both Telugu and Marathi.
- There are many other languages that share similar issues when combined into a single flag – including Arabic, German and Portuguese.
- It is possible that users may not recognize the flags displayed on a website due to colour blindness or other image rendering or disability issues. A flag needs to be rendered correctly both in colour and positioning so as to avoid confusion or offence (e.g. the flag of the UK is often rendered upside down).
- Countries can also change their flags, such as Malawi, Libya, Venezuela, Burma and Georgia recently did, and this requires regular scrutiny from a web team to ensure that the correct version is displayed to users.
To summarize: unless the content is specific only to the country indicated by the flag displayed – national flags should not be used to indicate language choice.
Alternatives to flags
What are the most correct and effective ways to display to website users that there are other language options available?
If a website only offers a few different language versions other than English, the best option, not only from a UX perspective but also a culturally correct one, is to create a small top menu and insert the name of the language in its original form (e.g. Deutsch).
Ideally, if space permits, also place in brackets next to the name the particular version of the language, e.g. English (US), or alternatively use an Alt tag to pop-up the information when a mouse scrolls over it. This is particularly important when dealing with languages that do not use the Latin alphabet, such as Japanese or Arabic, because of navigation issues for non-speakers of those languages.
Once a website starts to offer more languages and a top menu is no longer a viable option from a UX or design perspective it will be necessary to replace it with a drop-down menu listing the languages or to place a link to a global gateway page. The information to populate the drop-down menu can be obtained from the Common Locale Data Repository at unicode.org. If possible, it is recommended to supplement the drop-down menu with links in the footer in case a user is confused where to click.
So as to avoid notions of favouritism and possibly cause offence, it is best to adopt a culturally neutral stance and order languages in the list alphabetically in their native language (e.g. E for Español), however, to aid in identification of the language menu and avoid unnecessary scrolling it is possible to dynamically move a language to the top of the list if the user’s language or country is detected via language negotiation or geolocation.
Geolocation and language negotiation are two web technologies that examine a web user’s IP address and browser language preferences to serve customized content. It is logical to assume that users accessing a website from a particular locale will be speakers of the language there, but with increasing globalization and travel this is often not the case and the option to change language immediately upon landing on a page should be made as obvious and easy as possible so as to avoid frustration and annoyance.
The language menu should be positioned in the upper right-hand corner of every webpage that has content in languages that read from right to left. For those languages that read from left to right such as Arabic, Hebrew, Urdu etc. the menu is normally placed on the left. Recent research (Salmerón, L., Abu Mallouh, R. & Kammerer, Y. Univ Access Inf Soc, 2015), however, indicates that Arabic users judge a website in more positive terms when the menu is placed on the right, and the menu placement for these languages should therefore ideally be verified through user testing.
It is important to note that users may not find the link to the language they wish to choose if it is hidden behind a heading such as “Select language” in English (or the main site language). The best way to indicate the existence and meaning of the language selection drop down menu on a website is, therefore, by an adjacently placed icon.
There are currently three icons that can serve the purpose of language selection for a website.
Globe icon
The most popular icon used to designate multilingual content is the globe icon, of which there are two distinct design variations.
Design 1
Design 1 is the most common form of the globe icon in use as a language icon. It is normally a graphic vector image and is easily scalable. It takes the form of a grid network inside a circle.
Design 2
Design 2 is a classic representation of the world as a globe in a normally non-stylized form.
If there is any form of standard coalescing around an icon as an alternative to flags it is most probably around the globe icon. For the last 10 years it has slowly been gaining acceptance as the icon of choice for many websites to indicate multilingual content. There are, however, several important issues that prevent its complete acceptance as a de facto standard.
The primary problem is that, as can be seen from the examples illustrated, there are two different versions and each has a major issue connected to it.
Design 1 has become associated with several unrelated meanings, the two major ones being as an internet icon and as a language icon.
If we examine the following screenshots the icon can clearly be seen to have these two different associations.
Here it represents the internet:
And here it represents language:
In my opinion this is currently too wide a divergence of meaning for the icon to be used in the certain knowledge that a user would associate it with language selection. Interestingly, according to a recent user test, only 50% of users interacted with it to change the language of a website (case study: onefinestay.com and dropdown language selection, flagsarenotlanguages.com).
Regarding design 2, I was in general agreement with John Yunker about the use of the globe icon until its adoption by Facebook in 2010 for use as a notification icon. There was hope that they would soon correct this and choose another icon but it was not until 2018 that it was finally changed. Given that Facebook has over 1.86 billion monthly active users (Source: Facebook 02/01/17) this has been, in my opinion, an important reason not to use design 2 of the globe icon. The enormous influence that Facebook has had upon people’s perceptions about web usability and the development of conventions means that this particular icon cannot now be used with any certitude that a user will understand its intended meaning as a language selector (see image below).
Language icon
The third icon that can be used to indicate multilingual content is the language icon. It was designed by Farhat Datta in 2011. It is important because it is the first icon to be expressly designed and distributed as a language selector icon for multilingual websites. It represents a turnstile changing from one language to another, denoted by the incorporation of an Eastern character and a Latin A character.
While the originators of this project are to be congratulated upon the initiative, to my mind, the current design looks far too much like a translation icon and could lead a user to think that the current page will be translated by a machine translation tool rather than being a link to localized content.
Unfortunately, acceptance and adoption of the icon has so far been negligible as a website language selector. Additionally, a user test carried out by the website flagsarenotlanguages.com revealed that an icon with a similar design used to indicate language selection on a multilingual website only achieved a 30% recognition rate amongst users (case study: onefinestay.com and drop-down language selection, flagsarenotlanguages.com). It is to be noted, however, that the icon is becoming increasingly adopted as a translation icon in its own right inside web content, and this trend is to be encouraged.
Conclusion
It is quite clear that there remains a very real need for a standardized, universally accepted icon to represent website language selection. This has been the case since multilingual websites started to develop in the later-half of the 1990’s, but due to the ad hoc nature of icon development, acceptance and use, there is still no consensus 20 years later.
It is evident that the globe icon remains the front runner and obvious choice to be developed into the standard language website icon. It has the right momentum and enough important websites around the world have chosen it, I think in particular of LinkedIn and Microsoft. But LinkedIn have chosen design 1 and Microsoft design 2.
In my opinion, design 1 is the correct choice because it is geopolitically agnostic, it reproduces better at small sizes and, while design 2 is more geographic in nature, design 1 is more generic in its application. It is suited for both website language selection and location-oriented global gateway pages and because of its neutral, graphic nature can communicate its meaning across different languages and cultures.
To achieve consensus surrounding its use it would be beneficial to find ways to diminish its association with the internet and, ideally, stop using it as an internet icon completely. It must only be associated with language to enable it to become the standard icon that can be pushed forward to global acceptance and recognition by web influencers, authorities and organizations.
References / further reading
Location of navigation menus in websites: an experimental study with Arabic users
Salmerón, L., Abu Mallouh, R. & Kammerer, Y. Univ Access Inf Soc (2015)
The role of cultural context in multilingual website usability
Mathew Hillier (2003)
Cross-Cultural Understanding of Interface Design: A Cross-Cultural Analysis of Icon Recognition
Vanessa Evers, Agnes Kukulska-Hulme, Ann Jones (1999)
Exploring the effects of icon characteristics on user performance: The role of icon concreteness, complexity, and distinctiveness.
McDougall, Siné J. P.; de Bruijn, Oscar; Curry, Martin B. (2000)
