how to show translations on a page (list always visible, select expand/collapse, drop-down, etc.)

[shawna-slh]

NOTE: The proposal changed since this first comment. The latest proposal is lower in this issue.

Proposed: select expand/collapse to get the list, as in mock-up

Before commenting on other options, please read details on Always visible vs. Select in wiki.

[shawna-slh]

moved from https://github.com/w3c/wai-translations/issues/7 @r12a said:

In my opinion, using a pulldown to select languages should be avoided whenever possible, and is only really needed when you have quite a large number of alternatives to choose from. (See https://www.w3.org/International/questions/qa-navigation-select#proscons.) If you use a pulldown control, you really can't use text for the label, since it will be difficult for someone to find if they don't speak the language that the label is written in. However it is also difficult to find a graphic alternative that is readily recognisable.

In the mockup, the label for the pulldown is in English even though the page is in French. Is that intentional? I think, if you are going to have text, it should be in French.

I strongly recommend using a list of links, rather than a pulldown control. The link text of each should be the name of the language of the target page, written in that language.

[shawna-slh]

moved from https://github.com/w3c/wai-translations/issues/7 @yatil said:

@r12a

I strongly recommend using a list of links, rather than a pulldown control.

We are not using a pulldown, it is more an expand/collapse :-) The reason why the button is English on the French version is that if someone gets to the translated page by accident, they would probably find it easier to find the option to change the language in English than in French.

If you use a pulldown control, you really can't use text for the label, since it will be difficult for someone to find if they don't speak the language that the label is written in. However it is also difficult to find a graphic alternative that is readily recognisable.

That’s why we use an icon with the text “show languages”.

The link text of each should be the name of the language of the target page, written in that language.

That’s what we do.

[shawna-slh]

@yatil — pulldown, drop-down list, expand/collapse all have the same con that users don't see their language until they interact with the control -- and they are less likely to recognize an icon and the wording "Select Language" or "Translations" or whatever we go with (Labelling options) than they are their language in their language.

@r12a — Yes, those cons are listed under List vs. Select and Select options in wiki.

Personally I'm "on the fence" on this one. I totally agree that having the languages visible up front is better usability. I'm just not sure in our situation if it is worth the space...

For example, the list of languages on this page takes up a fair bit of space. If we stay in the breadcrumb area, that would bump it to multiple lines. We have considered different placement, such as float right top-aligned with h1 per location options That also has some cons.

[shawna-slh]

The reason why the button is English on the French version is that if someone gets to the translated page by accident, they would probably find it easier to find the option to change the language in English than in French.

+0.75 :-)

[yatil]

@slhenry

@yatil — pulldown, drop-down list, expand/collapse all have the same con that users don't see their language until they interact with the control -- and they are less likely to recognize an icon and the wording "Select Language" or "Translations" or whatever we go with (Labelling options) than they are their language in their language.

Point taken. (/me thinks the right side gutter that we had in some early mockups would be useful for this, but as we don’t have one, I don’t think there is a good spot to list all the languages w/o a drop down… :-/)

[shawna-slh]

We're going to try options for listing all languages without select!

[shawna-slh]

New proposal: List of translations always visible.

To comment on the location of that list, use Issue 5: location for list of translations on a page