UIEtips: 6 Epic Forces Battling Your Mega Menus

Jared Spool

August 24th, 2011

“This is a perfect opportunity for us to use that mega menu we wanted to try out.” That’s what I heard a few weeks ago, sitting in a client meeting.

The client was dealing with balancing a lot of navigation while keeping their home page free for the important messages they want everyone to see. A mega menu – those large multi-column layered menus that pop up when you hover over the navigation – seemed like just the ticket.

However, our research shows mega menus come at a price. In today’s UIEtips, I talk about the epic forces that are constantly in battle with any mega menu implementation, preventing the users from getting value. Every time I start talking about this stuff, designers perk right up. If you work on your site’s navigation, you’ll see why mega menus may not be the panacea they promise to be.

Read today’s article, 6 Epic Forces Battling Your Mega Menus

Of course, what we’re talking about here is just one type of web design pattern — exactly the topic Hagan Rivers is talking about at our upcoming User Interface 16 Conference. If you’re doing any design for the web, you’ll want to dive deep into her full-day topic. She’ll fill your brain with exactly what you’ll need to create delightful and useful online experiences. Check out all the UI16 speakers at UICONF.com.

12 Responses to “UIEtips: 6 Epic Forces Battling Your Mega Menus”

  1. Vlad Nedelcu Says:

    Hi,

    I find that Mega Menus are a tool and like any tool they have a place, the enemy is how you use it. I worked on the UX, strategy and user interface for one of the big media companies in South Africa, the client was the newspaper wing of the organisation.

    If you get lazy with your content and just throw everything in there like most times it will fail. I used the mega menu in a news site to peek into the pages and sections to show the user what’s happening. You can go to http://www.timeslive.co.za to check it out and tell me if I failed or succeeded. There is also a post of it on my website that i am busy updating at the moment.

    Thank You and I look forward to your comments,
    Vlad

  2. Molly malsam Says:

    The only one of these issues that specifically relates to mega menus is the one about real estate. The rest are all issues with traditional drop-down or hover primary menus. Not much new here.

  3. Vlad Nedelcu Says:

    Sorry i forgot to add the link to my post http://www.notvlad.com/news-framework/

  4. Molly Malsam Says:

    Counterpost here: http://blogs.perficient.com/spark/2011/08/24/mega-menus-spool-vs-nielsen/

  5. Phil Says:

    @Molly Agree but not just drop down or hover primary navs – most these issues apply to all navigation systems. The issue of hidden trigger words applies to every navigation system I’ve ever seen. Short of listing every product on the homepage I don’t see a solution to that one.

  6. Jerry Gennaria Says:

    Molly didn’t mention it, but she has an excellent counterpoint to Jared’s article here -> http://blogs.perficient.com/spark/2011/08/24/mega-menus-spool-vs-nielsen/

    Personally, I would be interested in seeing how Jared would handle a site like TWP without using a mega-menu. It’s easy to point out the many potential pitfalls, but some thoughts around solutions would be nice ;-)

  7. enderFP Says:

    I tend to agree with the first several commenters and would like to add that I’d like to see a definition of “mega menu.” If you scroll over Electronics & Computers on Amazon’s site, that’s a pretty lengthy list. How is that really different from Staples other than horizontal vs. vertical? Well, Staples’ version is called Technology Products – as a category leading to trigger words that’s far too vague and given what they list in there, it seems poorly organized and the triggers seem too general. Seems Staples needs an information architect to sit down and categorize the site more concisely and more specifically (while doing user testing all the while to double-check perceptions).

    Most of the other forces are the same ones that plague any site navigation to which answers lie in constantly checking in with users (and the types of users you’d like to acquire).

    But I think it’s less an issue of “mega menu” and more an issue of disorganization….

  8. Sebastian Says:

    Agree with enderFP. Issue 2 and 3 are standard information architecture problems that occur whatever menu you choose. One could even argue that mega drop downs is better to solve this, since it is quicker to see whats “behind”. Otherwise user need to click, end up on a page to see what the category contains.

    BTW first comment here so i bet you heard this before. Failing to enter spam check results in a new page with an error message. going back and everything you typed is gone. That’s bad UX.

  9. Ivo Bosma Says:

    enderFP makes a good point. I was wondering the same: how is Amazons navigation structure different from Staples?

    I think the article of Molly Malsam (mentioned in comment #5) hits the nail on the head.

  10. Mike Atyeo Says:

    Excellent coverage of the issues. As you say, mega menus “aren’t evil, just troubled.” The ‘Category Names’ and ‘Trigger Words’ problems can be summed up by realising that the user’s cursor must naturally move to the place where the mega-menu pops up. As a designer, you know what’s in the mega menu, but users don’t – they just know what they want to do, and the words in their head that they’re scanning for.

    If you don’t follow that principle, then the items in the mega-menu are essentially hidden, just like most items in ‘Quick Links’ drop-down menus and similar approaches to navigation.

    We (Neo Insight) provide some design principles for mega menus at: http://www.neoinsight.com/newsletter/1103.html – it’s not got such broad coverage of the issues as your article, Jared, but includes guidelines for content, timings, etc.

  11. John Ferrara Says:

    I really don’t want to see a designers running from a valuable pattern, so in the spirit of open debate I’ve got to point out problems in Jared’s arguments with regard to mega menus.

    “Epic Force 1: Menus vs. buttons” is a visual affordance issue specific to the example he’s citing. Most conventional sites provide some form of arrow to afford the presence of a dropdown. But in any event, the argument has nothing to do with mega menus as opposed to any other type of menu.

    “Epic Force 2: Trigger words” presents a false choice between using a mega menu and instead putting the content on the page itself. Designers wouldn’t take all of those links and just dump them into the page because it would be too voluminous — and they certainly wouldn’t do it on every page of the site, which is a major advantage of using the menus in global navigation. Instead, those trigger words wouldn’t be visible at all. So by Jared’s logic the mega menu should present a better alternative.

    “Epic Force 3: Category names” has nothing to do with mega menus, but is instead a perennial challenge of information architecture: creating a taxonomy and labeling system that allows people to accurately anticipate what each node contains. Again, mega menus can theoretically make this better by explicitly declaring what they contain, increasing the strength of the information scent.

    “Epic Force 4: Users wait before moving their mouse” is unclear to me, but also seems to have nothing to do with mega menus in particular.

    “Epic Force 5: Occlusion” is a valid critique. Yes, mega menus cover up more content. However, good designers are very sensitive to the point about inadventantly opening a menu on hover, and script their menus carefully to minimize that risk. The approach Jared cites in his example is also highly atypical, and may even be an anti-pattern.

    “Epic Force 6: Hover” is also a valid critique (though also not specific to mega menus). But good designers are taking care in touchscreen implementations to ensure that menus work well when viewed in a tablet Web browser (in particular using touch events) and use different implements entirely in native apps. More generally, just because tablets are taking off doesn’t mean that we should give short shrift to the desktop browser experience.

    The message about using caution when implementing mega menus is definitely good advice, but the suggestion that mega menus have inherent problems beyond those that are typical in Web design is not sufficiently supported here. I actually believe that implemented well, this pattern can go a long way toward improving usability and strengthening the scent of information throughout a website, and would urge greater adoption rather than less.

  12. Stephen Morley Says:

    Forces 5 and 6 are not inherent problems with mega-menus, but a result of poor implementation. Accidental activation (and deactivation) can be avoided by having a short delay (200 milliseconds seems sufficient) before opening or closing the menu. Touch support can be implemented without requiring the menu to be click-based on non-touch devices. An implementation that doesn’t suffer from these usability problems is available here: http://code.stephenmorley.org/javascript/touch-friendly-drop-down-menus/

Add a Comment