User Experience: Megamenus

Megamenus are big menus.

I mean, as far as details go, they’re a bit more complicated than that.  But the essence of a megamenu is that it’s a Great. Big. Layered. Menu.

The more precise definition of megamenus is this: Megamenus are panels of links revealed by a user interaction. These panels are bigger, wider, and hold much more information than the menus you’re used to seeing.

Why Use Them?

If you have a content-heavy website, chances are that you have many different categories of information that users will need to be aware of and choose from.  One layer of information may not cut it because there are just too many options of equal importance that a user needs to get to easily.

Megamenus, if designed and programmed properly, can make it easier for your users to make those decisions, and give them a fast-forward path to their destination. Users don’t have the time to sift through your site, discover all of the options, and then carefully choose among them. Giving users an accurate and thorough set of links to evaluate means they don’t have to explore your whole site to find what they want; it also prevents them from having to pull up a model of their options from within their own working memory. I promise that they won’t forget that there is a section called “Scientific Research” because it’s directly in front of them.

Note the words easier and easily. Choosing among many options requires mental effort of users.  They’ll leave your site if you make things hard for them, so make it easy for them. Basic UX. Learn it; love it.

What It Means for You, the Designer

Again, ease of use is going to be what drives you, here. Megamenus provide a design space where multiple choices can be visually grouped. This grouping helps users make sense of the options available to them.

A big, unlabeled, unordered pile of links will just confuse and frustrate your users. 

Vertical menus don’t offer the layout flexibility. When vertical menus contain a lot of items, they can begin to feel overwhelming for many users.

While designing and implementing megamenus, you can include icons, imagery, and even user controls like checkboxes and search fields.   A warning, though: Triggering the menu from a user’s click in your megamenu is preferable to a hover. Activating menus by hover can cause a sense of instability that adds to user stress while attempting to interact with inputs / controls. Have you ever hovered over a menu item and tried to hover over to the sub-menu that pops out of it, only to have everything disappear? Horrible!

Use this opportunity to find the balance between information and infodump.  Make it interesting rather than overwhelming.

An example of a mega menu that uses click, not hover, to reveal is NPR.org (see the ‘Programs’ and ‘Listen’ items.)

Articles for Further Reading

Mega Menus Work Well (Jakob Nielsen)
http://www.nngroup.com/articles/mega-menus-work-well/

Designing Dropdown Menus: Examples and Best Practices (Smashing Magazine)
http://www.smashingmagazine.com/2009/03/24/designing-drop-down-menus-examples-and-best-practices/

Counterpoint

6 Epic Forces Battling Your Mega Menus (Jared Spool)
http://www.uie.com/articles/mega_menus/