Mega Dropdown Menus

MEGA is my favourite word of the moment, and completely coincidentally (unless he's spying on me), our old mate Jakob Nielsen is feeling the vibe too in this article about mega dropdowns.

What he's saying is that you can cut out the need for landing pages by having a mega dropdown like this:

Mega Dropdown Menus

Because there’s no landing page to get through, users get to what they want quicker. Happy days? Not necessarily.

We recently user tested a site which included mega dropdowns, and we found that this approach is no good if you have important information on your landing pages. Because the user’s inclination is always to click in the dropdown, rather than the main heading, they skip the landing page and thus any important information on that page. So, a mega dropdown approach needs careful consideration, and is probably not the right idea for a site where users need guidance through a process. In our example, users couldn’t guess from the dropdown which link to go for - they needed the information on the landing pages to guide them, but this was rarely reached because they were more inclined to click the dropdown, missing out a vital step in the process.

From an accessibility point of view, as long as you still have a landing page for the main heading screen, readers can handle the mega approach. There’s some interesting points in Nielsen's article about sliding the mouse diagonally and briefly leaving the mega dropdown so it closes (in the image above if you slid the mouse to ‘Heart Healthy Foods’ you might do this). Very annoying. This can be avoided by putting a delay on the dropdown closing, but the balance has to be right - you don’t want the wrong mega dropdown hanging around for ages.

When we first heard about mega dropdowns, we weren’t sure what to think - but there are clearly some sites that benefit from the mega approach, like The John Lewis Website and Tesco.com.

And here's a good article on how Basecamp, creators of Highrise (a business contact management tool we use at Cogapp), are using mega dropdowns.

Thanks to Dominic Russell-Price at Museums Sheffield for the mega link.

Comments

Those mega-dropdowns seem perfectly reasonable and usable to me - I've never quite understood the objection to them.

But yes, as you say, I'm sure they're not suitable for all sites.

Mr Nielson also seems to have the power of self contradiction:

Jakob Nielsen's Top 10 Information Architecture Mistakes

Point 3: Missing Category Landing Pages

http://www.useit.com/alertbox/ia-mistakes.html

Great point about people skipping the landing pages when there are drop downs.

Sometimes (but not always) its possible to put the landing page inside the dropdown as an "introduction" or "view all in this section" link. Its still easily missed.

As for the delay - there is a great jquery plugin call HoverIntent that makes it easy to add this. We've used this recently and also made it so that Javascript does all the hover styling. This way without JS users get to see a simpler non hover version.

Post new comment

The content of this field is kept private and will not be shown publicly.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • Lines and paragraphs break automatically.