We did some brainstorming at Dev Day today around improving the Help and Screen Options tabs in the admin. Keep in mind nothing here is a final decision, just some exploration of what we thought would be easy wins to make these tabs more useful.
Here are the problems with them right now:
- Most users are blind to these tabs.
- The labels and positioning give little indication as to what these tabs actually do.
- For a lot of users, Help is not that helpful.
- They’re position in the admin creates yet another point of navigation for users to be aware of (and per #1, most of them aren’t).
- The very wide container for text makes a lot of the help text difficult to read.
Here are some of the possibilities we brainstormed (see notes below image):
Ideas:
- Adding icons to these tabs would (hopefully) both make these tabs more visible and give a better indication as to what these tabs too.
- Moving these to the right side of the toolbar would give even more context to what these do, as they would be grouped with other user-specific settings.
- (6) The toolbar dropdown would allow for a slimmer content area for better readability.
- (7) The slimmer content area would let us make screen options read like a list for better scannability.
- (4/5) Putting the gear on the upper right would standardise with several other web apps (Twitter, etc).
We discussed possible changes to the labels:
- Screen Options -> Screen Preferences
- Help -> Screen Help
- (3) Removing the Screen Options label altogether and only showing the icon (since the gear icon is so universally recognised). Possible expanding this to Help.
I did a hi-fi mockup of what the new Help dropdown might look like:
John, 
rubai, 
lessbloat, and 9 others are discussing. 
Ipstenu (Mika Epstein) 3:41 am on August 6, 2012 Permalink | Log in to Reply
My only worry is that makes the menu bar very crowded. A lot if plugins add to that :/ The 2 b mockups I like because you could change the color and make them more visible. Pop a little
GrahamArmfield 9:42 am on August 6, 2012 Permalink | Log in to Reply
Coming from an accessibility perspective I’d favour the combination of icons and words. But I don’t have a strong view about the positioning of the links – existing location/toolbar.
There is a Trac ticket open (See #21326) about making the screen options more accessible to sighted keyboard users and screen reader users. I believe this has been accepted into 3.5. Any further changes to the functionality must ensure that the information and options are keyboard accessible and keyboard operable as appropriate. If a panel is to be used to contain the information it is important that focus is transferred to an appropriate place within that panel and that the tab order of any options makes sense. Will ‘Close Panel’ links be included at the bottom of the options/help?
Chelsea Otakan 6:25 pm on August 6, 2012 Permalink | Log in to Reply
If we chose an approach with icons only, we would still leave and text in the DOM (we could use text-indent to hide the text) for screen reader compatibility. Ref: http://css-tricks.com/snippets/css/standard-css-image-replacement/
AFAIK the current toolbar is keyboard accessible. It would theoretically use a lot of the same code as the current Toolbar and the current Help module. Since the menu item would now be above the content of the Help and Screen Options modules in the DOM http://core.trac.wordpress.org/ticket/21326 would be easier to resolve with the above approach.
We could add “Close Panel” or “Dismiss” links, but, since I’m not familiar with this aspect accessibility, what’s the reasoning behind adding them?
Andrea Rennick 2:54 pm on August 6, 2012 Permalink | Log in to Reply
On the other end, we’re making sure pages will be available in the codex to be able to link to them in screens like this, to explain to the user what those screens actually DO.