[wp-trac] [WordPress Trac] #21583: Improve discoverability and visual design of Screen Options and Help Panels

[WordPress Trac]

#21583: Improve discoverability and visual design of Screen Options and Help Panels
-----------------------------------------+--------------------------------
 Reporter:  chexee                       |       Owner:
     Type:  enhancement                  |      Status:  new
 Priority:  normal                       |   Milestone:  Future Release
Component:  Help/About                   |     Version:
 Severity:  normal                       |  Resolution:
 Keywords:  needs-patch has-screenshots  |     Focuses:  ui, accessibility
-----------------------------------------+--------------------------------
Changes (by afercia):

 * keywords:  needs-patch => needs-patch has-screenshots


Comment:

 For many users, content navigation is a linearised process. Ideally, the
 content order in the source should follow a logical flow, and this would
 benefit all users.

 Currently, when landing in the main content, the first things in the
 source order are the Help and Screen Options (they're floated right, so
 "Help" is the first one). Basically users will find something related to
 Help and Screen Options even before they're informed about ''what'' the
 page is about (because this info is given by the main heading, which comes
 after).

 Moving Help and Screen Options after the main heading in the source order
 would be a nice improvement. However, the technical issue is those tabs
 are printed out with `render_screen_meta()` in `admin-header.php`. That's
 clean, but happens before any output in the main content. It would be
 great to find a good technical solution to keep the code clean enough and
 at the same time output Help and Screen Options later.

 Icons-only control:
 not sure they're the best solution for usability and accessibility.
 Usability: see https://www.nngroup.com/articles/icon-usability/ suggesting
 icons should always use a text label for universal understanding. For
 a11y, same: they should have an universal meaning and some meaningful
 alternate text.

 Fly-out popups (or whatever we want to call them :)):
 they're a bit tricky: they should be treated as modal dialogs: tabbing
 should be constrained within the popup, focus should be managed when
 opening/closing the popup etc. Also, they look nice with the Screen
 Options form fields, not sure if they would fit so well with the Help
 content which is, often, very long. Maybe worth exploring alternate,
 simpler, solutions.

 From a design perspective, worth noting in other WP screens the space to
 the right already has the search form and other stuff:

 [[Image(https://cldup.com/8pCVx3--KO.png)]]

 A redesign should maybe re-think the whole "top area" of the admin
 screens, trying to reorganise and group the various controls based on
 their functionality. Personally, I'd start with the "Add" button :)
 About the search, see also #31818.

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