[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:  Administration         |     Version:
 Severity:  normal                 |  Resolution:
 Keywords:  needs-design-feedback  |     Focuses:  ui, accessibility
-----------------------------------+--------------------------------

Comment (by afercia):

 The new button styles were introduced after design feedback on
 ticket:34904#comment:73. The main purpose was to bring Gutenberg styles to
 the core admin to improve consistency.

 I'm a bit surprised after only a month the design team seems to have
 changed their minds and now a new design proposal is being evaluated.

 > As discussed in the comments on this blog post, 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.

 I'm not sure I follow. The concerns expressed in the blog post comments
 happened ''before'' the new blue buttons style was proposed in
 ticket:34904#comment:73 which is September 26. None of the commenters did
 even see the new style.

 Evaluating improvements is always good but I'd tend to think changing
 important UI controls style at each release isn't the best path forward to
 make WordPress users happy. For the future, maybe the design feedback
 should be a bit more cautious and better pondered.

 Regardless, personally I don't see a particular problem with the blue
 buttons style on WP trunk 5.3. The new style is consistent with the one
 used in Gutenberg. The blue is traditionally used in core for interactive
 controls, so it makes totally sense to me.

 > the new default buttons are styled similarly to inputs, and it could be
 confusing for folks if they can't differentiate them.

 Is there any specific feedback from users on the buttons blue styling? As
 said, the comments on the blog post relate to previous proposals thus
 they're not relevant. Is there a real problem with the new style to start
 with? Any user testing or data to support there's an actual problem?

 From a quick, simple, comparison between WordPress 5.2 and WordPress trunk
 5.3 I wouldn't say it's impossible to distinguish buttons from inputs:

 [[Image(http://cldup.com/rpt-Jv59fd.png)]]


 Not opposed to improvements though, as long as contrast is WCAG compliant.
 To the specific points:
 - I'd agree to not use a bottom shadow: it visually alters the buttons
 height making horizontal alignments troublesome. Personally, I think
 removing the box-shadow was a good improvement.
 - Bold: not sure as it should exclusively be used for emphasis, not for
 visual purposes.
 - No gradients please :)
 - I wouldn't make the buttons background white: in my mind that would
 actually make them too similar to inputs.
 - I'd rather consider the **shape**. Instead of changing the ''buttons'',
 I'd suggest to consider to change the ''inputs''. Inputs have now rounded
 corners only for consistency with Gutenberg. Traditionally they have
 always been squared and maybe this change should have been considered a
 bit better. Also, a different shape can be distinguished regardless of
 color which is a win for accessibility. Worth noting the border-radius
 inconsistency between form controls has been noted in #48420 and should be
 addressed there, where a specific design feedback on this point has been
 asked.

 That said, personally I mostly care about consistency. Any change should
 be implemented also in Gutenberg, were inputs and buttons currently look
 like in the core admin:

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

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