Mega-menus are a mainstay of desktop ecommerce.

Five years ago, we published a post dissecting 26 of these menus, back when they were relatively novel.

In 2014, we revisited the topic, seeing that full-width menus with a greater number of products and featured images were en vogue.

So, what of 2016? Let's have a look.

Argos

2016 might not look much different to 2014 but in the example tab below there are 82 categories now where there were only 53 in 2014. There's also an additional way to shop (by room).

This increase is a trend for many ecommerce sites, comparing 2016 to 2014.

As a commenter on our 2014 post rightly points out, surfacing more products, creating specific journeys, is intended to serve the customer as soon as they arrive.

..clear signs of the proliferation of content items that, over time, the managers of a site feel compelled to try and shove under the noses of their customers at the earliest conceivable point.

More and more shopping journeys, of ever greater specific focus, start on the primary nav.

2014

mega menu argos

2016

argos menu 2016

Marks & Spencer

The M&S menu now appears even more mega, partly because it has got rid of the secondary menu (in black in the 2014 image), using only one dropdown.

M&S doubtless wanted to avoid confusion in navigation by surfacing all relevant subcategories in just one rollover. This approach definitely adds clarity, even if it makes for more reading.

2014

mega menu m&s

2016

marks and spencer 2016 menu

Lakeland

Lakeland has vastly increased the number of items/categories in its mega-menu, adding a secondary menu in each main category to create the extra space needed.

Offers are given more room to breathe on the right hand side of the menu, being much bigger in size and picked out with colour.

Note how the little thumbnail images have disappeared from subcategories, making everything better aligned and easier to read.

2014

lakelenad menu

2016

lakeland menu 2016

B&Q

Unlike M&S, B&Q has made more of its secondary menu. In 2014, a secondary menu did exist, but was limited to five departments. In 2016, the secondary menu in the shop tab has expanded significantly.

It's notable here that B&Q has removed colour (no orange text or bullets) and bold subheaders, again trying to add clarity to the menu and make it easier to scan.

There are also a greater number of tabs on the main menu in 2016, bringing in new content, as well as 'My account'.

In 2016, the room iconography on the left hand side is another addition intended to make things easier to scan, highlighting the links to room category pages.

2014

b&q menu 2014

2016

mega menu b&q

Novatech

Novatech's website redesign has changed some of the menu listings and style, though not dramatically.

One of the interesting UX additions is a large, red button to 'View all' in a category.

This seems like a good option for retailers who fear that a mega-menu may intimidate some browsers.

2014

novatech menu 2014

2016

novatech menu 2016

Jigsaw

Jigsaw has changed the titles of its main tabs, notably including one of the more popular product categories - shoes.

The fashion in 2016 web design seems to be consistent text colour, as red text has been removed from Jigsaw's menu.

Yet again, significantly more items make it into the menu, along with an added subcategory of 'Collections', giving users new startpoints from which to browse.

Note the dropdown menu is now full-width, to include preview images.

2014

jigsaw menu

2016

jigsaw menu

Monsoon

In the last two years, Monsoon has gone full-width with its menu, giving 'offers' their own tab and making the subcategories easier to pick out.

2014

monsoon menu

2016

monsoon menu 2016

Selfridges

In 2016, Selfridges has added three extra tabs in the menu and the subcategories have been allowed to spread out.

This reduces the height of the menu and making it easier to take in, particularly on widescreen laptops.

2014

selfridges menu 2014

2016

selfridges menu 2016

MyProtein

Interestingly, MyProtein is one of the few sites to have reduced the items in its menu, as shown in the 'Your goals' example below.

Partly, this may be because this area of the site is content-led and letting users enter the content in the middle may be undesirable or confusing.

Certainly, the reduced menus for content-led ecommerce distracts less from the product listings in 'Our range' (also seen below).

2014

myprotein

2016

myrpotein menu 2016

The product listings in 'Our range'.

our range myprotein

Blacks

Some of the category titles have changed in the Blacks menu, but not much else.

I thought I'd include a shot of the brands menu, now featuring colourful logos, which perhaps stand out more than the too-cool-for-school greyscale of 2014.

2014

blacks menu 2014

2016

brands menu blacks

Wiggle

Wiggle has had a makeover, with only black text and links, and no bullet points. 

2014

wiggle menu 2014

2016

wiggle menu 2016

La Redoute

La Redoute has added a secondary menu in order to add a whole host of subcategories.

2014

la redoute menu 2014

2016

la redoute menu 2016

Conclusion

In general, mega-menus on desktop are even more mega in 2016 than they were in 2014.

The aesthetics of mega-menus seem to focus on clarity, with more room for text and more consistent formatting. Colours have generally disappeared, as have bullet points.

Menus are still somewhat horses for courses, particularly when it comes to secondary menus and imagery but, call me naive, it seems like ecommerce UX is maturing and I wouldn't expect to see much change when we review mega-menus in 2018.

Ben Davis

Published 25 May, 2016 by Ben Davis @ Econsultancy

Ben Davis is Deputy Editor at Econsultancy. He lives in Manchester, England. You can contact him at ben.davis@econsultancy.com, follow at @herrhuld or connect via LinkedIn.

1050 more posts from this author

Comments (7)

Comment
No-profile-pic
Save or Cancel
Pete Austin

Pete Austin, CINO at Fresh Relevance

Great article. These menus are evolving into tabs.

about 1 year ago

David Hall

David Hall, Digital Marketing Manager at Schroders

Nice comparisons. Interesting to see how they've subtly evolved and if anything they're getting bigger perhaps!

about 1 year ago

Ivan Burmistrov

Ivan Burmistrov, Usability Expert at interUX Usability Engineering Studio OÜ

All menus became much less legible because of lower contrast. This is a harmful trend in webdesign (see "Low-Contrast Text Is Not the Answer": http://www.nngroup.com/articles/low-contrast/).

about 1 year ago

Greg Randall

Greg Randall, Director at Econsultancy Guest Access TRAININGSmall Business Multi-user

Hi Ben,

Another great article and really good to see the changes. I was intrigued to see the Novatech example where they provide the "View All" option within the Mega Menu. This is an interesting option when considering the purpose of the mega menu is to provide consumers the ability to drill down into specific product ranges.

After thinking about it, I like the "View All" option in the mega menu on the condition the retailer takes people to a great landing page with elegant filtering capabilities. Novatech falls short on this unfortunately with the main issue being the landing page is slow to load (desktop received a score of 55/100 on Google's pagespeed insights).

It would be good to hear what others think about the "View All" in the mega menu....

Thanks,

Greg

about 1 year ago

Julia Borkenhagen

Julia Borkenhagen, Managing Partner at Whitespace

Thanks for this analysis - always interesting to see the evolution across different sites and be able to identify trends. I am not sure though that the current direction of showing all the possible product categories in mega menus is going to stay as is.

If you look at the evoluation of amazon's menu, it has gone through many stages of a few tabs, many tabs, different horizontal mega menus before settling on a large search box and vertical mega menu with secondary menu options and landing pages with all links.

To me, the future of mega menus is still wide open. For large e-commerce sites, the single horizontal ones are limited in vertical real-estate and can be overwhelming when loaded with too many options. Vertical menus can be interesting when used in combination with sub-categories, they also have the benefit of being mobile friendly. Two mindless clicks may be better than a single difficult one. What do you think?

about 1 year ago

Mathieu Fauveaux

Mathieu Fauveaux, Consultant optimization and analytics at Altima

I m curious to see how many websites have A/B tested their menu and do not have killed their UX or conversion rate.

about 1 year ago

Avatar-blank-50x50

William Wallace, digital marketing manager at Skycore Ltd

I personally like how Trespass have theirs set up, http://www.trespass.com/

I like how the mega menu is broken down by tabs on the left. Thoughts?

about 1 year ago

Comment
No-profile-pic
Save or Cancel
Daily_pulse_signup_wide

Enjoying this article?

Get more just like this, delivered to your inbox.

Keep up to date with the latest analysis, inspiration and learning from the Econsultancy blog with our free Digital Pulse newsletter. You will receive a hand-picked digest of the latest and greatest articles, as well as snippets of new market data, best practice guides and trends research.