Clients often ask for mega menus (those extra-large menus that offer a large number of links to site pages) as a way of providing quick access to deeply buried pages or data on their site.

Mega menus have been a trend for years.  But they’re not for every site, and can be misused.

So, when should you use mega menus and when should you not?  Let’s look at a few examples.

A Mega Menu that Works

Nordstrom’s website (shown above) is a good example of how mega menus can help the user navigate a site. The mega menus allow quick access not just to any department (such as “Women” or “Juniors”), but a level down from that (“Jeans”),  without having to navigate multiple pages or type in a search term.

The Nordstrom.com mega menus thus provide quick links to destination pages and deep site content. They have made the site navigation that much quicker and more efficient, eliminating several steps. On the Nordstrom.com site, each header (such as “Juniors”) is still active – the user can also jump to that page, instead, if she doesn’t find what she’s looking for on the menu itself.  This is clean and useful navigation.

Mega Menus that Don’t Work

Less successful examples of mega menus are the result of strategic design and implementation errors.

Overly Large Mega Menus

One example is this can be found on Starbucks.com

Here, the mega menus feel like they’re taking  over the entire user interface  – which is overwhelming (and can be confusing) for the user and will make the experience difficult on a smaller device.  In addition, large menus like this present simply  too much choice for the user. If a mega menu has so much content it blocks out the page, it has in a sense defeated its own purpose.  A better approach here would perhaps be to simply to go to a single page on the site for all the information.

Hair Trigger Interactivity

Another example of difficult-to-use mega menus is Navy.com. Here, the problem is how much dexterity is expected of the user. The user needs to hover over links, some of which expand to the right in cascading layers. The worst case scenario here is three layers deep, which is a frustrating user experience unless you’re very adept.

Hover has problems with any drop-down menu, but with mega menus, the problem is increased and feels overwhelming. It’s easier on the user to simply click, not hover.  In the case of the Navy website, that would mean not diving as deep into the content. One has to question whether a mega menu is therefore necessary – perhaps a simple drop-down menu would be better in this case.

Other Issues with Mega Menus

There are other issues in putting mega menus on your site which are worth discussing:

• Visuals within the MegaMenus – Mega menus should provide quick ways to get to pages. Sometimes designers include visuals. The biggest problem I have seen with visuals embedded in mega menus is that users may perceive them as interactive elements and try to click on them (even when they’re window dressing). Therefore, if you’re including graphics on your mega menus, make sure there is a) a need for visuals and b) clarity around their level of interactivity.
• Lack of visual indicators – If you’re going to use a mix of mega menus and “no menus,” it’s a good idea to indicate which are which with some kind of visual indicator (such as a downward facing caret or arrow). That alerts the user that a mega menu will open when they click on that section.

Mega menus are be a useful tool for design teams, but you need to be careful in employing them, so they don’t make it harder on the user than the use of no menus at all.

Source: EnervisionMedia