Page MenuHomePhabricator

Empty state for language button and menu
Closed, DeclinedPublic8 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

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 ) );

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

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

Event Timeline

@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

@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:

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.

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

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 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 removed alexhollender as the assignee of this task.
alexhollender updated the task description. (Show Details)
alexhollender 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 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.