Page MenuHomePhabricator

Style language button and menu
Closed, ResolvedPublic3 Estimated Story Points

Description

Background

In T260738: Language button v1 - allow language button to appear at top of page (plus JS fallback) we will be creating the basis for the new language switcher with an initial language button displaying the list of languages via the ULS. This task will build upon that work and focus on styles and precise location of the new button

Acceptence Criteria

  • Style and place new language button according to design requirements defined below

Current design

defaulthoveractivefocus
Screen Shot 2021-02-24 at 3.14.35 PM.png (82×376 px, 8 KB)
image.png (32×174 px, 2 KB)
image.png (32×174 px, 2 KB)
image.png (36×178 px, 2 KB)
-bg: #F8F9FAbg: #EAEDF0, border: #72777Dborder: 2px #3366cc

details
text color: #202122
entire height (including borders): 32px
entire width (including borders): ~174px
border-radius: 2px
font-size: 14px equivalent in ems
main icon canvas size: 20x20px

layout/spacing

image.png (156×523 px, 14 KB)

Developer notes

https://gerrit.wikimedia.org/r/c/mediawiki/skins/Vector/+/635080 will be interesting reading prior to taking this on.

Ideas explored:
Using a different template for language button

Related Objects

Event Timeline

There are a very large number of changes, so older changes are hidden. Show Older Changes

How will we create the button? mw-ui-button ? wvui styles ? other?

Just a note that this question is also relevant (and has been raised) on T270202#6767750 for the pre-loaded search component

Jdlrobson renamed this task from Style and place language button to Style language button and menu.Jan 28 2021, 9:42 PM

Change 660956 had a related patch set uploaded (by Jdlrobson; owner: Jdlrobson):
[mediawiki/skins/Vector@master] The label of the language button refers to the number of languages

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

Change 660957 had a related patch set uploaded (by Jdlrobson; owner: Jdlrobson):
[mediawiki/skins/Vector@master] Add language icon to language button

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

Change 660958 had a related patch set uploaded (by Jdlrobson; owner: Jdlrobson):
[mediawiki/skins/Vector@master] Style the language button

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

Change 661497 had a related patch set uploaded (by Jdlrobson; owner: Jdlrobson):
[mediawiki/core@master] Align mw-ui-button with latest decision recommendation

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

Change 660956 merged by jenkins-bot:
[mediawiki/skins/Vector@master] The label of the language button refers to the number of languages

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

Change 660957 merged by jenkins-bot:
[mediawiki/skins/Vector@master] Add language icon to language button

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

@Jdlrobson looking at https://patchdemo.wmflabs.org/wikis/6a1964b9516fbbb14565d9e0453269c3/w/index.php/Spain?useskinversion=2

Changes for button
  • reduce font-size to 14px (currently it's 16px)
  • change color to #202122 (currently it's #54595d)
  • padding-right for button text should be 30px (currently it's 40px)
  • language icon seems to be displaying at 21x21px (should be 20x20px)
  • language icon's margin-right should be 7px (currently is 14px)
  • the down arrow should be 10px from the right edge of the button (currently it's 8px)

after making those changes in the dev tools I'm seeing:

Screen Shot 2021-02-04 at 3.13.39 PM.png (147×364 px, 9 KB)

The remaining issue is the colors of the icons. It seems that on mobile the icons are #54595d, but on desktop the icons are #202122 (see the new Recent Changes page for examples of icons in buttons). I'm not sure how to resolve this?

Changes for non-JS menu
  • increase font-size to 16px (currently it's 13px)
  • add a max-height of ~65vh (or something similar)
  • add overflow: scroll
  • add a border-top (since the menu is wider than the button)

after making those changes in the dev tools I'm seeing:

Screen Shot 2021-02-04 at 3.18.04 PM.png (657×308 px, 57 KB)

Change 660958 merged by jenkins-bot:
[mediawiki/skins/Vector@master] Style the language button

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

nray removed nray as the assignee of this task.Feb 5 2021, 12:59 AM

Change 661831 had a related patch set uploaded (by Jdlrobson; owner: Jdlrobson):
[mediawiki/skins/Vector@master] Language button - design fixes

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

Change 661831 merged by jenkins-bot:
[mediawiki/skins/Vector@master] Language button - design fixes

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

Change 662793 had a related patch set uploaded (by Jdlrobson; owner: Jdlrobson):
[mediawiki/skins/Vector@master] Fix focus, active and hover states of language button

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

We are not changing direction of arrow on dropdown-like buttons if expanded. That's non-default behaviour and should be fixed.
Also the border-bottom-radius needs to be set to 0 as soon as the menu is visible.

We are not changing direction of arrow on dropdown-like buttons if expanded. That's non-default behaviour and should be fixed.

We do flip the arrow direction. See screenshot., The border-radius is disabled in https://gerrit.wikimedia.org/r/c/662793

Screen Shot 2021-02-09 at 2.59.21 PM.png (906×424 px, 44 KB)

@ovasileva @Jdlrobson — after @Volker_E and I spoke today we realized that a slightly different button styling should be used here. Apologies from both of us for not bringing this up sooner. cc @RHo @Pginer-WMF


What we considered: based on our current design system we have three button styling choices

quiet
Screen Shot 2021-02-11 at 5.20.45 PM.png (388×1 px, 145 KB)
quiet progressive
image.png (386×987 px, 109 KB)
normal
Screen Shot 2021-02-11 at 5.21.43 PM.png (387×981 px, 145 KB)

Regarding user testing: thankfully during testing we tested both quiet and normal and though we're talking about extremely small sample sizes here, we found no difference between the two.

Regarding visual design: currently it is difficult to judge what the best visual style for this button will ultimately be since the surrounding elements have yet to be re-designed. Volker pointed out that the normal style button currently feels out of place, as it's much larger than the other elements around it.

Regarding UX patterns: Volker spoke about a distinction between buttons and links. A button is typically used for taking an action within the current view (e.g. the Submit button below this comment box), whereas a link takes you to a different page. Of course many, or perhaps even most, buttons/links blur the lines here. The language button/link in question is difficult to categorize because it's a trigger for a menu of links (so neither clearly a button or a link).

Regarding A/B testing: running the A/B test with a less prominent button seems like a desirable option because it will make the test that much harder, plus we can always make the button more noticeable if we need to.


Recommendation: we would like to use a quiet button. Volker estimates that the CSS changes should be rather minimal (basically we just need to remove the background color and the border).

Screen Shot 2021-02-11 at 5.20.45 PM.png (388×1 px, 145 KB)

Recommendation: we would like to use a quiet button. Volker estimates that the CSS changes should be rather minimal (basically we just need to remove the background color and the border).

Screen Shot 2021-02-11 at 5.20.45 PM.png (388×1 px, 145 KB)

Looks good to me.

Regarding A/B testing: running the A/B test with a less prominent button seems like a desirable option because it will make the test that much harder, plus we can always make the button more noticeable if we need to.

^ This makes sense and the quiet button looks good to me too.


Recommendation: we would like to use a quiet button. Volker estimates that the CSS changes should be rather minimal (basically we just need to remove the background color and the border).

Screen Shot 2021-02-11 at 5.20.45 PM.png (388×1 px, 145 KB)

Thanks for the extensive updates @alexhollender – one thing still to consider is using a quiet progressive button (in case folks would be confused with the non-interaction color treatment). I understand that a colored icon and label would possibly mean a stronger than necessary focus on the right side. Coming from considerations on discoverability and clarity in case the tests show us unexpected low interaction results.
For next step let's go with Alex' latest design.

Change 665151 had a related patch set uploaded (by Jdlrobson; owner: Jdlrobson):
[mediawiki/core@master] Make quiet button mixin available

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

Change 665151 abandoned by Jdlrobson:
[mediawiki/core@master] Make quiet button mixin available

Reason:
After talking to Jan and volker, we're just going to load the mediawiki.ui button module.

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

Change 661497 merged by jenkins-bot:
[mediawiki/core@master] Align mw-ui-button with latest design recommendation

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

Change 665156 had a related patch set uploaded (by Jdlrobson; owner: Jdlrobson):
[mediawiki/core@master] Align quiet buttons with style guide

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

Change 665156 merged by jenkins-bot:
[mediawiki/core@master] Align quiet buttons with style guide

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

Change 662793 merged by jenkins-bot:
[mediawiki/skins/Vector@master] Language button is quiet with focus, active and hover states

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

Note arrow flipping will be handled as part of T275681
https://patchdemo.wmflabs.org/wikis/796258b4f19bcff4ce8db662ed396b26/w/index.php/Spain?useskinversion=2

Remaining Issues

  1. Focus state

I'm pretty sure the focus state is still wrong, and perhaps other things.
The focus state never gets triggered for the button as we autofocus the search input in the dialog. What should we do about that?

  1. height is wrong. in wvui it's 32px, here it's 20px.
  1. quiet buttons should be bold.

Am putting in design review as I think we should be able to find these inconsistencies easier together.

Change 667740 had a related patch set uploaded (by Jdlrobson; owner: Jdlrobson):
[mediawiki/skins/Vector@master] Correct the height of the language button

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

Change 667741 had a related patch set uploaded (by Jdlrobson; owner: Jdlrobson):
[mediawiki/core@master] Quiet buttons should be bold and min height of 32px

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

From a conversation with @Jdlrobson yesterday: it might sense for you, @Volker_E, to be responsible for design review here since you know the most about our buttons. Even better would be if you want to take this task on yourself and also provide the appropriate styling adjustments. Feel free to re-assign to me if you don't want to take this on.

Change 667741 merged by jenkins-bot:
[mediawiki/core@master] mediawiki.ui: Quiet buttons set to bold and with min-height of 32px

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

Change 667740 merged by jenkins-bot:
[mediawiki/skins/Vector@master] Correct the height of the language button

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

@Volker_E @alexhollender please review the patchdemo and determine whether it's acceptable and if any further refinements to the core spec for quiet buttons are needed.

I'm going to be stepping away from this patch for now to focus on the instrumentation.

@ovasileva @Jdlrobson: Volker and I just met about the button. There are two slight changes that still need to be made, however we are also comfortable shipping the button as-is. Therefore we were thinking:

  • if Volker can submit a patch on (or before) Wednesday we'll make the changes
  • otherwise we should move this forward and create a separate task for the changes to be made as a follow-up

The changes are:

  • reduce the space between the icon and the button text
  • increase the opacity of the icon and the down arrow to 1

Change 669954 had a related patch set uploaded (by Jdlrobson; owner: Jdlrobson):
[mediawiki/skins/Vector@master] Language button skinStyle overrides

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

The icon comes out of ULS as well, we would need to change the color upstream and put opacity on the other cases from my quick review.

Change 669954 merged by jenkins-bot:
[mediawiki/skins/Vector@master] Language button skinStyle overrides

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

@alexhollender Wondering if we should follow a ToggleButtonWidget (frameless) behaviour when the button is triggered (toggled) and the menu is open in order to make the connection even clearer?

@alexhollender Wondering if we should follow a ToggleButtonWidget (frameless) behaviour when the button is triggered (toggled) and the menu is open in order to make the connection even clearer?

As a reference, comboboxes and dropdowns don't remain in the pressed state when their menus are opened.

@alexhollender Wondering if we should follow a ToggleButtonWidget (frameless) behaviour when the button is triggered (toggled) and the menu is open in order to make the connection even clearer?

As a reference, comboboxes and dropdowns don't remain in the pressed state when their menus are opened.

@Volker_E could you provide an example of how what you're imagining would look?

@alexhollender Wondering if we should follow a ToggleButtonWidget (frameless) behaviour when the button is triggered (toggled) and the menu is open in order to make the connection even clearer?

As a reference, comboboxes and dropdowns don't remain in the pressed state when their menus are opened.

Correct, the thinking behind is, that we currently miss a clear visual connection between the frameless button and the (current) menu:

image.png (898×1 px, 196 KB)

A few weeks ago, we were discussing putting the position of the language selector menu underneath the button.
Having this and a treatment of a frameless toggle button (toggled) seems like a necessary improvement.

image.png (738×1 px, 125 KB)

A pokey would be another possible supporter of the mental connection between button and menu. Note, that frameless toggle button was added without design support to OOUI. It could see some improvements on the way like normal toggle button's Accent30 color.

and we have another button! this is all set to deploy. @Volker_E please open follow-up tasks for any remaining concerns.

Alright! Resolving