What's the Deal with Megamenus?

In the last few months, I’ve found myself designing several megamenus for various client projects. For those not familiar with the term “megamenu,” I am referring to the type of navigational drop-down menu characterized by the following:

• Shows all navigational options in a single hover drop-down menu
• Groups navigational options by category
• May use images to assist in navigational experience

Still not clear on what I’m talking about? Here are some examples of great megamenu design:

Starbucks

The White House

Clinique

As a designer, I get excited about the prospect of getting in Photoshop and mocking up a beautiful megamenu because it is an opportunity to design something that looks really sharp and modern. However, there are differing views on how well megamenus work from a user-experience perspective.

A few years ago, Jakob Nielsen, a man the New York Times has named “the guru of web page usability,” declared that megamenus work well from a user-experience standpoint. Nielsen points to the following in support megamenu use:

1. Megamenus show users all navigational options at a single glance, whereas regular drop-down menus hide many user options. Because so many more options are displayed, it is easier for the user to find the keywords for which they are searching. Also, displaying many options at once gets the user to their destination in fewer clicks — and fewer navigational clicks generally equate to better usability.
   
   
   

   The critics say: Displaying too many options at once shifts the burden of navigation from designer to user. Users may be so overwhelmed by their options, they become discouraged and give up their search.

2. Megamenus make categorizing links in one large panel possible. Highlighting the relationship between links through grouping helps users understand their options. Regular dropdown menus provide no opportunity for subgrouping unless a multi-tiered dropdown is used, and these types of complicated dropdowns are known to be difficult to click through.
   
   
   

   The critics say: While displaying links in categories may be useful, providing too many options prevents the designer from emphasizing what links are most important. Limiting navigational options allows the designer to guide users through the site in a deliberate manner.

3. A picture is worth a 1,000 words and use of photos, illustrations and icons in megamenus make navigation even easier. While images aren’t always used in megamenus, in certain cases, they allow a user to make the selection they were searching for in a fraction of the time that reading through options would allow. Additionally, sites like Clinique use megamenu space to highlight featured items rather than use valuable homepage real estate.
   
   
   

   The critics say: Images may distract from the task at hand — displaying the keywords the user had in mind should be the main objective of the designer.

At the end of the day, I have to admit that I like megamenus. I support the megamenu trend not only because foremost usability experts tout their virtues, but because I personally have never had a problem using them. In my experience, they are easy to navigate and I am often wowed by the creative designs and layouts used. Of course they are not a good solution for every website, but for content-heavy, complicated sites the megamenus work well. Or maybe … I just like to design pretty things.

Photo Credit: Jeff Dlouhy

What are your thoughts on megamenus? Please share in the comments below.