search

w3c / wai-translations

Future home of translations guidance and information on translated resources
5 stars 5 forks source link

Mobile UI #16

Closed shawna-slh closed 5 years ago

shawna-slh commented 5 years ago

Obviously the UI on mobile is related to the UI on larger viewports ("desktop"). The desktop UI has a proposal, yet is not decided on yet — so you might want to hold off on commenting on this... or comment now with Mobile First thoughts. :-) Update: It's ready for input now!

Considerations and straw proposal is at: Mobile (small viewport)

The proposal and mock-up might change over the life of this issue; therefore, in your comment, please quote or clarify what you are commenting on.

yatil commented 5 years ago

A few quick thoughts on the proposal:

  • If the list of languages is less/shorter than X, then all languages are listed.
  • If the list of languages is more/longer than X, then language icon change language is a toggle that displays and hides the languages (like the "{hamburger icon} MENU" on the mobile site now)

The icon being dependent on the number of languages means that we might trigger different expectations for end users. I'm unsure if users would expect the behavior to change from one screen to the other depending on the number of translations.

I think consistent navigation can be more important then immediate discoverability, especially if we use content negotiation to direct users to pages in their preferred language as much as possible.

When on English page: the word "English" precedes the icon:

English {icon}

When in another language: English is first and linked, then the language, then the icon:

[English] Français {icon}

I wonder if this is really necessary. On the translated language the header, including most links, would be translated, which is a good indication of the language to expect. Instead of writing the language of the page I'm on, I would expect the text “change language”. Listing the language of the current page seems redundant.

r12a commented 5 years ago

I'm inclined to agree with @yatil. For i18n pages we have no language links if there are no translations, because otherwise there seems to be a suggestion that you might find links to other translations elsewhere on the page (describing this page as English seems to imply that it's one of a set).

shawna-slh commented 5 years ago

Agree that if the page is not available in other languages, then nothing is displayed. I clarified that in the wiki page:

If there are no translations available for that page, there won't be anything shown about languages (none of the options below).

shawna-slh commented 5 years ago

Thanks for the input, @yatil! I added other options — including "Always a toggle that displays and hides the languages." — with pros and cons.

I think consistent navigation can be more important then immediate discoverability, especially if we use content negotiation to direct users to pages in their preferred language as much as possible.

At this point, I'm still leaning towards better discoverability (and consistency with desktop UI) even if it means the mobile UI is a bit different on some pages.

Instead of writing the language of the page I'm on, I would expect the text “change language”.

For me personally, I prefer just "Languages" (or maybe "Change Language"); however:

At this point, I'm "on the fence" on whether to use the current language or "Languages"...

yatil commented 5 years ago

I do not have strong feelings. I just find English the label for a list of other languages strange. When I’m on the French page and it says [English] Francais {icon} – how would I know clicking on the icon would lead me to German? I probably would think the icon is decorative and not use it.

I don’t really have time to give more input, so I’ll just implement whatever y’all think is the best way.

shawna-slh commented 5 years ago

[English] Francais {icon} – how would I know clicking on the icon would lead me to German?

Agree. Wiki says "con: users might think there are only those 2 languages and not click the toggle to see more".

I just now added "[ruled out]" to that option.

shawna-slh commented 5 years ago

Decisions at https://www.w3.org/wiki/WAI_Translations#Mobile_.28small_viewport.29