[wp-trac] [WordPress Trac] #48452: Proposal: improve distinction between buttons and other controls

[WordPress Trac]

#48452: Proposal: improve distinction between buttons and other controls
-----------------------------------+--------------------------------
 Reporter:  drw158                 |       Owner:  (none)
     Type:  enhancement            |      Status:  new
 Priority:  normal                 |   Milestone:  Awaiting Review
Component:  General                |     Version:
 Severity:  normal                 |  Resolution:
 Keywords:  needs-design-feedback  |     Focuses:  ui, accessibility
-----------------------------------+--------------------------------
Description changed by SergeyBiryukov:

Old description:

> New button styles were introduced in
> [https://core.trac.wordpress.org/ticket/34904 ticket 34904].
>
> As discussed in the comments on this blog post,
> [https://make.wordpress.org/design/2019/09/06/discussion-higher-contrast-
> form-fields-and-buttons/ Discussion: Higher contrast form fields and
> buttons], the secondary (or default) button style is no sufficiently
> distinct from input fields and other similar UI controls.
>
> This ticket attempts to remedy the issue and create a consistent styling
> of UI controls that is more usable. By seeing a set of UI controls
> together, we can figure out the best approach holistically.
>
> **The main concern that was raised is that the new default buttons are
> styled similarly to inputs, and it could be confusing for folks if they
> can't differentiate them.**
>
> Example:
>
> [[Image(http://cldup.com/wvn2VchDdY.png)]]
>
> Proposed solutions, compared directly:
>
> [[Image(http://cldup.com/vYhbr_PI36.png)]]
>
> - Option A: subtle background color, bold text
> - Option B: blue and bold text
> - Option C: subtle drop shadow, bold text
>
> In context, with more UI:
>
> Option A
>
> [[Image(http://cldup.com/7nma8vFVbm.png)]]
>
> Option B
>
> [[Image(http://cldup.com/XYDICcgCV7.png)]]
>
> Option C
>
> [[Image(http://cldup.com/bThhBvpVUp.png)]]
>
> ---
>
> Something to be considered separately from color and shadow is shape.
> What about using square corners for text inputs?
>
> [[Image(http://cldup.com/z8G9_qr_AX.png)]]
>
> Note:
> - These mockups do not include interactive states, although those will
> need to be explored. I think it's important these styles stand on their
> own first.
> - Testing these styles in the context of a real UI in WordPress will be
> the next step.
> - Please ignore labels and text. This is just to test the UI styling.
> - Text is using the default macOS system font.
> - Even though dark mode doesn't exist in WP, it's a good test to see how
> the styles hold up in an inverted color scheme.
> - I believe all proposed solutions meet AA color contrast guidelines.
> - Shadows will be removed it Windows high contrast mode, and we need some
> other visual indication other than color to distinguish the UI elements.
>
> This is my first ticket, so apologies if I missed any standard practices.

New description:

 New button styles were introduced in ticket #34904.

 As discussed in the comments on this blog post,
 [https://make.wordpress.org/design/2019/09/06/discussion-higher-contrast-
 form-fields-and-buttons/ Discussion: Higher contrast form fields and
 buttons], the secondary (or default) button style is no sufficiently
 distinct from input fields and other similar UI controls.

 This ticket attempts to remedy the issue and create a consistent styling
 of UI controls that is more usable. By seeing a set of UI controls
 together, we can figure out the best approach holistically.

 **The main concern that was raised is that the new default buttons are
 styled similarly to inputs, and it could be confusing for folks if they
 can't differentiate them.**

 Example:

 [[Image(http://cldup.com/wvn2VchDdY.png)]]

 Proposed solutions, compared directly:

 [[Image(http://cldup.com/vYhbr_PI36.png)]]

 - Option A: subtle background color, bold text
 - Option B: blue and bold text
 - Option C: subtle drop shadow, bold text

 In context, with more UI:

 Option A

 [[Image(http://cldup.com/7nma8vFVbm.png)]]

 Option B

 [[Image(http://cldup.com/XYDICcgCV7.png)]]

 Option C

 [[Image(http://cldup.com/bThhBvpVUp.png)]]

 ---

 Something to be considered separately from color and shadow is shape. What
 about using square corners for text inputs?

 [[Image(http://cldup.com/z8G9_qr_AX.png)]]

 Note:
 - These mockups do not include interactive states, although those will
 need to be explored. I think it's important these styles stand on their
 own first.
 - Testing these styles in the context of a real UI in WordPress will be
 the next step.
 - Please ignore labels and text. This is just to test the UI styling.
 - Text is using the default macOS system font.
 - Even though dark mode doesn't exist in WP, it's a good test to see how
 the styles hold up in an inverted color scheme.
 - I believe all proposed solutions meet AA color contrast guidelines.
 - Shadows will be removed it Windows high contrast mode, and we need some
 other visual indication other than color to distinguish the UI elements.

 This is my first ticket, so apologies if I missed any standard practices.

--

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/48452#comment:6>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform