Page MenuHomePhabricator

[Design Spike] Audit all use cases for "disabled" buttons to identify inconsistencies
Open, In Progress, MediumPublic

Description

Background/Goal

Currently our Normal (outlined) and Primary (solid) buttons are using the same disabled state with a solid gray background color and inverted text.

Captura de pantalla 2022-04-25 a las 11.49.12.png (1×2 px, 696 KB)

Also, we use the same design for our regular Buttons and for ToggledButtons (T295179), being toggled-off a normal button and toggled-on a primary one. For this reason, both toggled-off and toggled-on use the same disabled state (gray solid background with inverted text).

Captura de pantalla 2022-04-05 a las 10.34.16.png (1×2 px, 808 KB)

We need to evaluate if we want to update our normal disabled buttons to be different from the primary disabled buttons.

Acceptance criteria (or Done)

  • Evaluate if we want to update our normal disabled buttons

Event Timeline

bmartinezcalvo changed the task status from Open to In Progress.EditedApr 25 2022, 10:36 AM

As we are developing the ToggleButton component (T295179) and we need to decide if we want to have different styles for disabled toggled-off and disabled toggled-on, I've created this new proposal for Disabled Normal buttons in which I used our new color tokens (T296995) to create a disabled-normal (outline) different from our disabled-primary (solid) buttons.

Here you can compare our current buttons where disabled-normal and disabled-primary are the same, with this new proposal where disabled-normal is different from disabled-primary. As we need to evaluate if we want to update or not our disabled-normal buttons, I've tested the new proposal in these real components where normal buttons are combined with other form items or buttons.

Disabled-Normal.png (1×3 px, 107 KB)

I think it might make sense to update our disabled-normal buttons for the following reasons:

  • We could differentiate between disabled-toggled-off and disabled-toggled-on
  • We could differentiate between disabled-primary and disabled-normal when we view a disabled button combined with other components (currently both are the same and when they are disabled we can't differentiate if it will be primary or normal in a default state).
  • It would make our system more consistent since now we have same disabled style for primary and normal buttons but different style for quiet ones. If we decide to have different disabled for quiet buttons the logical solution would be having different disabled for normal buttons (outlined) too.
STH renamed this task from Disabled normal buttons to Design spike: Should normal (outlined) and primary (solid) buttons use the same disabled state?.Apr 25 2022, 12:48 PM

@iamjessklein I assign you the task so you can to the Design Review and provide feedback in the task.

@bmartinezcalvo thanks for sharing this proposal. These proposal seem logical to me so +1.

@STHart - can you review this for good measure and let us know the next steps?

@iamjessklein this proposal makes sense to me logically and visually in the demo that @bmartinezcalvo provided. Thank you both. Just for my knowledge, what is the difference between "normal" and "primary" buttons? I'm not suggesting we change the naming or anything like that, but from a naming perspective that seems like they are of equal importance.

Thanks for sharing @bmartinezcalvo and for the detailed explanation. Your proposal sounds like a good idea to me :)

In T305437#7879352, @STHart wrote:

@iamjessklein this proposal makes sense to me logically and visually in the demo that @bmartinezcalvo provided. Thank you both. Just for my knowledge, what is the difference between "normal" and "primary" buttons? I'm not suggesting we change the naming or anything like that, but from a naming perspective that seems like they are of equal importance.

@STHart these are the current names of our buttons. Primary are the solid buttons and Normal are the outline ones. I agree with Primary but not with Normal since Normal is too generic and doesn't give a real information of the button you are going to use. I would name them Primary and Secondary or Solid and Outlined but I'm not sure if we can update it now or if it's a big task since they are already with this name in all the code (both Codex and OOUI). cc: @Volker_E

Captura de pantalla 2022-04-26 a las 12.49.17.png (610×1 px, 198 KB)

  • We could differentiate between disabled-toggled-off and disabled-toggled-on

In general, this task is following the right approach of trying to solve component limitations by introducing changes at a higher level in the system. Stylistically, the changes also look good. Nevertheless, I'm not sure that applying different styles to 'outline' and 'solid'/'filled' disabled buttons solves the original problem: allowing users to differentiate between disabled toggled-on and toggled-off buttons.

Screenshot 2022-04-25 at 13.11.30.png (258×788 px, 17 KB)

It might be just a personal impression, but the disabled option could not look apparent right away. We might need to validate the effectiveness of this solution, and find out whether further indications (e.g. a "selected" icon?) should be included.

  • We could differentiate between disabled-toggled-off and disabled-toggled-on

In general, this task is following the right approach of trying to solve component limitations by introducing changes at a higher level in the system. Stylistically, the changes also look good. Nevertheless, I'm not sure that applying different styles to 'outline' and 'solid'/'filled' disabled buttons solves the original problem: allowing users to differentiate between disabled toggled-on and toggled-off buttons.

Screenshot 2022-04-25 at 13.11.30.png (258×788 px, 17 KB)

It might be just a personal impression, but the disabled option could not look apparent right away. We might need to validate the effectiveness of this solution, and find out whether further indications (e.g. a "selected" icon?) should be included.

@Sarai-WMDE good point of view, but I think we have another problem here which is that our current disabled-primary buttons are using white on gray that it's not the best solution. Maybe we should use content-color-disabled #72777D for both disabled-normal and disabled-primary texts. With this solution we would improve the experience between disabled-toggle-off and disabled-toggle-on.

Captura de pantalla 2022-04-26 a las 19.11.33.png (522×2 px, 238 KB)

We will continue working on this task as an exploration to study more use cases and improve our disabled buttons. Moving this into the backlog for now and can discuss scope in our next sprint.

STH renamed this task from Design spike: Should normal (outlined) and primary (solid) buttons use the same disabled state? to [Design Spike] Audit all use cases for "disabled" buttons to identify inconsistencies.Apr 28 2022, 7:01 PM
STH triaged this task as Medium priority.