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?