Language switch graphical state current-language/available-languages

Question

I'm building a website in two languages English/French.

Most of the pages of the website are available in both languages. There is a switch (two flags) on top of the header of the website that allows anytime to switch one language another. So that if a user lands on one page and doesn't understand the language of it, he can get the matching page in the other language.

Some of the pages however don't have a translation. When a page is not translated in English for example, the British flag is not clickable and French one still is and will redirect to the page you're already looking at.

I would like the user to understand by the look of the switch:

• in what language is the page he is looking at
• if this page is available in the other language

First thing I thought of is making the flag of the inactive language a bit transparent, like this

(case where French is the active language, English the inactive)

But then I thought it might also mean that english is the current language and be confusing for the user.

How should I display this inactive flag to the user in a way that is obvious why its not currently active?

Answer 1

You should have some graphic to show which of the languages is active. For example strong border around the flag of the active language. I believe this way you could make the flag of the unavailable language bit transparent and not confuse the user (as much at least). However you really should test this with real users.

If done this way, you should make sure that users cannot arrive at a page where their language appears to be chosen, but the page is in fact in another language.

Answer 2

Though I like the flag option, there are four potential issues with it:

• Not everyone is able to recognize flags and with the size of the flags you are using, it might be hard to make out the difference.
• People might know what language is associated a flag (e.g Canada has two official languages - French and English and the flag will not convey which language will be used when selected) Note: I do agree it might not be applicable in your case but it its a point worth noting
• The size of the flag make it hard to click
• Considering your above example where french is the language selected,

It gives me the impression that the english option is disabled and with the sharp gray overlay, its also kind of hard to make out the flag.

I would recommend going for an approach similar to how Microsft does it which allows you to use a dropdown to select the language you want and then just keeps the language highlighted on the top right

Another option is to use a combination of text and the flag and a dropdown like how Booking.com does it.

Answer 3

I don't really understand why you need to show a user what language the current page is in. I'd expect that users would look at the text and work out if it's a language they understand (particularly for French/English).

I don't like the idea of having the flags un-clickable. Language is a "user variable"; it's not specific to a page. I'd recommend having a site-wide switcher. If content isn't available in the user's language, just have a message (in their language) telling them so, with links to the languages that the specific content is available in.

That said, I think flags do work well in combination with text. Text has the added benefit of standing out as the only comprehensible text on the page for somebody in the wrong language, whereas flag icons may be mistakenly interpreted as content.