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:
JasonBC, 
I’m not super confident in any of the ones I presented above, so a good discussion about this is welcome.
marc kamaka, 
Marko, 
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.
JerrySarcastic 9:59 pm on August 13, 2012 Permalink | Log in to Reply
I like having the gear icon at the top right; it’s definitely a convention that users of social media, gmail, and other apps are becoming used to, so big thumb’s up on #4 and #5.
In general I think moving Screen Options and Help to the menu bar is a big win. This is an area the user is already aware of and associates with performing various tasks in the dashboard, plus the visual contrast of the icons (and/or text label) against the dark background makes visual acquisition much easier.
Staying with tabs, but giving them an icon (and perhaps a background color) helps address the issue of their invisibility, but not as effectively as moving them to the menu bar, IMHO.
Cliff Seal 7:39 pm on August 14, 2012 Permalink | Log in to Reply
I agree with your reasoning and like 4 and 5 as well. The cog and the question mark are common enough to use alone (since accessibility is obviously being addressed), and I’d love to see the cog be the farthest thing to the right, followed by the question mark to the left, and then the ‘Howdy…’. As much tradition as the latter holds, it’s the least important, and could hypothetically be condensed to an avatar or profile icon itself to preserve space.
I’ve rarely seen a new WordPress user even notice the existence of the ‘Screen Options’ as it is now. I think integrating it into the bar’ll help tremendously!
Cliff Seal 8:06 pm on August 14, 2012 Permalink | Log in to Reply
Even if we hide the wording in favor of the cog/gear icon, what’s the reason we don’t use ‘View Options’ or something of that sort instead of using the word ‘screen’? Seems like it would be more suitable for what the options actually are.
Chelsea Otakan 10:35 pm on August 14, 2012 Permalink | Log in to Reply
Thanks for all your feedback guys!
Here’s an iteration for the screen options dropdown. According to some discussion, I rearranged the nav on the right side so the gear is on the far right.
I also opened a ticket for this enhancement in 3.5 here: http://core.trac.wordpress.org/ticket/21583
Ipstenu (Mika Epstein) 10:47 pm on August 14, 2012 Permalink | Log in to Reply
Wow… It’s amazing when you see something that simple and think ‘Yes, why doesn’t it look more like that?’
Can we make the gear a more standout color? Right now one of the (many) issues is people just don’t see it.
JerrySarcastic 1:13 am on August 15, 2012 Permalink | Log in to Reply
Looks great! What’s the concept behind the Settings sub-menu? Interesting idea…
Chelsea Otakan 1:33 am on August 15, 2012 Permalink | Log in to Reply
Sorry, I completely spaced on explaining that. *headdesk*
On Dev Day, we chatted about adding links to relevant settings screens that would show up at the bottom of the menu and including hooks so plugins can do the same.
This way, we can allow easy access to global WordPress settings from this menu on relevant screens.
JerrySarcastic 4:33 pm on August 15, 2012 Permalink | Log in to Reply
Ah, gotcha. I think it’s a great idea, but one that will need some context; if I’m a new user, I may not *get* what these settings do without a little explanation.
That said, I’m all for finding a way to make relavent settings available. They can get a little buried in the Settings area of the dashboard. I know this is a point of frustration for the users I introduce to WordPress.
Chelsea Otakan 4:54 pm on August 15, 2012 Permalink | Log in to Reply
I agree and think that’s also an overall problem with the nomenclature and labeling of the Settings screen
I’ve thought a bit about this, but would love to hear any suggestions for better labels for the Settings screens. Its definitely something our users struggle with.
Cliff Seal 3:11 pm on August 16, 2012 Permalink
I wonder if we should label (what was) Screen Options as ‘Admin Options’ or ‘View Options’ and the links to the General Settings as ‘Global Settings’, or something of that nature. I *love* giving more intuitive access to the latter like this. Well done!
Stephen Harris 4:46 pm on August 18, 2012 Permalink | Log in to Reply
That’s a really good idea. My only concern is that the options tab always kept you on the same page – and these will navigate you away from it . Might user’s confuse the screen settings with the site wide ones? I suppose this is the almost the same point Jerry was making. Maybe add a label ‘Site Settings’?
Great work though – it’s looking great!
Chelsea Otakan 4:52 pm on August 15, 2012 Permalink | Log in to Reply
I’m not sold on the colors, but if the overall layout and concept seems good (so far most of the feedback has been positive) I think I’ll start working on a patch this week.
Joen Asmussen 6:52 pm on August 15, 2012 Permalink | Log in to Reply
I love this. I really love this. Vast improvement over the “Screen options” tab.
One teensy niggle, perhaps, is the contextual settings “quick links”. To a new user, several different links that lead to the same thing can be confusing. The user might ponder which link is the “right” link (even if the links lead to the same). The settings menu can be a hunt and peck experience, that’s a challenge entirely on its own. But adding the links here to alleviate that feels a little bit like a bandaid.
Ryan Duff 1:37 am on August 16, 2012 Permalink | Log in to Reply
I skimmed, so forgive me if it was already mentioned and I missed it… but assuming this would fall back to current way if they have the admin bar disabled?
ie. if admin bar was enabled for the current user, the links would be there and the old tab interface for screen options / help would be hidden, but if the admin bar was disabled (either across the board or for the current user, they tabs would be present so the options are available still?
I’m a huge fan of the admin bar, but *still* run across client sites, themes, plugins, etc that just disable it for no good reason. Sad, but those use cases need to be considered as well.
Otherwise, I love the way this looks and thinks it makes total sense to move them up there.
Andrew Nacin 4:01 am on August 16, 2012 Permalink | Log in to Reply
The toolbar can only be disabled for the frontend, as it is integrated into the admin. Screen options and help are only available in the admin. So disabling it won’t have any effect.
Ipstenu (Mika Epstein) 11:20 am on August 16, 2012 Permalink | Log in to Reply
To be fair, there are plugins and functions people use to disable it more. From what I’ve seen they do it not for the admins, but for the people who don’t need all that stuff and are just users. I think for those who disable it, it shouldn’t be a big loss, but it would cement that they’re going to have to start adapting to the over a year old new way.
Helen Hou-Sandi 1:10 pm on August 16, 2012 Permalink | Log in to Reply
If you disable the toolbar entirely, you can’t log out. I hope people are not still doing that, because that’s not a good idea.
Ipstenu (Mika Epstein) 3:07 pm on August 16, 2012 Permalink
There’s a plugin out there that puts the logout on the side-menu of the admin screen. I remember it coming up when people screamed about the toolbar being the only way to log out. I’m not delving back into the crazy pants of why we suck for requiring the toolbar.
JasonBC 8:35 pm on August 19, 2012 Permalink | Log in to Reply
I think that’s a valid concern. I have one site that doesn’t show the toolbar in single post view and I’ve seen others who’ve had problems with it disappearing from the font and back-ends.
Chelsea Otakan 10:59 pm on August 19, 2012 Permalink | Log in to Reply
That sounds more like a bug than a UI constraint