The top menu in any cms/dashboard is arguably some of the most valuable real estate there is, and despite the heavy value the WordPress Admin puts on the left side menu, the top menu has long been a junk drawer of hot links and akward drop down menus.
The top right corner itself (apologies I don’t have a better name for it) is no exception, and in my experience it currently offers little to no value in functionality or aesthetics. In it’s current state I’d rather have it removed than keep it around and have it distract the eye (or unexperienced user) away from more important options.
In MP6, the currently-in-progress update to the WordPress admin, it gets flattened, but isn’t addressed further than that.
So, I thought I’d take a crack at rethinking it. Keeping in mind the lessons I’ve learned customizing the WordPress admin for clients, as well as the vision communicated through MP6, I set out with the following goals:
- Create a cleaner, more visually desirable top right corner
- Try to create a corner that has more value for users
- Work within reasonable constraints of the current admin design and vision communicated in MP6 (avoid total redesign)
Clean Up
First, “howdy, username {image}” seems a little verbose, and isn’t adding as much value as it is distracting. Does a user need to be greeted each and every time they load a new admin page? I don’t think so. I’d also like to simplify to using a dashicon instead of the user’s gravatar, but I’d be curious to know if there’s any data on users responding well to their gravatar.
It’s already looking a bit cleaner and less distracting, but let’s take it a step further.
Adding Value
Next, let’s add a few things that might be valuable to us.
First up, I’ve always wanted a “quick reference” menu with the last 3-5 admin pages I’ve been to. I’m always toggling between a few pages (say a specific post I’m authoring, the widget page, and a settings page), and with a quick reference list I can quickly toggle back and forth without searching through the flyout menus.
“Quick Reference” dropdown with the last 3-5 admin pages visited
Next, let’s add in an easily identifiable link to get to the home page of the site. I know we’re stealing from the top left corner, but I’ve found users struggle with using the blog name dropdown link. This way is much more elegant.
Beyond these, I think you could make a case for continuing to steal items from the crowded top left corner. I’ll offer a few examples I think would work well:
Comments
I really enjoy the color treatment that MP6 has added to the Installed Plugins admin page. A lot of other CMSs use color to communicate status, which I’ve found helps new users quickly digest what things need more attention.
border-left colored lines indicate the status of a plugin. Red if it needed updating, blue if it’s up to date.
Applying this same treatment to the top admin menu, you could add comments into the top right menu with an indicator on whether or not comments need some attention.
Steal comments from the top left menu, using a color treatment to indicate status
Updates
Updates would also work great with a bit of color treatment.
Steal updates from the top left corner, use similar color treatment to indicate updates are needed
Conclusion
In no way is this a comprehensive look at the top admin bar, rather a quick take on how the top right hand corner could improve a bit. I’m very excited for MP6 to make it’s way in to Core (3.7 anyone?), and I’m looking forward to more discussions around how we can help make the admin more efficient and usable for all users.
What do you think? I’d love your feedback on these ideas.
Interesting! As a user I think I’d really appreciate those tweaks to my top right corner. Being able to access recent pages quickly like you mentioned would be really awesome.
Agreed! Thanks!
Really nice Grant. I like the colour bar as an alternative to the more common “colourification” that mono icons seem to get when they’re special/need-attention/selected – haven’t played with MP6 yet so first time I’ve seen it.
But the highlight to me is the ‘last 5 pages’ dropdown. I want this now! Think this might have to be next weekend’s @Saturhack project.
Thanks Jon, and let me know if you guys run with that plugin, would be fun to see that happen!
I like the idea of taking away the “Howdy…” and adding more value in. Especially with semantic icons. Personally though, I am a fan of seeing my Gravatar icon up there. Perhaps this could be a preference setting?
Thanks! I go back and forth with the gravatar. I think the more complex the system, the more I enjoy seeing a verification that I’m logged in as myself. However, with the username being there, I think the gravatar is redundant. Worth thinking about and mocking up a few more times I think…
I’m glad to see people thinking about this. I’d be hesitant to go with just icons for some of these tasks without also having their label. An icon and label together is powerful, but icons alone will probably not be used that much.
Getting rid of “howdy, ___” is a great step though!
Agreed, good thoughts. The current WordPress top left corner uses similar symbols/numbers which I suspect aren’t used by many new users… my mockups do little to address that issue. I think these mockups appeal to those of us who know the admin better, and would use buttons that are familiar to us.
Thanks for the feedback!
I’m thinking that, if you’ve got a descriptive and meaningful popup on hover, then you can probably do without the text there on a permanent basis.
Most of the items I’ve got in my admin bar at the moment have dropdown menus that appear on hover so that also does a good job of explaining what the funny little symbol means.
Tooltips are definitely a way to provide some contextual info on symbols, but I tend to agree with @taylorddewey:disqus in that symbols alone don’t attract unfamiliar users.
I’d be interested to see which symbols are more familiar to certain users than others. I think there’s a case to be made that the “home” icon stands alone better than the “link” icon.
I guess I’m looking at it with my ‘inquisitive geek’ hat on then. The first thing that I’D do if I saw an unfamiliar icon is to mouseover it to see if it tells me what it does. But I’ll agree that catering for inquisitive geeks isn’t sufficient.
Definitely agree with you that the link icon isn’t particularly meaningful, especially in this context. I don’t see anything more helpful in the current dashicons set though.
Was it Firefox (or maybe even IE!) that had the option on its toolbar of showing just icons, or just text, or icons plus text. Maybe an option like that would be good… let users customize the amount of info according to their comfort level.
Terrific! I have always had a love-hate relationship with the WP admin, this might finally make me love it.
Laurens
The biggest usability issue with the admin bar as it stands is that on mobile it can act in a very erratic way and cover text or not respond well. I think we might need a lot more code to make that work correctly.
I’ve struggled as well with the top right, on WP.com we decided to go with search there.
Until your screenshot I hadn’t noticed how the screen options and help tabs interact there, they’re mostly invisible to me, it’d be interesting to re-imagine those as well.
As with many things, it makes me curious for some data around what’s actually being used in the .com and core toolbars, and of screen options and help pages.
Thank you for giving this some thought!
Great points Matt, thanks for weighing in.
Seeing some data around admin usage (especially grouped by new user, experienced user, advanced user) would be excellent. Being able to make some data-informed mockups would be oh-so awesome. Seeing @lessbloat’s usability testing has already been eye opening to some of the struggles users face.
Personally, I’m really enjoying all the attention the admin is getting in the current releases. Thanks to you and the whole team/community for all the effort at continuing to make the product better.