Review of WordPress Menus User Interface

WordPress Menus are a new feature introduced in WordPress 3.0. I think that you have to have had previous experience with creating WordPress navigation elements to appreciate the new menus:

  1. They provide a simple way for an end-user to create menus.
  2. Less plugins are required to get the job done. Plugins that were used for things like selecting and sorting pages & categories have become redundant in many cases.
  3. Renaming menu items makes it possible to draw a clear overview picture by giving menu items coherent and contextual titles.
  4. Smooth integration with widgets makes it simple to integrate unlimited menus into a website.
  5. Custom Post-Types & Custom Taxonomies are automatically integrated – bravo!

Since menus have been introduced I have replaced most of the navigation elements on numerous website projects with menus. This has also exposed some problems with the menus user interface. I have been given permission to use screenshots from my most recent project to demonstrate some of these issues in context.

It seems to me that these issues are more likely to be encountered in CMS oriented websites then in Blog oriented websites. Since WordPress is spreading its wings into CMS – I believe these issues need to be better addressed.

List of Menus

The list of menus is arranged in tabs. In my opinion this is a misuse of the tab metaphor and there are a few problems with it.

  1. Menus other then the currently displayed menu appear disabled – their design communicates “no point in clicking here”.
  2. When there are numerous menus – scrolling in the tab area to find them and is slow and cumbersome. The more menus there are – longer menu names are likely to be used to distinguish between them. This demands even more scrolling – in what feels like a self-defeating effort.
  3. The sort order of the menu-tabs isn’t clear – and took some time to figure out. At first it feels like almost like a random order – which made if frustrating to use.
  4. The collapse buttons on each menu item are sometimes missed due to a very low-contrast with the background – and they too look disabled.

Add Item Boxes

The list of boxes from which is long enough to start with. It gets to be extremely long with custom post-types and custom taxonomies. This is what it looks like with one custom post-type and two custom-taxonomies.

Open just a few of those boxes and the screen quickly becomes disassociated. The menu itself disappears at the top. When I was working on rearranging the menu system my hand and wrist were hurting from way to much scrolling of the screen.

On top of all that – the boxes themselves are very annoying to use.  Take for example the pages box – longer page titles get broken into two lines, hierarchy information is not displayed, even a short list of 15 pages requires scrolling. The “most recent” option is nice but not enough to compensate for the poor overall design.

It’s really great that custom-post and custom taxonomies are automatically added to this interface. It is very useful to have custom-taxonomies there – but considering that regular posts are not included in the screen – I was amused to find my custom post-type included on it. Though it’s theoretically nice to have it I can’t imagine a need to add Yoga teacher to a menu. Maybe there should be an option to set when creating a custom-post type to indicate of it should be added to the menus UI?

Bad Screen Utilization

When looking at the screen in a given context – it comes across how ineffciently it is arranged. For example – suppose I want to add a page to a menu. Green indicates the areas I need to use. Red is unnecessary distratcion. Gray indicates empty and wasted space:

Performance

As a result (or in addition to all that) performance is terrible with this screen. It is slow to load, clicking save seems to take eternity – and I have a feeling is it choking the server with too many unnecessary requests. I believe that a better design can lead to better performance too.

Redesign

I believe that the WordPress Widgets screen is a better and established template that would better serve menu management. Based on that I created this mockup as a starting point – which I believe addresses many of the current shortcomings.

4 Comments

  1. Posted July 18, 2010 at 7:57 am | Permalink

    I think this or something to this effect would be great for improving the menus. I too have found the same issues you have mentioned, and on one site I currently have 4 custom post types and 4 taxonomies, with plans for more of both too. So you can imagine how long the page gets if I were to open them all up.

    I've also found that if you have a reeeally long list of child menu items, say you add a whole list of all the terms of a tax for instance, they are all randomly added, in no particular list. And when the list is longer than the page, you have to scroll to find them, and if you want to put one of the last ones at the top of the menu, well scrolling while dragging is not only slooow but also very hard and annoying with a mousepad.

    There are definite needs for looking more into making the system better in many ways. This is a good start you have. :)

    • Posted July 18, 2010 at 1:19 pm | Permalink

      Thanks for your input jared :)

      Menus are a great beginning. Their design is OK (still not great) for simple sites with one or two menus. On larger & more complex sites – they are still very useful but very unplesant to use. I hope they continue to improve.

  2. Ash
    Posted July 20, 2010 at 12:35 pm | Permalink

    I agree. The new menu management system isn't really good for larger sites. I also hate the fact that it doesn't work with the existing wordpress navmenu management options (Parent page drop down and order on the page edit screen). At the very least these options should be auto hidden if a theme declares support for the new nav menu system. Otherwise its confusing to have a navigation system that has no effect.

    • iamronen
      Posted August 8, 2010 at 5:41 am | Permalink

      Hello Ash,

      I apologize for the late reply – for some reason your comment was flagged as potential spam in the Akismet queue – which is a first for me.

      As I said before, I think that the new management is a great starting point – but needs much more work to be pleasant and useful. It is my number one tool of choice for creating navigation elements (that end-users can continue to modify on their own). There have been some interesting side effects to this:

      I've been able to drop a bunch of widget plugins I was manipulating to get similar results
      I don't need to use or teach end-users to use page order – which always was a pain in the ass to use.
      I do need to get users to understand the difference between menus and widgets – which is a new and challenging teaching hurdle
      I still use parent-page settings to indicate site structure information that I need for proper theme behavior (see Thections- though that doesn't and often times shouldn't carry over to nav-menus

      WordPress is feature bloated and I doubt that will change anytime soon (for many reasons). I've long been wishing for an opportunity to create a simplified version of it. If you know of a good Plugin developer who wants to put some effort into this – I have some ideas (some of them are here) on how this can be achieved.

Post a Comment

Your email is never published nor shared. Required fields are marked *

*
*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>