Why 99% of All Drop-Down Navigation Menus Must Die!
Thu, January 7, 2010 at 12:50 PM
Paul Cormier in Coding, Design

Cheap Maze ToyRemember 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:

Bad Menu Example

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.

Bad Submenu Example

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.

JavaScript + Menus = bad idea

Another "feature" this product was touting was JavaScript-loaded and AJAX-loaded menus. Simply stated, the reasons you don't want to do this are:

  1. The Google, Bing, Yahoo!, etc, search engine spiders visiting your website to make it searchable are not able to navigate across JavaScript-created menus. (That means AJAX too.) Basically, you're preventing Google from reading the content beyond the home page, so those pages will never appear in search results.
  2. Many site visitors will have JavaScript disabled by default (mostly for security reasons). They will never see your submenus appear at all.

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:

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.

  1. 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.
  2. Avoid relying solely on JavaScript or Flash-generated menus. (Again, search engines can't spider them).
  3. 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.
  4. 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.
  5. Once a submenu is displayed, leave it onscreen until something is clicked.
  6. 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.
  7. Do not use submenus in submenus. Rethink your navigation if using submenus more than one level deep.
  8. 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
  9. 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.

Google Dropdown

HGTV makes good use of large 2D panels to present submenus.

HGTV 2D Panel

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.

BBC Header Navigation

Secondary navigation is relegated to a well designed footer navigation structure. Note the grouping, hierarchy and separate sections used to visually guide the user.

BBC Footer Navigation

Usability Testing

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.



Article originally appeared on (https://www.webmasterymadesimple.com/).
See website for complete article licensing information.