On multilingual sites, it is customary to see flag icons used as the language and/or country selector. But in most cases, the use of flags is not the most effective way to express language choice.
One reason is that many countries have more than one official or national language. Here’s just a short list:
- Belgium: Dutch, French, German
- Cameroon: English, French
- South Africa: Afrikaans, English, Southern Ndebele and eight more
- Spain: Spanish, Catalan, Galician, Basque, Asturian, Occitan
Does a flag suitably represent all the languages contained within a specific country, particularly if different regions of a country do not identify with the national flag for political reasons?
Another more obvious reason that a flag is not an effective icon is that languages cross borders and can represent many countries. For example, a flag from Spain is typically used to represent Spanish, even for Latin American countries. A user in Mexico would certainly select the Spanish icon to reach a Spanish language site, but they would most likely feel alienated by the choice.
Similarly, should the American or British flag be used to represent the English language? Does it really represent the rest of the English-speaking world? How about the French flag for French: what about Canada, Côte d’Ivoire, Switzerland and other countries where French is also spoken?
In their internationalization best practices, the World Wide Web Consortium (W3C) states that flag icons should not be used to indicate languages because flags represent countries, not languages. To sum up, numerous countries use the same language as another country, and numerous countries have more than one official language.
Country versus language navigation selectors
The primary focus should be on creating a meaningful strategy on the first navigational choice a user will make upon entering your site. You have to look at it in terms of levels and context. Each site will have a different system that works best for them.
First, you have to decide whether it makes more sense as a first cut to divide by language or country. How do you decide this?
If your site has a presence in specific countries, with tangible product distribution and/or a bricks and mortar presence, then country-selection should be the first tier, as users will most likely need to purchase or contact from within their own country. There are many examples of sites organized by country first. On any typical corporate site these days a user first locates the country, and then within that region, selects the available languages.
The selector can be placed in the header or footer in a pull-down menu or via a gateway page with all the options available. With the growth of languages being added to sites year over year, a pull-down menu becomes more unwieldy. At this point, experts advocate for the use of the gateway page in which the user can more easily see all the options at a glance. Note that the best practice is to present the language options in the spelling of the original language, not in the language of the host site.
Figure 1: First level navigation by country with a second level tier by language
For sites that are more universal (typically sites providing information or services that cross geographical borders) or represent different languages within the same country, a navigational system by language is generally used. For example, Amnesty International reaches out on an international level to promote awareness and appeal for donations. Visibility in several key languages is crucial to their success, such that a user would more identify with language rather than country.
Then, once the first tier is established, you need to determine the structure of the second level. For some sites, the first tier might be sufficient. But most often, a site might require an additional architectural layer to promote programs and headquarters in specific countries and regions. In this case, a second tier of subportals may be created for the user to find the regional data.
So, when would you use a flag?
Although flags are still widely used, most localization experts agree that they should be discarded. A world icon next to the language options will still indicate where a user changes their country or language options.
If a flag system must be used, a menu that shows each country followed by the language options available within each country is useful. See the example in Fig. 3, and note how each country/language choice is appropriately translated.
More and more sites these days are opting for intelligence-based systems that detect the country and language of the IP address to direct the customer directly to that site. However, the user should always be given some way to navigate to other languages or countries via a link to a gateway page or a pull-down menu or to set their preferences different to the IP detection. For example, a user in France may wish to purchase a gift for a friend on a United States site and have it shipped directly. If they can’t ever get to the US site, then the user will be frustrated, and the company will have lost a sale.
The use of flag icons must represent a well-defined strategy that is sensitive to cultural identity and context. The country/language selector should not be an after-thought, using a flag menu by default.