Skip to main content

Mega Drop-Down Navigation Menus Work Well (Jakob Nielsen's Al...

Popularity Report

Total Popularity Score: 0
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...

Rank

Bookmark History

Saved by 39 people (0 private), first by anonymouse user on 2009-03-23


Public Sticky notes

Mega Drop-Down Navigation Menus Work Well

Highlighted by djiezes

Big, two-dimensional drop-down panels group navigation options to eliminate scrolling and use typography, icons, and tooltips to explain the user's choices.

Highlighted by zachharkey

Indeed, one particular navigation design — the mega drop-down menu — tested well enough that I want to encourage its wider use.

Highlighted by zachharkey

Given that regular drop-down menus are rife with usability problems, it takes a lot for me to recommend a new form of drop-down. But, as our testing videos show, mega drop-downs overcome the downsides of regular drop-downs. Thus, I can recommend one while warning against the other.

Highlighted by zachharkey

Given that regular drop-down menus are rife with usability problems, it takes a lot for me to recommend a new form of drop-down. But, as our testing videos show, mega drop-downs overcome the downsides of regular drop-downs. Thus, I can recommend one while warning against the other.

Highlighted by jeanphony

a new form of drop-down

Highlighted by easytouch

mega drop-downs overcome the downsides of regular drop-downs

Highlighted by easytouch

As the following screenshots show, mega drop-downs have the following characteristics:

  • Big, two-dimensional panels divided into groups of navigation options
  • Navigation choices structured through layout, typography, and (sometimes) icons
  • Everything visible at once — no scrolling
  • Vertical or horizontal form factors when activated from top navigation bars; when activated from left-hand navigation, they might appear as mega fly-outs (not shown).

Highlighted by abrandt

mega drop-downs have the following characteristics:

  • Big, two-dimensional panels divided into groups of navigation options
  • Navigation choices structured through layout, typography, and (sometimes) icons
  • Everything visible at once — no scrolling
  • Vertical or horizontal form factors when activated from top navigation bars; when activated from left-hand navigation, they might appear as mega fly-outs

Highlighted by djiezes

Screenshot of navigation menu from a site to order custom-made envelopes

Highlighted by jeanphony

For bigger sites with many features, regular drop-down menus typically hide most of the user's options. Yes, you can scroll, but (a) it's a pain and (b) scrolling down hides the initial options. As a result, you can't visually compare all your choices; you have to rely on short-term memory. People have enough on their minds, and messing with short-term memory reduces their ability to accomplish their tasks on your site. Mega drop-downs show everything at a glance, so users can see rather than try to remember.

Highlighted by toffern

Mega drop-downs show everything at a glance, so users can see rather than try to remember.

Highlighted by abrandt

Mega-drop-downs let you visually emphasize relationships among items

Highlighted by abrandt

Mega drop-downs make it easy to use icons and pictures when appropriate.

Highlighted by abrandt

Speed is essential to making any user interface feel responsive. Interface elements must render within 0.1 seconds to suggest physicality and make users feel like a display's changes are a direct result of their actions

Highlighted by djiezes

Thus, the timing should be:

  1. Wait 0.5 seconds.
  2. If the pointer is still hovering over a navbar item, display its mega drop-down within 0.1 seconds.
  3. Keep showing it until the pointer has been outside both the navbar item and the drop-down for 0.5 seconds. Then, remove it in less than 0.1 seconds.

Highlighted by abrandt

Don't make response time too fast, though: the mouse should remain stationary for 0.5 seconds before you display anything that's hover-dependent, such as a mega drop-down or a tooltip. Violating this guideline will make the screen flicker insufferably when users move the mouse. Only after 0.5 seconds of resting the pointer on a navbar item can you assume that a user actually wants to see its associated drop-down.

Highlighted by zachharkey

Don't make response time too fast, though: the mouse should remain stationary for 0.5 seconds before you display anything that's hover-dependent

Highlighted by djiezes

The main grouping guidelines are:

Highlighted by djiezes

Chunk options into related sets

Highlighted by djiezes

Keep a medium level of granularity. Don't offer huge groups with numerous options that require extensive time to scan

Highlighted by djiezes

Use concise, yet descriptive labels for each group.

Highlighted by djiezes

Order the groups.

Highlighted by djiezes

Show each choice only once. Duplicating options makes users wonder whether the two occurrences are the same or different. Also, redundancy makes the entire interface bigger and more cumbersome.

Highlighted by djiezes

heavyweight interaction area

Highlighted by kbtykr

Keytips are an alternative to access keys

Highlighted by kbtykr