Monday, March 23, 2009

Mega Drop-Down Navigation Menus Work Well

Jakob Nielsen's take on drop-down navigation menus ...

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

To prepare for our upcoming Navigation Design seminar, we've been running user studies of various navigation features. As always, some test poorly. Also as always, the more faddish features — such as tag clouds — exhibit major usability problems.

Luckily, other Web trends fare well in user testing because they have inherently good usability and match user behaviors and goals. Indeed, one particular navigation design — the mega drop-down menu — tested well enough that I want to encourage its wider use.

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.

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)."    (Continued via Jakob Nielsen's Alertbox)    [Usability Resources]

Drop-Down Menu - Usability, User Interface Design

Drop-Down Menu


Anonymous Aaron said...

Really interesting article! I've never experimented with separate headers inside a single drop down but it seems to work really well on the food network website.

8:11 PM  

Post a Comment

<< Home

<< Home