Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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.

enter image description here

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

enter image description here(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?

share|improve this question
add comment

3 Answers

up vote 1 down vote accepted

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.

share|improve this answer
add comment

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,

enter image description here

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

enter image description here

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

enter image description here

share|improve this answer
    
the dropdown menu solution is nice but seems a bit too much for a two languages switch imho, and only make the switching one click further. –  TKrugg Sep 3 '12 at 22:12
add comment

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.

share|improve this answer
    
The switcher is site-wide already: it is always in the header, and saves the user setting so any other page the he asks for after will be in the chosen language. I would like to avoid overloading the design by adding text. Assuming the french speakers know the french flag and english speakers the british flag is reasonable enough. –  TKrugg Sep 3 '12 at 22:29
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.