×

Improving Usability: Mega Menus

The best ideas are often the simplest.  You know, the ones that, when you hear them you think “oh yeeeah”, or “yes, but that’s obvious”, or maybe simply “ooooh”.

A recent (or maybe not-so-recent) website usability trend that’s here to stay is the mega menu – a massive drop-down list of categories under a navigation heading, allowing quick and easy scanning of the available options.

The prosecution presents two exhibits in “The case of finding tomatoes in my weekly online supermarket shop”:

website checker

Exhibit A: Sainsburys.co.uk

Sainsbury's groceries homepage
Sainsbury's groceries homepage
Click 1: Fresh & bakery
Click 1: Fresh & bakery

Hmmm – is it a fruit, vegetable or salad item?  Or all three?  The only way to find out is to click on the left-hand menu items:

Click 2: Fruit section
Click 2: Fruit section

Nope, not in fruit.  So, I’ll try another section:

 

Click 3: Salad & Herbs
Click 3: Salad & Herbs

Found it.  And now I can finally select “Tomatoes” – my fourth click from the grocery homepage.  Total time: 42 seconds.

 

Exhibit B: Tesco.com

Tesco's groceries homepage
Tesco's groceries homepage

Hover over “Fresh food” and scan the list.  Still the same dilemma – under what section is it listed? – but so much quicker and easier to scan the aisles and product sections within Tesco’s mega menu:

Click 1: Select tomatoes
Click 1: Select tomatoes

From the groceries homepage, I’m one click away from seeing all my tomato options.  Total time: 8 seconds (and a nice, efficient feeling).

If you’ve lots of products or sections on your website, you should consider using a mega menu.  To make the best of them, you should ensure they are:

Well styled
…with clear “sections” and lists of products within those sections.  If a product could legitimately be in two sections – choose the most obvious one.  Mega menus are so easy to scan that it’ll only take an extra second to find it – and it’ll save duplication.  Duplication makes pages look more complicated than they are, and users will wonder what the difference is between “tomatoes” within the fruit section, and “tomatoes” within the salad section.

No scrolling
Make everything visible at once – that’s the point.

Activated upon hover
… rather than having to click.

The moral of the story – if you’ve lots of products, use a well-styled mega menu.

Your customers will thank you.

Something I’ve missed?  Disagree?  Leave a comment below…

website checker

One thought on “<span>Improving Usability: Mega Menus</span>”

Comments are closed.