Page MenuHomePhabricator

Empty state for language button and menu
Closed, ResolvedPublic8 Estimated Story Points

Description

Description

Currently we do not have any special handling of the language button or menu for the situation where an article has no other available languages. Below are the details for our short-term solution.

Design

image.png (327×1 px, 74 KB)

Acceptance criteria

  • Empty state button must have label: "Add languages"
  • Selecting the empty state button would trigger a modal with the text: "This article is not currently available in other languages. You can help to create translations"
  • Link to Content Translation special page with the current article selected (see T275147#6863710 for details). Link similar to:

https://en.wikipedia.org/wiki/Special:ContentTranslation?page=Romania&from=en&to=es&campaign=interlanguagelink

Developer note

Will require a change in the ULS extension

diff --git a/lib/jquery.uls/src/jquery.uls.core.js b/lib/jquery.uls/src/jquery.uls.core.js
index 86615788..08915c6a 100644
--- a/lib/jquery.uls/src/jquery.uls.core.js
+++ b/lib/jquery.uls/src/jquery.uls.core.js
@@ -263,6 +263,9 @@
                        // Handle key press events on the menu
                        this.$menu.on( 'keydown', this.keypress.bind( this ) );
 
+                       if ( !Object.keys( this.languages ).length ) {
+                               this.$resultsView.append( $( '<div>no results</div>' ) ); // @todo: style per mock.
+                       }
                        this.createLanguageFilter();
 
                        this.$languageFilter.on( 'resultsfound.uls', this.success.bind( this ) );

Screen Shot 2021-03-01 at 10.58.39 AM.png (700×746 px, 40 KB)

After performing a search, we'll need to hide this default view (either via CSS or JS)

Screen Shot 2021-03-01 at 10.58.26 AM.png (744×592 px, 83 KB)

The translation link will be dependent on whether ULS is installed or not which adds configuration checks.

Related Objects

Event Timeline

In T275147#6841473, @alexhollender wrote:

@Pginer-WMF @ovasileva @Jdlrobson thoughts on the above?

I really like the explanation/modal, but I think both could work

From a technical POV either work for me. I should note the disabled button will be a lot easier to implement as the modal will require knowledge of ULS which will require significant effort getting the team up to speed with how the extension works and comfortable with making changes there.

I'm also in favour of the simple explanation approach. It helps to explain the situation and provides an entry point to those interested in content to be available in more languages.

I'd propose to simplify the text a bit. Something along the lines of: "This article is not currently available in other languages. You can help to [create translations]."

@Pginer-WMF a small gotcha came up regarding the button label 0 Languages (which goes back to the recurring question of whether the count on the button should be the total number of languages available, or the number of additional languages available) — curious what you think about the following:

For the case where you are on an article that has no other available languages it seems we have three choices for the button label:

  • 0 Languages — might be confusing/misleading at first, before you've explored the language button on other articles (e.g. what does a button that says "0 languages" mean? what will I find there?). The more descriptive version of that button label might be 0 Additional languages but that gets pretty long for a button label, and is kinda awkward as well (it feels more like an error/empty state message than a button label).
  • 1 Language — might make more sense for the specific case, but might also throw off other cases where there are low number of other languages available. For example, if we went this route (where the button count shows the total number of languages, not just the number of additional languages), for an article that is available in three languages total (i.e. two additional languages) the button would then say "3 Languages", but inside the ULS you would only see two links. You would have to realize on your own that the third language mentioned in the button count is the one you're currently reading in. But maybe nobody would ever notice this : )
  • Languages (with no number) — this option seems the most neutral, but also gives the least information. Until you've learned that a Languages button with no number in front of it means no other languages are available you might fairly assume that you will find language options by clicking on that button. I think a way to make this work could be to disable the button, and provide context within a tooltip. With a disabled button we get back to a state where the button is informative even before you click on it.
Button label optionsLanguages (enabled)Languages (disabled)1 Language
Mocks
image.png (330×1 px, 80 KB)
image.png (328×1 px, 79 KB)
image.png (327×1 px, 76 KB)
In T275147#6858916, @alexhollender wrote:

@Pginer-WMF a small gotcha came up regarding the button label 0 Languages (which goes back to the recurring question of whether the count on the button should be the total number of languages available, or the number of additional languages available) — curious what you think about the following:

I agree with your analysis about "0 languages" and "1 language" being confusing. Communicating the status directly like "No other/more languages" may be too verbose for such a prominent location.

From the proposed options I think that I'd be more inclined to make the menu to become more general ("languages") as there is no specific option to switch to.

One option you may consider to both make it more clear that there are no languages as well as anticipate the option to solve this situation, is to use "Add languages" instead. This focuses on communicating the action, but (while still implicit) it is more obvious that this is provided because there are no other languages available.

Regarding the tooltip, given that it has an action I'm a bit concern with the option that shows it on hover (and going away as you try to reach the link, or being afraid of that to happen). Maybe it would be possible for the cases where there are no languages to remove the drop-down icon but still keep the action as a silent (but active) button.

One option you may consider to both make it more clear that there are no languages as well as anticipate the option to solve this situation, is to use "Add languages" instead. This focuses on communicating the action, but (while still implicit) it is more obvious that this is provided because there are no other languages available.

Add languages makes sense to me, and I agree that it helps set the expectation for what you might find (or not find) there, more so than Languages by itself. To clarify that we're on the same page here is how I'm imagining that:

image.png (327×1 px, 77 KB)

I imagine this would be a somewhat unfamiliar/unexpected button to a newcomer. But at the same time I think that small amount of confusion might be justified by the benefit of exposing people to some of the "behind the scenes" aspects of Wikipedia, i.e. providing contextual entry points to contribution experiences. If the above looks good to you @Pginer-WMF I think we should move forward with that.

In T275147#6862680, @alexhollender wrote:

To clarify that we're on the same page here is how I'm imagining that:

image.png (327×1 px, 77 KB)

Macro votecat: looks  good

@alexhollender, @Pginer-WMF - where would "create translations" link to?

@alexhollender, @Pginer-WMF - where would "create translations" link to?

I'd expect to go to link to Content Translation special page with the current article selected. It would be a link similar to:

https://en.wikipedia.org/wiki/Special:ContentTranslation?page=Romania&from=en&to=es&campaign=interlanguagelink

Considerations:

  • For the "to" parameter we normally provide a language frequently used by the user (and different from the source one). From the ULS suggested languages.
  • The "campaign" parameter is useful to (a) track how people enter though a particular entry point and (b) enable the beta feature automatically (less friction to access the tool). In the example I used the campaign for grey interlanguage links so that you can check how it works, but a specific campaign has to be created for this entry point. We can register it once we know the name (example: T239977). In this case the campaign name could be "language-selector-empty" to represent the empty state fo the language selector.
alexhollender_WMF renamed this task from Handling of empty state for language button and menu (short-term solution) to Empty state for language button and menu (short-term solution).Feb 26 2021, 4:55 PM
alexhollender_WMF removed alexhollender_WMF as the assignee of this task.
alexhollender_WMF updated the task description. (Show Details)
alexhollender_WMF updated the task description. (Show Details)

“Add languages” as link text when the link in the popup says “Create translations”? Shouldn't we better unify on one (latter)?

“Add languages” as link text when the link in the popup says “Create translations”? Shouldn't we better unify on one (latter)?

Ah, good point. At the same time I wonder if the consistency of having the word "Language" there in all cases might be helpful to reinforce the relationship between the button and the idea of languages?

alexhollender_WMF renamed this task from Empty state for language button and menu (short-term solution) to Empty state for language button and menu.Mar 9 2021, 4:06 PM

Declining this for the time being in favor of T276950: Empty state for language button pt 1. Once the new ULS is ready, we will follow the @Pginer-WMF's lead on what the expected behavior should be for access to translations.

alexhollender_WMF assigned this task to Pginer-WMF.

re-opening this as the language team is starting to look into a proper solution here

Hi, the language team is planning to add ULS to empty language state with relavent options as outlined in the ticket for our current sprint. Can you please advice us how to show the language button when there is no language? The button will be labeled as "Add languages" and ULS will provide the options for that.

hey @santhosh thanks for the heads up. the proposal still seems fine to me from a design perspective.

Folks, I can't figure it out from the discussion, but does this solution consider:

  • users without CX enabled
  • the difference between items without wikidata items and with wikidata, but no IW?

The second one is especially important, as the current "add links/change links" feature is really useful for linking to Wikidata without actually going there. Thanks.

@santhosh You can make the button show "0 languages" by changing this line SkinVector.php#224

from:
return $this->isLegacy() || !$this->isLanguagesInContent() || empty( $this->getLanguagesCached() );

to
return $this->isLegacy() || !$this->isLanguagesInContent();

We'll eventually remove that check when the empty state is ready.

@santhosh You can make the button show "0 languages" by changing this line SkinVector.php#224

from:
return $this->isLegacy() || !$this->isLanguagesInContent() || empty( $this->getLanguagesCached() );

to
return $this->isLegacy() || !$this->isLanguagesInContent();

I tried this, but did not see any effect. the The ContentHeader mustache template uses data-languages in portlet data and mediawiki does not set this if there are no languages. Or we need to set this data-languages at SkinVector. Also the Menu.mustache used in ContentHeader.mustache might need to take care of this dummy/constructed data-languages. I guess the preferred approach here is not to modify mediawiki core skin template, but do the customization at Vector side. Am I right?

Just wanted to leave a note to double-check that we are only doing this for pages that allow for languages currently (main namespace)

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

[mediawiki/skins/Vector@master] Show ULS button when article exist only in single language

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

https://gerrit.wikimedia.org/r/807073 is not ready to review. Please restore Patch-For-Review tag when you need a review from the web team.

Change 817894 had a related patch set uploaded (by Jdlrobson; author: Jdlrobson):

[mediawiki/extensions/UniversalLanguageSelector@master] Limit ULSPosition check to non-Vector 2022 skins

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

Change 807073 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Show ULS button when article exist only in single language

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

Change 817894 merged by jenkins-bot:

[mediawiki/extensions/UniversalLanguageSelector@master] Limit ULSPosition check to non-Vector 2022 skins

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

With other related changes, this ticket seems to be already resolved. For new articles not yet available in other languages, an empty state is shown with details and options to contribute when they apply (e.g., create the new article as a translation):

en.wikipedia.org_wiki_Oficjalny_s%C5%82ownik_polskiego_scrabblisty(Wiki Tablet).png (768×1 px, 228 KB)
en.wikipedia.org_wiki_Oficjalny_s%C5%82ownik_polskiego_scrabblisty(Wiki Tablet) (1).png (768×1 px, 212 KB)

If there is something missing or worth polishing, a specific separate ticket can be created.