Allground - Responsive Fullscreen Backgrounds for WordPress with images, YouTube videos, Google Maps and self hosted videos

Why is the WordPress 3.0 Menu Management design inconsistent

One interesting new feature coming up in WordPress 3.0 will be the Menu Management as we discussed earlier. This feature will allow any user to configure on the WP Admin a new menu including items such as pages, categories and links. Now, as much as I love this new feature, since it will make non-tech savvy users life much easier, the design is inconsistent with the rest of the WP Admin interface. I’ve given it a shot and designed how it could look to follow the standard styling of the WP Admin interface.
The Menu Management feature is being discussed on the WordPress trac and is already added to the trunk version of WP 3.0 that you can download by browsing the source.

correct-menus-0

This is the current look of the Menus section (on Appearance \ Menus). These code has been contributed by the excellent WordPress themes provider, WooThemes, who created it for their own themes. Now, if this was only present on some theme that is not part of the WordPress core, but given that it will be included as part of the core, it is neccesary for it to follow the look and feel of the rest of the WP Admin interface.

Now, you can tell just by looking at it what are the points not matching the rest of the admin interface: the rows, the label indicating what kind of menu item it is, the icons on the row for editing, deleting and launching the item, the plus sign next to each label, and the fact that the blue button is being used for adding particular item while it should be used for the Save All Changes button. There are some other things that look odd, like the redundancy of the Add Menu box title and the Add Menu button, the Add to menu label (where else will you be adding it?).

correct-menus-1

Look at the first draft. I’ve applied the standard style of WP Admin for rows, including (although it might not be neccesary) the bulk actions drop down and the column display what kind of menu item it is. What is more important, the icons are gone. They must go away because WP Admin is not using icons anywhere else. The standard is that the actions about a particular item are displayed below the item title when you roll over the mouse. The blue button style is now applied only to the general “Save all change”, while the redundant “Add to menu” in Add a Custom Url (URL in fact), has been replaced by a simple Add Link. The plus icon is replaced by a Add Page button.

correct-menus-2

This, however, doesn’t look good yet. If we have many pages or categories being displayed we will have a lot of big fat buttons creating some serious visual noise. In the following image, I’ve changed only the category box so you can compare it with the page box. The idea would be to display only the links of each category and add each one as it is clicked, pretty much as tags are added to a post. If there are a lot of categories, we could type the name of the category to include it. As I said, very similar to adding tags to a post.

correct-menus-3

Now, let’s change the boxes in the next image to resemble selecting a category for a post. The pages or categories items are added to the menu as we click on their respective checkbox. If we uncheck it, they are removed. That would make somehow the Remove action below the item title redundant. I’ve also changed the order of the boxes to float up the boxes that will be used the most. Chances are that we will not be adding menu after menu so it could be at the bottom (the boxes are currently not draggable and they can’t be collapsed). We still have the input field so you can type and press enter or click the proper button to have the category or page added to the menu.

correct-menus-4

One more thing was bothering me: the fact that the column hosted boxes to add a menu and to add items to that menu. I mean, we have mixed actions on the column. Maybe it’s all for the sake of brevity but it could be enhanced. In this image I’ve moved the box to add a new menu below the menu currently being edited. So now we have menus on the main area and things to add to those menus on the left.

I didn’t wanted to touch the menu list displayed at the top, next to Menus, but it could certainly be displayed in the same way than widgets: open a menu and drop things into it. In this way, the add new menu action could also be added next to the Menus section title, displaying a small box to enter the menu name when clicked.


“Why is the WordPress 3.0 Menu Management design inconsistent” received 9 comments! Add yours.

  1. Heather February 24th, 2010

    When do you think 3.0 will be released?

  2. Elio February 24th, 2010

    Heather, according to the last post on WordPress official blog, the release date is due on early May. The feature freeze is on Monday, March 1, meaning that no other feature will be added to WP 3.0. From that point on, the developers will focus on bug fixes and keeping things tidy.

  3. Doug Stewart February 24th, 2010

    Why not submit your ideas to the Trac ticket? I do think you’re far more in-line with the default look and feel of the WP admin interface…

  4. Elio February 24th, 2010

    Indeed, I have submitted it to the proper ticket on the WordPress Trac :)

  5. Jenna Molby February 25th, 2010

    I noticed this too. Great post Elio!

  6. Darryl Holtby March 12th, 2010

    I agree with the inconsistency of the menu feature. I think this is do to the fact that it is an incorporation of WooNav. They need to improve it. Maybe add some megamenu features allowing div wraps around areas would be nice.

  7. Elio March 12th, 2010

    The menus are still being worked but Jane posted a few days ago “I just looked at the updated menus and it looks like some things are going in a different direction than I thought they were going (ex. popup for editing instead of slidedown postbox like we use everywhere else). I want to focus on getting the UI back on track for consistency.”
    They will fix it for sure before releasing 3.0

  8. Judi Knight March 31st, 2010

    THe menue looks different since they worked out a deal to use a nav menu creator functionality already developed by the guys at Woo Themes, on the “don’t reinvent the wheel”.

  9. Elio March 31st, 2010

    That’s true, however, the UI team at WordPress already stylized everything and now the menu management area looks perfectly integrated on the overall WordPress interface. You can download the WordPress 3.0 (currently unstable) from WordPress Trac and take a peek at the new interface.

Leave a comment