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.

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?).

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.

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.

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.

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.