WordPress 2.7 Administration UI Wireframes

Automattic have published WordPress 2.7 user interface wireframes (.pdf) that list and explain the changes planned for the next major release of WordPress.

WordPress 2.7 User Interface proposal (version 002)

WordPress 2.7 User Interface proposal (version 002)

I think there are only two things wrong with the purposed user interface and the information architecture:

Main navigation menu

WordPress has always been regarded as a simple and easy platform (software) for publishing blogs and by blogs I mean articles with photos, pictures and videos posted in chronological order. Why would one need eleven top level navigation items to do just that. I am referring particularly to Settings, Tools and Plugins menus items. What if a plugin creates a tool that needs to be configured? On wp-testers mailing list Stephen Rider mentions another set of reasons why it may not work.

Breadcrumb Navigation

Why is there a need for breadcrumb navigation if the main menu is only two levels deep. More importantly, by clicking on the top level navigation item (in the left side menu) one is only able to expand and collapse child items of that menu and not go to a particular subsection. So the question is — where will the previous level breadcrumb navigation item lead to? Will it be Add New or Edit for Posts, for example?

The blog name will be followed by breadcrumb navigation that shows the current screen and its parent section as well as a link to the Dashboard — 2.7 Wireframes v0.02, page 4

If it is placed there only for saving more of the vertical space by moving section titles somewhere else, then be it — lets use that space for section titles and not as another (action) area with links.

Javascript-only Favorites Menu

This is a new features which somehow correlates with my suggestion to have the My Tasks ribbon at the top of the dashboard where users can place links to administration sections that they use the most. The idea for this task bar came from the fact that all WordPress user have their own set and sequence of tasks which they do after logging in, and it is almost impossible to predict them. Here is the description of the Favorites Menu from the wireframes:

To the right is a favorites menu that expands on hover (JavaScript-enabled browsers only). Currently the menu is populated with screens most frequently accessed by users: Add new post, Comments, Stats (.com only), Plugins (.org only). Ultimately, items in this menu will be user-defined.

The question is — why make it Javascript only?

I think this is simply an unintended mistake and someone will turn it into an accessible CSS driven drop-down menu.

However, there is another option — place the favorites items under Dashboard in the main menu.

Bonus point

Why do they use Flock on a Mac?

Serious Conclusion

I am fully aware that this is only a mock-up and not the final description of how the WordPress will look and function in future. Therefore this article is intended as a suggestion and not as an attack on those who are working hard to make WordPress great and fun for both experienced and first time publishers (and not only bloggers).

I also understand that a single opinion can not measure up to the precise results of the user testing that was conducted to better understand how different parts of the administration section need to be organized and labeled.

To do the right thing it is important to consider everyones opinion and let them know that they have been heard and their ideas considered. Only by having an open mind and through clear discussion one can come to the right conclusions. I am almost certain that guys and gals at Automattic have their ears wide open.

Use Contact Form 7 to collect business leads and enquiries? I created Storage for Contact Form 7 plugin which stores them safely in WordPress database.

Get it now for only $18 →

One Comment

  1. Jane Wells says:

    Hi Kaspar. I posted the wireframes on the development blog, so thought I would respond to a couple of your concerns. I’ve appreciated your ongoing posts about the upcoming UI, and while the decisions we’ve made in some cases differ from the choices you would have made, please believe we’re trying to serve the needs of the widest audience possible. So, on to your points/questions/suggestions.

    Breadcrumb navigation. The breadcrumb is largely in anticipation of the ability to completely collapse the left hand column down to a thin remnant (example on last page of wireframe deck), making the working area as big as possible. The breadcrumb also removes the need for those large screen headings identifying the screen you’re on, since the breadcrumb will do that in less than half the space once the header is styled. So ultimately it’s all in pursuit of more work area, less window dressing. If there was one overriding goal in the design of 2.7, it was reduce scrolling and give the user control. I do think 2.7 goes a long way toward this end result.

    Favorites menu. It’s funny, I did see the mockup you did a while back with the “My Tasks” section, and we were talking internally about how funny it was that it mirrored the favorites function that users had suggested/requested during user testing in May. (And I really liked your use of green as an accent color! Potentially another interface prediction on your part….) I can’t answer the why-JavaScript-only question (I’ll leave that to the developers), but the placement is also in anticipation of a collapsed left menu, allowing the favorites, like the breadcrumb, to enable navigation to relevant screens even when the work area is maximized this way. Admittedly, this is an experiment, so we’ll see how people like it. So far when I’ve shown it at WordCamps, people have been pretty psyched about it.

    Bonus point: Flock on Mac? Inside joke. :) I actually use Firefox 3 (though I’m not a huge fan of the redesigned tabs, I have to say), though I also check things in other browsers when troubleshooting for someone having a problem with their blog. Whatever the browser wrapper, though, the reason the wireframes are shown in a browser at all (usually they’d just be shown without the wrapper) is to ensure that we allowed enough room for normal browser chrome, in terms of height and width.

    Serious conclusion. We definitely do have our ears open, and I appreciate that you assume we are listening. We are! In fact, we created the wireframes specifically in response to the community’s request for something to look at. I know some people may not be fans yet of the interface change, but as you said, it is based on some very actionable feedback that we received during testing, and is an attempt to try and solve those problems. Many of the features and labels have come directly from WordPress users. Having a huge community of users is a blessing and a curse sometimes, because inevitably there will be differing opinions and some people will wish different decisions had been made, even though we’re doing our best to accommodate a wide variety of user behaviors. If the response we’re seeing at WordCamps is anything to go by, 2.7 is going to solve a lot of the issues that were slowing people down.

    Thanks for the feedback!

Leave a Reply