Yikes: mega drop-down navigation actually works pretty well

Published Wednesday, 25 March 2009 12:41AM CST by in Internet

0

UsabilityHere’s the shocker for the week. Usability and human factors expert Jakob Nielsen has found that mega drop-down navigation panels actually work for dense or complicated subnavigation structures. This is especially surprising because, as Nielsen showed earlier, regular drop-down menus are a usability nightmare.

Mega drop-downs (when activated from a horizonal primary navigation structure)—or mega fly-outs (when activated from a vertical primary navigation structure) are characterized by two-dimensional panels divided into groups of elements that are structured through layout or typography. To be effective, mega drop-downs and mega fly-outs have to contain the entire subnavigation structure without scrolling. These elements can optionally use link titles to emulate tooltips.

Nielsen uses foodnetwork.com as a mega drop-down example:

Mega drop-down navigation menu

Mega drop-downs show everything at a glance, allowing the user to employ short term memory to form a mental map of the primary navigation structure instead of having to remember the complex secondary navigation elements.

Nielsen’s findings indicate that interface elements—including mega drop-downs and mega fly-outs—must render within 0.1 seconds reinforcing the notion that a user’s actions are the direct cause of the changes on the screen and that the user—not the computer—is in control. In contrast, the response time shouldn’t be too fast. Anything that’s hover-dependent should require the user to maintain the mouse position for 0.5 seconds before changing the screen. Nielsen provides a recipe for proper implementation of mega drop-downs and mega fly-outs:

  1. Wait 0.5 seconds
  2. If mouse pointer remains over a navigation element, display it’s mega drop-down or mega fly-out within 0.1 seconds
  3. Retain the mega drop-down or mega fly-out display until the mouse pointer is outside both the navigation element and the drop-down/fly-out for 0.5 seconds. Then remove it within 0.1 seconds

Navigation elements contained within the mega drop-down or mega fly-out should be chunked into related sets based on a card sort of the users’ mental model of the options. The sets should be ordered by workflow, importance, or frequency of use.

0 responses. Comments closed for this article.