Subscribe to Updates

RSS RSS feed    What is this?

Email By email:

Privacy Assured more »

Topics

Search This Site

Follow on Facebook

 

« Cheap Meat Never Makes a Good Soup - A Tale of Two Web Developers | Main | How to Insert Social Bookmarking Buttons into a Squarespace Website »
Thursday
Jan072010

Why 99% of All Drop-Down Navigation Menus Must Die!

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:

  • 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?
  • Will the navigation work with JavaScript disabled? With Flash disabled?
  • 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.

  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.

 

 

References (46)

References allow you to track sources for this article, as well as articles that were written in response to this article.
  • Source
  • Response
    Response: buy
    Why 99% of All Drop-Down Navigation Menus Must Die! - Webmastery Made Simple -
  • Response
    Why 99% of All Drop-Down Navigation Menus Must Die! - Webmastery Made Simple -
  • Response
    Why 99% of All Drop-Down Navigation Menus Must Die! - Webmastery Made Simple -
  • Response
    Response: 123bee
    Why 99% of All Drop-Down Navigation Menus Must Die! - Webmastery Made Simple -
  • Response
    Why 99% of All Drop-Down Navigation Menus Must Die! - Webmastery Made Simple -
  • Response
    Why 99% of All Drop-Down Navigation Menus Must Die! - Webmastery Made Simple -
  • Response
    Response: United Cash Loans
    Why 99% of All Drop-Down Navigation Menus Must Die! - Webmastery Made Simple -
  • Response
    Why 99% of All Drop-Down Navigation Menus Must Die! - Webmastery Made Simple -
  • Response
    Why 99% of All Drop-Down Navigation Menus Must Die! - Webmastery Made Simple -
  • Response
    Why 99% of All Drop-Down Navigation Menus Must Die! - Webmastery Made Simple -
  • Response
    Why 99% of All Drop-Down Navigation Menus Must Die! - Webmastery Made Simple -
  • Response
    Why 99% of All Drop-Down Navigation Menus Must Die! - Webmastery Made Simple -
  • Response
    Why 99% of All Drop-Down Navigation Menus Must Die! - Webmastery Made Simple -
  • Response
    Response: KathaAlfred
    Why 99% of All Drop-Down Navigation Menus Must Die! - Webmastery Made Simple -
  • Response
    Why 99% of All Drop-Down Navigation Menus Must Die! - Webmastery Made Simple -
  • Response
    Response: Hoc Tieng Duc
    Why 99% of All Drop-Down Navigation Menus Must Die! - Webmastery Made Simple -
  • Response
    Response: SEO Sydney
    Why 99% of All Drop-Down Navigation Menus Must Die! - Webmastery Made Simple -
  • Response
    Why 99% of All Drop-Down Navigation Menus Must Die! - Webmastery Made Simple -
  • Response
    Why 99% of All Drop-Down Navigation Menus Must Die! - Webmastery Made Simple -
  • Response
    Why 99% of All Drop-Down Navigation Menus Must Die! - Webmastery Made Simple -
  • Response
    Response: www.slideshare.net
    Why 99% of All Drop-Down Navigation Menus Must Die! - Webmastery Made Simple -
  • Response
    Why 99% of All Drop-Down Navigation Menus Must Die! - Webmastery Made Simple -
  • Response
    Why 99% of All Drop-Down Navigation Menus Must Die! - Webmastery Made Simple -
  • Response
    Response: www.mylifetime.us
    Why 99% of All Drop-Down Navigation Menus Must Die! - Webmastery Made Simple -
  • Response
    Response: www.scoop.it
    Why 99% of All Drop-Down Navigation Menus Must Die! - Webmastery Made Simple -
  • Response
    Why 99% of All Drop-Down Navigation Menus Must Die! - Webmastery Made Simple -
  • Response
    Why 99% of All Drop-Down Navigation Menus Must Die! - Webmastery Made Simple -
  • Response
    Why 99% of All Drop-Down Navigation Menus Must Die! - Webmastery Made Simple -
  • Response
    Response: groupwise inc
    Why 99% of All Drop-Down Navigation Menus Must Die! - Webmastery Made Simple -
  • Response
    Response: Joseph Chinnock
    Why 99% of All Drop-Down Navigation Menus Must Die! - Webmastery Made Simple -
  • Response
    Response: Joseph Chinnock
    Why 99% of All Drop-Down Navigation Menus Must Die! - Webmastery Made Simple -
  • Response
    Response: D D Photographics
    Why 99% of All Drop-Down Navigation Menus Must Die! - Webmastery Made Simple -
  • Response
    Response: D D Photographics
    Why 99% of All Drop-Down Navigation Menus Must Die! - Webmastery Made Simple -
  • Response
    Why 99% of All Drop-Down Navigation Menus Must Die! - Webmastery Made Simple -
  • Response
    Why 99% of All Drop-Down Navigation Menus Must Die! - Webmastery Made Simple -
  • Response
    Response: Informacje
    Why 99% of All Drop-Down Navigation Menus Must Die! - Webmastery Made Simple -
  • Response
    Response: youtube
    Why 99% of All Drop-Down Navigation Menus Must Die! - Webmastery Made Simple -
  • Response
    Response: 刀塔传奇下载
    Why 99% of All Drop-Down Navigation Menus Must Die! - Webmastery Made Simple -
  • Response
    Response: hijack back button
    Why 99% of All Drop-Down Navigation Menus Must Die! - Webmastery Made Simple -
  • Response
    Why 99% of All Drop-Down Navigation Menus Must Die! - Webmastery Made Simple -
  • Response
    Response: pc game
    Why 99% of All Drop-Down Navigation Menus Must Die! - Webmastery Made Simple -
  • Response
    Why 99% of All Drop-Down Navigation Menus Must Die! - Webmastery Made Simple -
  • Response
    Why 99% of All Drop-Down Navigation Menus Must Die! - Webmastery Made Simple -
  • Response
    Why 99% of All Drop-Down Navigation Menus Must Die! - Webmastery Made Simple -
  • Response
    Response: comprar una tablet
    Why 99% of All Drop-Down Navigation Menus Must Die! - Webmastery Made Simple -

Reader Comments

There are no comments for this journal entry. To create a new comment, use the form below.

PostPost a New Comment

Enter your information below to add a new comment.

My response is on my own website »
Author Email (optional):
Author URL (optional):
Post:
 
Some HTML allowed: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <code> <em> <i> <strike> <strong>