Page MenuHomePhabricator

Explore iterations of current language button implementation: Make language button progressive
Open, HighPublic2 Estimated Story Points

Description

Background

The results from T289200: Analyze behavior change on logged-out users before/after turn-on new language switch suggest a high learning curve of discovering the new location of the language switching button. This task contains interventions in the styling of the new language button to make it more obvious to people.

Open questions

  • are newcomers having an easier time switching languages than people who are previously familiar with the site? (i.e. is it a learning issue, or a pure discoverability issue?)

Ideas

We are hoping to test one or more of these ideas to see how they impact language switching. Please feel free to add more ideas, either as sketches or just written out.

More obvious button

We could add the progressive or normal button styling in order to make it more obvious. Once people have learned the new location of the button we could drop the additional styling.

ProgressiveNormalQuiet progressive
image.png (1×2 px, 745 KB)
image.png (1×2 px, 1 MB)
image.png (1×2 px, 721 KB)
Onboarding/guided tour

image.png (1×3 px, 1 MB)

Breadcrumb from old location

image.png (1×2 px, 854 KB)

Acceptance criteria

  • Change current button styling to progressive button:
    image.png (1×2 px, 745 KB)

Developer notes

  • Agree with early comment that this should be a trivial change to update styles for the language button

Developer notes

  • Should be a relatively trivial change. Update this line to use the mw-ui-progressive class instead of mw-ui-quiet
  • You will also need to update the icons to the inverted variants since the background has now changed.

https://github.com/wikimedia/Vector/blob/5e7dc81e38471b54fee26788e90342bfafd9fb26/includes/SkinVector.php#L650

Event Timeline

ovasileva triaged this task as High priority.

Seems like a trivial change. Do we want to A/B this or just make it and compare before and after?

Seems like a trivial change. Do we want to A/B this or just make it and compare before and after?

We're expecting a large enough change to be able to see the before and after effects. That said, it would be interesting to A/B test in the future on a wiki that has not already seen the new version of the language switcher. Perhaps one of the wikis from T290091: Create logos and prepare new set of pilot wikis for deployment could be appropriate for an A/B test

alexhollender updated the task description. (Show Details)
alexhollender added subscribers: Volker_E, RHo.

@ovasileva to clarify the plan for this test (or tests)

@alexhollender - we will begin with a before/after comparison for the new button vs the old version of the button. Currently, this is blocked on receiving the updated data for changes since the first deployment.

@ovasileva I wonder if experimentation on the main page would make sense to include here...do you think it would be possible to include a title+language switcher on the main page of whatever wiki we're going to test the blue language button on, and also collect data on % of language switching from main page vs. article pages?

@alexhollender @ovasileva note about main page, there is a heading on all main pages by default. It's hidden by community members:
If you turn off styles you'll see it: https://en.wikipedia.org/wiki/Main_Page?safemode=1

We could edit the MediaWiki:Common.css page to reveal it on wiki for testing quite easily if that was wanted but that would likely need community buy in.

@sgrabarczuk - perhaps we can reach out to a few of the pilot wikis to see if they're interested in experimenting with the title.

@ovasileva it is okay if I assign you to the analysis? It doesn't look ready for an engineer to look at right now.

@ovasileva it is okay if I assign you to the analysis? It doesn't look ready for an engineer to look at right now.

That sounds good - we're just waiting on some updated data on this one

ovasileva updated the task description. (Show Details)
cjming updated the task description. (Show Details)
cjming added a subscriber: cjming.
Jdlrobson renamed this task from Explore iterations of current language button implementation to Explore iterations of current language button implementation: Make language button progressive.Mon, Nov 29, 4:39 PM
Jdlrobson updated the task description. (Show Details)

Change 742997 had a related patch set uploaded (by Bernard Wang; author: Bernard Wang):

[mediawiki/skins/Vector@master] Make ULS in header progressive button

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

bwang removed bwang as the assignee of this task.Wed, Dec 1, 7:56 PM
bwang added a subscriber: bwang.

Hi all, I've just noticed this task for the first time (no surprise having all the focus and progress on Codex over last couple of weeks).
Late comments therefore: From a design system perspective the quiet progressive button with dropdown seems the preferable choice here.
The primary progressive button would be a wrong treatment as those buttons are aimed to signify the single, primary action in a view.

Hi all, I've just noticed this task for the first time (no surprise having all the focus and progress on Codex over last couple of weeks).
Late comments therefore: From a design system perspective the quiet progressive button with dropdown seems the preferable choice here.
The primary progressive button would be a wrong treatment as those buttons are aimed to signify the single, primary action in a view.

+1 to this take.

I also support the onboarding/user-education tooltip, and would suggest using the existing GuidedTour extension for this part.