Mega Menus are quickly becoming ubiquitous. So I thought I would share some design considerations as people build these into their website designs, but first I want to distinguish between Mega Menus and traditional dropdown menus. The main difference between the two type of menus is that Mega Menus allow you to surface up sub content and provide the user with structured choices by grouping the content. Mega Menus also give you the opportunity to illustrate choices by including images within the menu itself. Here are some examples of both types of menus:

Traditional Drop Down Menu Example:
 www.imdb.com

Mega Menus Examples
www.nike.com

www.goodmans.ca

Mega Menu Benefits

  • Helpful to quickly scan through the sub sections of an area
  • Visually compare all choices and if content is grouped together meaningfully
  • Easier to locate desired content quickly.

Caveats

Like most interesting things on the web, Mega Menus can be easy to abuse, making them less meaningful and confusing for visitors. Here are some of the things to consider:

  • Avoid complex interaction by the user. E.g. search boxes or input fields. Mega Menus are meant to have a quick screen presence, not replace complex pages.
  • Aim for medium level of granularity with depth of the Mega Menu. It is a fine line: large or long groups require too much time to scan the options; multiple, small groups forces users to try and understand the differences between the various groupings
  • Avoid putting additional text in the Mega Menu (see Goodman example above). Rarely does this type of content offer value to your visitor, and may distract more than help.
  • For grouped content, make sure the labels are descriptive and concise.
    • Links below headers should be alphabetically ordered by columns, not rows, for easy scanning.
    • Make use of colour and typography to distinguish your headings from content
  • Timing/speed is important to consider. Mega Menus that flash in and out too quickly can annoy, but users may think there’s a freeze if menus remain open too long after the mouse has left the menu area. The menu must be smart enough to know that the visitor is scanning the content based on the mouse position and should not close too soon.
  • Duplicating links or labels should also be avoided in Mega Menus. It creates a guessing game causing users to wonder if the two options link to the same content or if it is different content.