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:
- They provide a simple way for an end-user to create menus.
- 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.
- Renaming menu items makes it possible to draw a clear overview picture by giving menu items coherent and contextual titles.
- Smooth integration with widgets makes it simple to integrate unlimited menus into a website.
- 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.
- Menus other then the currently displayed menu appear disabled – their design communicates “no point in clicking here”.
- 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.
- 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.
- 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.
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:
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.
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.