Page MenuHomePhabricator

Add "quick actions" menu to the current language selector
Closed, ResolvedPublic8 Estimated Story Points

Description

With recent desktop improvements the language selector is provided in a new place where some options are no longer available. In particular, users cannot easily edit interwiki links on Wikidata or find the translation tool.

This ticket proposes to incorporate a "more" option to the language selector that shows a new view listing available options. This will replace the current menu bar at the bottom listing display and font settings.

The general structure to support quick actions is:

  • Quick action icon. A floating icon is shown at the corner of the language selector. This can be either:
    • A direct access to an action, if there is only one available. For example, on wikis other than Wikipedia where there are no interlanguage links and Content translation is not supported, the only valid option is to open the language settings.
    • An ellipsis ("...") icon providing access to all options when there is more than one.
  • Options panel replacing the contents of the language selector to list the available actions.
    • Actions are defined by an icon and a label.
    • An option to go back (cancel) is also provided to return to the language selection.
One actionMore than one action
settings.png (316×354 px, 21 KB)
more-options.png (316×879 px, 37 KB)

For the case of Wikipedias the actions provided will be three:

  • "Translate this page" (using the "add" icon) will lead to Content Translation with the current page selected and the current language as the source language.
  • "Edit language links" (using the "pencil" icon) will lead to the interlanguage links section of the Wikidata page for the current item.
  • "Open language settings" will open the ULS language settings panel.

Additional design details

  • The quick actions are only shown in the default state of the language selector. That is, they are not visible when the user searches for a language or in the empty states in oder to avoid distractions.

Related: T323694: Language selector: provide separate access to options to contribute and language settings

Related Objects

Event Timeline

There are a very large number of changes, so older changes are hidden. Show Older Changes
Pginer-WMF triaged this task as Medium priority.Aug 27 2021, 8:50 AM
The quick actions are only shown in the default state of the language selector. That is, they are not visible when the user searches for a language or in the empty states in oder to avoid distractions.

I would imagine searching for a language and confirming it is not available is a pre-requisite for deciding to translate the article. This is what we did in mobile selector(T286470). So, if translate action is not available at that stage, user will miss that flow, right?

A direct access to an action, if there is only one available. For example, on wikis other than Wikipedia where there are no interlanguage links and Content translation is not supported, the only valid option is to open the language settings.

Can you please clarify this? For example, if an article exist only in language, currently language selector is not shown(Example: https://en.wikipedia.org/wiki/Emmanuel_Tshituka - there is no language selector). In that case how to open language settings or link that article to another language using wikidata?

settings.png (316×354 px, 21 KB)

This screenshot for "One action" has 5 languages. So this may not be a realistic screenshot ... or am I understanding this incorrectly?

The quick actions are only shown in the default state of the language selector. That is, they are not visible when the user searches for a language or in the empty states in oder to avoid distractions.

I would imagine searching for a language and confirming it is not available is a pre-requisite for deciding to translate the article. This is what we did in mobile selector(T286470). So, if translate action is not available at that stage, user will miss that flow, right?

There are some additional aspects of the new design such as empty states (T265585) that we may want to support on the current language selector. In particular:

  • Provide access to translation when searching for a language for which the content is not available.
  • Help to identify usual languages for which the content is not available. That is, the top panel that tells the page is missing in some of your usual language which replaces the functionality of grey links.

I'll create the links for those, but until we consider adding those to the current language selector, I think it is ok to keep the actions visible during search if that's simple technically and adjust it later in another iteration.

A direct access to an action, if there is only one available. For example, on wikis other than Wikipedia where there are no interlanguage links and Content translation is not supported, the only valid option is to open the language settings.

Can you please clarify this? For example, if an article exist only in language, currently language selector is not shown(Example: https://en.wikipedia.org/wiki/Emmanuel_Tshituka - there is no language selector). In that case how to open language settings or link that article to another language using wikidata?

settings.png (316×354 px, 21 KB)

This screenshot for "One action" has 5 languages. So this may not be a realistic screenshot ... or am I understanding this incorrectly?

The spec is referring to the number of actions available, not the number of languages.

For example, the option to translate with Content Translation is available in Wikipedia but not in Wikivoyage where the tool is not deployed. The option to edit links on Wikidata is not available on Commons pages.
I can use these examples to list the options and how they are presented in each case:

WikiOptions availableHow are they presented
WikipediaTranslate, edit links and lang. settings.More/ellipsis menu providing access to a menu with the 3 options.
WikivoyageEdit links and lang. settings.More/ellipsis menu providing access to a menu with the 2 options.
CommonsLang. settings.Cog icon providing directly access to the language settings.

The general idea is that it does not make much sense to provide a menu with just one option in the cases where only one is available.

Change 716241 had a related patch set uploaded (by Santhosh; author: Santhosh):

[mediawiki/extensions/UniversalLanguageSelector@master] POC: Language options in ULS

https://gerrit.wikimedia.org/r/716241

Change 716241 had a related patch set uploaded (by Santhosh; author: Santhosh):

[mediawiki/extensions/UniversalLanguageSelector@master] POC: Language options in ULS

https://gerrit.wikimedia.org/r/716241

This POC illustrates how to implement this new dialog. It is a quick illustration, since ULS does not use any UI framework, getting everything right as per the UI spec is a time consuming task

Test wiki created on Patch Demo by Pginer-WMF using patch(es) linked to this task:

https://patchdemo.wmflabs.org/wikis/9d1ef84c3b/w/

Test wiki created on Patch Demo by Pginer-WMF using patch(es) linked to this task:

https://patchdemo.wmflabs.org/wikis/9d1ef84c3b/w/

Testing with patch demo. This is what this looks like:

patchdemo.wmflabs.org_wikis_9d1ef84c3b_wiki_Main_Page(iPad).png (1×2 px, 196 KB)
patchdemo.wmflabs.org_wikis_9d1ef84c3b_wiki_Main_Page(iPad) (1).png (1×2 px, 195 KB)
Pginer-WMF raised the priority of this task from Medium to High.Oct 1 2021, 12:52 PM

This solution is not intuitive and is sup-optimal. Please, take also this into account: T293328

This solution is not intuitive and is sup-optimal. Please, take also this into account: T293328

This is acting as a "more" menu to expose additional options. Although translation is included as one of them (since this is a persistent place people can find it) it is not the only place where we plan to expose it. In particular there are two more prominent places where translation options will be exposed:

  • Right on top of the selector (T290972) for languages we are certain the user speaks (based on navigation, previous edits, etc.)
  • When searching for the language where the article is missing (T290436), which is part of the process users often do to verify if an article is missing in order to translate it.

I include some mockups below for additional clarity:

Banner on topBanner on top (opened)Empty state after searching
invite.png (316×354 px, 22 KB)
invite-next.png (316×354 px, 16 KB)
unavailable-invite.png (310×348 px, 16 KB)

Both of these are more visible and expected to be used more often. However, they are contextual and may not always appear (e.g., if the article exists in the languages you often use or the one you search for), so there is some value to keep it in the "more" menu too.

Thanks @Pginer-WMF. This seems way more visible than the ··· button inside another menu. Now, the option to translate is missing, so a solution should be found till we have this deployed.

This comment was removed by Pginer-WMF.
Nikerabbit set the point value for this task to 8.Feb 9 2022, 2:15 PM
ngkountas changed the task status from Open to In Progress.Feb 17 2022, 1:01 PM
ngkountas claimed this task.

Change 766845 had a related patch set uploaded (by Nik Gkountas; author: Nik Gkountas):

[mediawiki/extensions/ContentTranslation@master] CX: Register module to add \"Translate\" page quick action inside ULS

https://gerrit.wikimedia.org/r/766845

@Pginer-WMF Can you confirm whether "Translate this page" action should be be shown for all pages in a wiki where CX is installed, without any namespace, user permission or other restrictions?

Assuming we will implement this for the Translate extension as well in the future, that option would only be shown for translatable pages?

@Pginer-WMF Another question: Should the icon or the three dots icon have a tooltip?

Great questions @Nikerabbit. Some thoughts below:

@Pginer-WMF Can you confirm whether "Translate this page" action should be be shown for all pages in a wiki where CX is installed, without any namespace, user permission or other restrictions?

The general idea is to surface the options when they are available. We don't want to show an option to translate in cases where the user clicks on it and finds there is no way to translate. In this particular case, it makes sense to show the option to access Content Translation when all these conditions are met:

  • The user is logged-in.
  • The beta feature is enabled for the user (or the tool is out of beta for that wiki)
  • The content is in a namespace supported by the tool.
  • The content is in a project supported by the tool (Wikipedia).

Assuming we will implement this for the Translate extension as well in the future, that option would only be shown for translatable pages?

Yes. In this case we need to decide whether to:

  • a) Present the option also as "Translate this page". Communicating the same intent for translating the contents but using a specific tool.
  • b) Provide a more distinctive name to differentiate the actions.

I'm more inclined towards (a), but we need to consider if there are potential for confusion or overlaps.

@Pginer-WMF Another question: Should the icon or the three dots icon have a tooltip?

For accessibility it would be good to have a description screen readers could use and that could be useful as a tooltip too. In this case, using "More language options" could work.

@ngkountas, I have some questions about the instrumentation aspect. The different entry points for Content Translation include a campaign parameter to distinguish them. We also have plans for improving the general instrumentation.
I was wondering if this entry point follows already any of the above or a separate ticket is needed for this instrumentation following either or both approaches?

@Pginer-WMF this entrypoint will use the campaign URL parameter, as the rest of the entrypoints do, to properly support event logging. There is no need for a separate ticket since the instrumentation will work "automatically" as soon as we deploy this entrypoint. All we need to do is to use the campaign parameter with the proper value.

Change 716241 merged by jenkins-bot:

[mediawiki/extensions/UniversalLanguageSelector@master] Add actions menu inside content language selector

https://gerrit.wikimedia.org/r/716241

Change 779459 had a related patch set uploaded (by Nik Gkountas; author: Nik Gkountas):

[mediawiki/extensions/UniversalLanguageSelector@master] Require action menu items registry at the top of uls interface module

https://gerrit.wikimedia.org/r/779459

Test wiki on Patch demo by Pginer-WMF using patch(es) linked to this task was deleted:

https://patchdemo.wmflabs.org/wikis/9d1ef84c3b/w/

Change 779459 merged by jenkins-bot:

[mediawiki/extensions/UniversalLanguageSelector@master] Require action menu items registry at the top of uls interface module

https://gerrit.wikimedia.org/r/779459

"Translate this page" (using the "add" icon) will lead to Content Translation with the current page selected and the current language as the source language.

In production wikis, translation is always done in target language wiki. So ideally clicking "Translate this page" should take the user to say, es.wikipedia.org/wiki/Special:CX?from=en&page=CurrentPage if you are currently in English wikipedia. But we don't know the target language and we cannot take the user to a valid domain. We cannot assume any popular target language either. In previous version of entrypoint in interlanguage links, we had some suggestion languages(grey interlanguage links).

@Pginer-WMF What is your suggestion to solve this issue? If we take the user to Special:CX in source language wikipedia, with source filled in, we can partially solve it, but the landing page won't know the target language.

@Pginer-WMF What is your suggestion to solve this issue? If we take the user to Special:CX in source language wikipedia, with source filled in, we can partially solve it, but the landing page won't know the target language.

My proposal is to take the user to Special:CX in source language wikipedia, with source filled in. For the target language we can fill it in the same way the target is filled for the target language of suggestions. If the guess is wrong, users can change it (while still using a UI in a language they understand). The redirect to the target wiki will happen once the user confirms the translation.

Alternatively, we could consider not to be filled. In such case the drop-down would show a "select" label and the button to start a translation would be shown as disabled. But that would require additional development effort, and we may want to consider it only for the new dashboard (the one used in Section Translation) if needed.

Change 787431 had a related patch set uploaded (by Nik Gkountas; author: Nik Gkountas):

[mediawiki/extensions/UniversalLanguageSelector@master] ULS actions menu buttons: Add support for href

https://gerrit.wikimedia.org/r/787431

Change 787431 merged by jenkins-bot:

[mediawiki/extensions/UniversalLanguageSelector@master] ULS actions menu buttons: Add support for href

https://gerrit.wikimedia.org/r/787431

Change 766845 merged by jenkins-bot:

[mediawiki/extensions/ContentTranslation@master] CX: Register module to add "Translate" page quick action inside ULS

https://gerrit.wikimedia.org/r/766845

Test Status: QA PASS

Quick Actions Menu added:

  • On an article the Languages section displayed on the page in the left panel with title Languages
  • Language settings icon is displayed with a tooltip when the mouse is hovered over
  • When the article is available in a language the languageis displayed in blue with hyperlinks to the user to that language page
  • when the article is not available in the language frequented by the user the language is showed in gray color
  • When the user clicks the "<universal language symbol> and <number of languages> more", the language selector dialog is displayed with a field to type in a language, suggested language and a message in missing languages
  • While on the dialog when the ">" arrow is clicked, this navigates the user to the "Translate this page" dialog ( with the 'This page is missing ins some languages you may know. You can translate it in minutes!' message, that subsequently navigates used to the CX tool

Test Status: QA PASS

Quick Actions Menu added:

  • On an article the Languages section displayed on the page in the left panel with title Languages
  • Language settings icon is displayed with a tooltip when the mouse is hovered over
  • When the article is available in a language the languageis displayed in blue with hyperlinks to the user to that language page
  • when the article is not available in the language frequented by the user the language is showed in gray color
  • When the user clicks the "<universal language symbol> and <number of languages> more", the language selector dialog is displayed with a field to type in a language, suggested language and a message in missing languages
  • While on the dialog when the ">" arrow is clicked, this navigates the user to the "Translate this page" dialog ( with the 'This page is missing ins some languages you may know. You can translate it in minutes!' message, that subsequently navigates used to the CX tool

This ticket is focused on the "..." menu that was added to the bottom right corner of the list of languages and the options provided when selecting it. Based on the comment above it is not clear that this part was verified. Can you confirm?

@Pginer-WMF thanks for the call out got some clarification from @KartikMistry I needed to change my vector to the current one (2022)

@ngkountas on doing that there is a problem with this implementation the "Edit interlanguage links" is outside the menu using this article https://en.wikipedia.org/wiki/Fada_N%27gourma . I will move this ticket back to in progress

See attachment

I did also notice another issue I will create in another ticket

Screen Shot 2022-07-04 at 12.44.10 AM.png (887×1 px, 467 KB)

@ngkountas on doing that there is a problem with this implementation the "Edit interlanguage links" is outside the menu using this article https://en.wikipedia.org/wiki/Fada_N%27gourma . I will move this ticket back to in progress

A note on this: This is an extensible menu and the option to "edit interlanguage links" is intended to be provided by the Wikidata extension. We created a separate ticket for the Wikidata team to add this option (T310259).

@ngkountas can add further detail, but I think we are not adding the "Edit interlanguage links" option that is outside the menu.

Yes, wikidata edit link is outside the scope of this ticket. So moving it back to done

Marking as done assuming there is nothing left from the QA review apart from the follow-up ticket you mentioned in T289840#8049312. @EChukwukere-WMF feel free to reopen otherwise.

@Pginer-WMF Thanks for the clarification.. it was not stated that the scope of this change. No more action from QA should be in the done state. thanks!