Welcome to Vol.1 of Not Invented Here, a new semi-regular series on trends and innovations in interaction design (IxD).
A staple of the WIMP interface from day one, the once humble dropdown menu got its start as part of Xerox Park’s Alto, was thrust into the limelight with the Apple Lisa, and then popularized by her legendary little sister the Macintosh.
The dropdown menu (aka pulldown menu) saw little innovation for years, save the nested dropdown (aka cascading menu) and the combo-box, a marriage of the dropdown menu and a text input field.
Then, with the proliferation of rigidly hierarchical websites and widespread adoption of JavaScript compliant browsers over the past decade, the dropdown menu became a natural addition to the standard global nav bar, often handsomely styled to match a site design. Mouse over a section, see its subsections, and jump right to one without ever seeing the parent page.
And of course since websites hierarchies often went deeper than one level, dropdowns came along for the ride, evolving into the ubiquitous and fine-motor-skill-taxing nested dropdowns that are easy to create yet almost impossible to execute well.
Recently however, the dropdown has gotten a steroid injection in the form of the not-so-humbly named mega dropdown.
Big, two-dimensional drop-down panels group navigation options to eliminate scrolling and use typography, icons, and tooltips to explain the user’s choices.
— Jakob Nielsen, Mega Drop-Down Navigation Menus Work Well
Of course writing about mega dropdowns is like dancing about architecture, so here are a few examples you can link to and try yourself:
Mega dropdown on Gateway.com (as of Sept. 10, 2009)
Mega dropdown on EA.com (as of Sept. 10, 2009)
Read on for some analysis of mega dropdowns, a few guidelines on how to use them, and a couple of links to help you get started creating your own.
