02 May Language Switcher Best Practices
If you have a site with multilingual content, you would possibly consider using redirects based on the language chosen on a user’s browser.
If you are reading this article in another language than English, it has been automatically translated by our WordPress Multilingual Plugin.
This was thought to be a good idea in the past as there was little confusion for the user. They would automatically be taken to the site which spoke in the language they preferred. However, in 2015, Google announced that it’s Bot now followed all browser language redirections and interprets it is as another URL. It will then index your site from multiple IP addresses and attempt to resolve the redirect rules. However, it is unclear how these redirects will affect your sites indexing. Hence, there is the possibility that Google may be indexing your site for the wrong languages. If you wanted to avoid this, the best way would be for users to manually select their chosen language using a language switcher.
Language Switcher Options
If you have decided that a language switcher is the best choice for your site, you may be wondering what best practices were applicable. This is not immediately clear as what may work for you, may appear foreign to a number of individuals in other regions. Where should you position it? How would you present the different languages that you offer and what languages will the text be in?
These are all questions that you may be asking yourself as you embark on the internationalization of your site. Fortunately, we have taken a look at a number of different approaches used by companies with global websites. In this blog I will list various approaches and evaluate their benefits and drawbacks.
Dropdown Language Switcher with Country Flags
Flags are identifiable as different countries and hence are a popular choice for many sites. Below is an example from the website for the Science Museum in London.
Using country flags, however, is usually quite a sensitive topic as it can touch on a number of cultural issues. Flags represent countries which cannot define a language. Many languages are spoken across countries. If you were to use flags to represent languages, which flag would represent English? Should it be the Union Jack or the Stars and Stripes? The same can be said of Arabic and Spanish. Some people may take offense for having to select the flag of a country they don’t identify with but share a common language.
A peculiar example is that of English and the UK flag. Many individuals use this to represent English. There are a number of reasons why this is the incorrect approach:
- The United Kingdom includes England, Scotland and Northern Ireland. England itself has flag but this would be unrecognizable to many.
- There are more English speakers outside of the UK. Hence, it would be incorrect to brand the English language as the UK.
- Even when a site is presented with American English spelling, the UK flag is used (again a misrepresentation)
If, however, you are targeting different countries and not specific languages, then flags are perfectly legitimate. Here is a good example of the language switcher that is used for Spotify.
A Language Switcher with Languages
This is the approach taken by some websites that don’t want to broach and sensibilities with the flag issue. Below is an example of the language switcher used by the Original tour
The problem with this approach is that if your visitor does not know what their language is termed in English, they won’t be able to locate it. For example, if you were to visit a Spanish site and did not know that “English” was “Inglés” in Spanish, you would be quite lost. This appears to be the result of the Google plugin on the Original Tour’s website.
A Language Switcher with Languages in Foreign Languages
This is usually given as the best practice approach to language switchers. Presenting the different languages that you provide in the Language that applies to it. Below is an example from Transferwise’s website.
This is usually the best option as the user can easily identify their language from those provided. However, given that it is a drop down, the setting for the current language being English can lead to the same confusion we mentioned above. If a user is looking for the language switcher, they may not know what “English” signifies. A good way to counter this is to place a symbol that other users could relate to. For example, in the below example from Uber’s website, they have placed a small globe next to the drop down to identify it.
However, this may still not be well known to most users. It would be much more helpful for them to see their language as a link on the page itself.
Foreign Language Links in Page
This is given as the best practices for a clean user experience. A foreign language user can search for his language in his native tongue and then find it quickly and effortlessly. Below is an example of the links used by Facebook
The only problem with this approach is that it becomes extremely cluttered if you have more than 5 languages. However, for the vast majority of sites, this will not be an issue.
Once you have decided what is the best option for your site, you may be wandering where to position this switcher or links. This usually comes down to your site design, however, it is generally accepted that this is either in the top right or in the footer. If you are going to use the most user friendly option which is to supply links instead of a switcher, then the footer is usually the best place to present this.Other posts you might enjoy: