Remember as a kid getting one of those little plastic toy mazes as a cheap prize at a birthday party? You know, the kind with the cardboard back and malformed little ball? Basically, they were not fun at all because even with excellent manual dexterity, you couldn't make the ball go where you wanted because of the poor manufacturing quality.
That's what many of the "on-hover" drop-down website navigation menus remind me of. By "on-hover" I mean those websites where you float your mouse over a menu item, and submenus appear for you to select from.
In this post, I'll cover the reasons why in most cases, you should trash that on-hover navigation from your website just like you trashed that 5 cent plastic toy.
Not only is that the title of Steve Krug's excellent book on web usability, but it also applies to the design of the navigation for your website.
For example, how often have you visited a site where you hover your mouse over the first menu element and sub-elements appear. Now you need to stop and think. Can I click the top-level element? Or is that just a place-holder to open the sub-menus?
Confusing the site visitor is always bad. Period. When you click a navigation item, you expect new content to appear.
As long as we're on the topic of cheesy kids games, remember the game "Operation"? You had to have a steady hand to "operate" on your "patient". A loud buzzer would sound and your patient's nose would flash if you touched the sides.
So unless you want to play games with your site visitors, why do I keep seeing these narrow, elongated submenus where you have to exactly follow it with your mouse to get to the last submenu item? And, if your mouse falls outside the submenu, it disappears (or a different menu appears) and you need to start again at the beginning.
It's pretty obvious that you shouldn't require your site visitors to perform dexterity tricks to get to your content. It's a sure-fire way to annoy them.
In researching the subject, I was lucky to find a perfect bad example of an on-hover navigation menu. It was being sold as a code package to easily add "deluxe" menus to your website. Here is a picture of the sample menu they used to describe and demonstrate their product:
OK, a basic tab menu. Typically, when encountering a tab menu, you expect the content below the tab area to display what was promised by the tab label. OK, so I'll click "Product Info" to get Product Info, right?
Wrong! Clicking "Product Info" doesn't do anything. However, when my mouse hovers over the tab, a submenu appears. (I guess they haven't read Steve Krug's book.)
Not only that, but the submenus have even more submenus! See below.
I had to cut off that last submenu, because it was so long it scrolled past the edge of my screen. So here I am clicking and playing the "maze" game. I'm three levels deep and I still don't know which versions of Internet Explorer are supported.
Below this, they also listed some "features" which actually are reasons why you DON'T want to use this type of navigation code.
For various reasons, not all of your site visitors will have a mouse. This product says "Use Ctrl+<F2> to access the top menu!". That's not accessibility! Who would know to use that keyboard combination? Then, how do you access the submenus? Not surprisingly, when I hit Ctrl+<F2> on my keyboard, nothing happened.
At it's simplest, you should be able to tab through the available links/menus items on a web page to select the item you want, without using a mouse.
Ever increasing numbers of people are using mobile devices to access the web. Almost all mobile devices do not support the "onmouseover" event that triggers these hovering submenus to appear.
Don't leave your mobile visitors stranded.
BTW, Flash-based menus also suffer the same fate for the same reasons listed above. Search engine spiders cannot follow flash-based menus, and many users are beginning to block Flash altogether by default.
Another reason to avoid submenus is that the choices simply start becoming overwhelming. Give your users too many choices and they don't choose any at all.
This was demonstrated in an oft-quoted supermarket experiment conducted by economists Mark Lepper and Sheena Iyengar. In this experiment, they set up two tables in a supermarket to allow the shoppers to sample and purchase different flavors of jam. One table was set up with 24 flavors of jam, the other with 6. Of the shoppers who visited the table with 24 flavors, only 3% went on to buy jam. Of the shoppers who visited the table with 6 flavors, a whopping 30% bought jam!
This seems to indicate that when faced with too many choices, we choose not to choose at all, or at least get diverted from the primary task at hand.
No, they're just difficult to design and implement correctly.
As per the title of this site, whenever you can, SIMPLIFY! I often see drop-down menus implemented when they aren't even necessary. If you find yourself considering using a drop-down menu for your navigation, here are some questions to ask yourself:
If you find that your site's content and workflow indicates that drop-down menus would be appropriate, here are some best-practices to consider to ensure a good user experience with your navigation.
Google's uses a clean, simple and obvious submenu. Note that the item labeled "even more »" does not open another submenu, but instead opens a new page with multiple links display the additional options.
HGTV makes good use of large 2D panels to present submenus.
The BBC website avoids using drop-down menus at all! Very simple top-level navigation does not interfere with the site visitor getting straight to the news.
Secondary navigation is relegated to a well designed footer navigation structure. Note the grouping, hierarchy and separate sections used to visually guide the user.
Lastly, it's really simple to perform at least some basic usability testing of your navigation. Simply observe a test subject's behavior when prompted to perform a given task on your website. If the user frequently selects the wrong item, or takes a longer than expected time to complete the task, it may be time to revisit and simplify your navigation.
If you've encountered particularly poor or particularly well done drop down menus, please add a comment to this post with the site's url.
If you'd like me to evaluate your navigation, check out the Free Website Evaluation offer we have going on our website.