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.

Benefits of Mega Dropdowns

From a usability and design perspective, mega-dropdowns (and their horizontal counterpart mega flyouts) seem to be nearly all upside.

On the one hand, they have many of the communication and wayfinding advantages of a traditional dropdown — teaching users about the content within a section and allowing for accelerated access to that which is deemed most interesting. Likewise, provided they’re built correctly, it’s a progressive enhancement so you shouldn’t even know you’re missing it if your browsing environment won’t support it.

On the other hand, some important differences give mega-dropdowns a decided advantage over standard dropdowns. For starters, mega-dropdowns behave more like dialogue boxes, presenting all of their content in a single view which makes them more usable on a variety of levels, from being more scannable to having simpler operators and methods.

Flattening the organization of user choices can greatly improve the scannability of the user interface… The dialog box enabled the software designer to encapsulate all the subchoices of any menu item within a single, interactive container.
— Alan Cooper, About Face 3

Beyond those benefits, a mega-dropdown can be filled with text, images, forms, and pretty much anything else you might like. And they can be styled to your hearts content with typographic treatments and organizational structures well beyond what’s possible in a standard dropdown menu.

Keep it Simple, for the Most Part

Just because you can doesn’t mean you should, and according to ubiquitous usability pundit Jakob Nielsen (who despite historically being slow to embrace change has endorsed mega-dropdowns) we should tread cautiously with what we choose to pack into these menus.

Nielsen writes in his Alertbox from March 23, 2009:

Just because you can put anything into them doesn’t mean that you should. In particular, avoid GUI widgets and other interface elements that involve more advanced interaction than simply click-to-go.

Like many of Nielsen’s proclamations, this one ignores the relationship between rules and context, focusing on the former at the expense of the latter.

Basecamp Project Switcher (as of Sept. 10, 2009)

It’s easy to imagine contexts where GUI widgets would be perfectly appropriate in a mega dropdown, like the project switcher from 37Signals Basecamp project management app seen at right. As you can see on their blog post about it, the final solution was extensively rationalized.

That said, there does seem to be a limit to just how much you can pack into a mega dropdown. Take this one for example, which I recently proposed for a client in an effort to create miniature section landing pages right off the navbar…

Example of a complex mega dropdown

These were rejected for being “too busy” for the audience, and perhaps rightfully so, but key parts of this solution made their way on to other areas of the site as they were well received during a 3^rd party expert usability inspection and it appears they’re being equally well received by real users.

Some Parting Thoughts on Mega Dropdowns

So to summarize, mega dropdowns are a great technique for making your global navigation work harder, provided they’re a good fit for the context of your project and designed with your specific users in mind.

Have you implemented mega dropdowns? Or decided against them for one reason or another? Post a comment below with a link to your site or sound off on why you chose to avoid them.

And if you liked this post, don’t forget to grab our RSS feed or sign-up for email updates so you you’ll know when the next volume of Not Invented Here comes online.

P.S. If you’re a developer anxious to code some mega-dropdowns, Sitepoint has a nice jQuery mega-dropdown tutorial that’ll give you a jumpstart. But heed caution, their solution leaves plenty to be desired in the accessibility department. Also consider taking a look at the qTip jQuery tooltip plugin which might also make its way into your solution.