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.
Don't Make Me Think!
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.
Steady as she goes Mr Sulu
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.
Can you give me a hint?
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.
Accessibility - Navigating with the Keyboard
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.
Mobile Browsers - I have no 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.
Too many choices
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.
So, are all dropdown menus bad?
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:
- Do I really need all those submenus? Or can I incorporate all those items as subsections of a single page?
- Would all those secondary navigation items work as links in my site's footer section instead?
- Would an accordion-type navigation be more appropriate where submenus stay on the screen until a menu item is clicked?
- Does my navigation work without a mouse? Does it matter?
- Will my navigation work on mobile devices? Does it matter?
- Are my drop-down menus search engine friendly? Do they need to be?
- Does my navigation work on all the major browsers my website visitors use?
Drop-down menu best practices
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.
- For maximum compatibility, ensure that all menu items are text-based links of actual text and not images (which search engines can't read). Use CSS to style your menus.
- Ensure your top-menu item labels hint that submenus are available. An inverted triangle next to the text will indicate to the user that a submenu exists.
- Avoid using onmouseover events (i.e. hovering the mouse) to trigger submenus, since it causes accessibility issues for some. Use a direct click of the top level item to open the submenu.
- Once a submenu is displayed, leave it onscreen until something is clicked.
- Make sure the clickable target area for your menu and submenu items is large enough. The larger the clickable area is, the easier it will be to click. The clickable area should be the entire menu element block, not just the text.
- Do not use submenus in submenus. Rethink your navigation if using submenus more than one level deep.
- Using large two-dimensional drop-down panels can be effective in presenting a site visitor multiple navigation options. See the Jakob Nielsen study Mega Drop-Down Navigation Menus Work Well
- Use icons in menu item labels to provide quick visual cues for the content type. Be careful not to over-clutter with images.
A few good drop-down menu examples
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.