{{ searchResult.published_at | date:'d MMMM yyyy' }}

Loading ...
Loading ...

Enter a search term such as “mobile analytics” or browse our content using the filters above.

No_results

That’s not only a poor Scrabble score but we also couldn’t find any results matching “”.
Check your spelling or try broadening your search.

Logo_distressed

Sorry about this, there is a problem with our search at the moment.
Please try again later.

Way, way back in 2011 we published an article looking at how 26 commerce sites presented their mega menus.

This refers to the drop-down menus that are generally situated within the horizontal navigation at the top of a webpage.

Web trends and UX design have changed in the intervening years, in large part due to increasing consumer adoption of mobile and new technologies such as responsive design, so I thought it would be interesting to revisit those same sites to see how they've evolved.

Here they are...

1. Argos

Argos' top nav has changed dramatically since 2011, reflecting new product categories and consumer behaviour.

The mega menu design has also been altered accordingly and widened so it now takes up the full screen width.

The columns have been simplified, so they have larger headers and only refer to a single sub-category. The ordering within the lists has also changed - in 2011 the products were in alphabetical order, but that isn't strictly adhered to in the current lists.

2011

2014

2. ASOS

ASOS has retained the same basic layout though it has been expanded to include new ranges such as 'Boutique' and 'Preowned'.

As mentioned in the original post, ASOS doesn't break up the subcategories as much as others do, which makes it slightly harder to scan.

2011

2014

3. Ebuyer

Ebuyer has shifted its navigation from the top to the left of the screen, and has also done away with the bold column headings.

Instead the columns now include several different product categories, and there is also a 'Featured' section on the far right.

Weirdly, some of the categories contain no subcategories (e.g. 'Servers').

Overall the new design means the mega menu offers slightly less clarity, but can include a wider range of products.

2011

2014

4. Lakeland

In 2011 we pointed out that Lakeland struggled to fit all of its categories within its menus, and that problem doesn't seem to have been rectified.

Three of the categories still don't have any subcategories (e.g. Travel Accessories).

We recommended that Lakeland extend its menu to fit the whole width of the screen, and though it has been extended this was to fit in additional offers and 'Featured Products'.

This enables Lakeland to upsell popular brands and products.

2011

2014

5. B&Q

B&Q now has a mega menu within a mega menu - users must first select 'Shop by department', then choose the range they wish to buy from.

The current layout is similar to the old one in terms of having categories grouped into blocks with prominent headings, however it has been simplified by limiting each list to just three subcategories.

It's notable that the EasyGrow category doesn't have anything listed, but that is because it links to a content page rather than a range of products.

2011

2014

6. House of Fraser

Another retailer that has adopted an element of mobile design on desktop, so its mega menu is now housed within a burger menu.

The main navigation options are largely still the same, but the categories within each option are new.

In 2011 each of the categories was presented in a separate column, but now there is a uniform format within each category - 'Highlights', and 'Inspirations & Ideas'.

Each category also has a hero image that either advertises an offer or displays related photos.

2011

2014

 

7. John Lewis

John Lewis has a massive mega menu that takes up the entire screen. The background even fades to grey to give the menu added prominence.

The aesthetics have changed a bit since 2011 but it's essentially the same menu, with long columns for each product category.

There is, however, a new 'Highlights' column that promotes offers and seasonal product ranges.

John Lewis has also added a banner ad at the bottom of each menu, while some categories have large hero images dedicated to a specific product or offer (e.g. the 'Beauty' menu is dominated by an ad for 'Marc Jacobs Daisy Dream'). 

2011

2014

8. Maplin

Maplin has also gone for a plain, stripped down design that is almost identical across each category.

Alongside the subcategories there is a 'Most popular' category and an image of a promoted product.

It's cleaner and, in my opinion, easier to scan than the old version.

2011

2014

9. Kiddisave

Children's retailer Kiddisave has reduced the size of its menus, perhaps as a result of switching to responsive design.

In 2011 it stretched across the entire screen and included columns for 'Top brands' and 'Promoted products'. Now it's limited to a maximum of three columns. 

2011

2014

10. Fat Face

Clothing retailer Fat Face has done away with drop-down menus and instead navigates to a new page when you select one of the age/gender categories.

2011

2014

11. Jigsaw

As in 2011, Jigsaw's navigation includes triple-column mega menus and simple single-column drop downs. 

The bigger categories (Women and Men) includes a 'Features' column that includes links to content pages, though smaller categories (Homeware) only contain four or five options in total.

Overall though it has a simpler, more user-friendly layout.

2011

2014

12. Monsoon

Monsoon has expanded its menu since 2011, adding in additional product categories and altering the formatting slightly.

Unfortunately the new layout is more difficult to navigate as the subheadings and the listed items use the same font.

2011

2014

13. Next

All of Next's menus follow the same consistent format, with a 'Collections' tab on the left followed by three columns of product categories.

The bold subheadings and clean layout make it easy for shoppers to find what they're looking for.

2011

2014

14. Lovehoney

Sex toy retailer Lovehoney has done away with its mega menu and now relies on single-column drop-down menus.

It means there are fewer options within each menu, but also simplifies the site navigation.

For example, in 2011 each menu had a separate column dedicated to content such as guides and size charts, but this has been scaled down to a single 'Help & Advice' link at the bottom of each drop-down.

2011

2014

15. MyProtein

MyProtein has maintained the same site design since 2011, though it has slightly modified the layout of its mega menus.

The company's entire product range is crammed into the 'Our range' menu, with six columns that take up the entire width of the screen. Thankfully the layout is quite clear so it's easy to scan.

The other menus include numerous links to the site's content giving advice on workout goals, diets and other nutritional information.

In the previous post we mentioned that the use of images makes it stand out versus the other brands on this list and is a good example of how to use mega menus effectively.

However I feel that the design is a bit dated now and the images of numbers within the 'Your Goals' menu don't add much to the usability.

2011

2014

16. Novatech

Another brand that has overhauled its design in the past three years. Novatech's menus range in size from three columns to a single drop-down menu.

In the example below Novatech has simplified the 'Desktop PCs' menu from four to two columns, though it is a bit longer the the previous iteration.

There is now less focus on specific models of computer and the columns for 'Home', 'Business' and 'Gaming' have been simplified to a single link for each.

This frees up a lot of extra space to upsell related products.

2011

2014

17. Blacks

The size of Blacks' drop-downs was previously dependant on the number of products in that range, but they're now uniformly the width of the screen.

It means each menu has four columns of product options, though at the moment the right-hand column is taken up by a big advert for the site's seasonal sale.

Overall I feel the clean layout is very easy to scan. I'd also like to draw your attention to the 'Brands' menu, as the use of logos rather than text links is a neat touch.

2011

2014

2014 brands 

18. Wiggle

Wiggle's menus now fit the width of the screen and include lists of specific products rather than broad categories.

For instance, the example below previously included 'Top brands' and 'What's hot', but now has categories such as 'Triathlon bikes' and 'Triathlon components'.

The use of bold headings and bullet points means it's very easy to scan.

2011

2014

19. La Redoute

Fashion retailer La Redoute has opted to widen its mega menus so they fill the entire screen.

It means that some of them look a bit sparse, but means there is space for graphics to advertise sale items.

2011

2014

20. Jaeger

Part of Jaeger's site redesign included getting rid of its drop-down menus.

2011

2014

21. Selfridges

Department store Selfridges has huge mega menus, each detailing the various products and brands on offer, alongside a hero image and links to content or product ranges on the left-hand side.

Despite the enormity of the menus they are still fairly easy to use thanks to the clean, simple design.

2011

2014

22. M&S

M&S relaunched its site back in February this year - read our review to find out more.

Included in this revamp was the extension of its mega menus so they are now two-fold. Users must navigate two different category lists before they can choose a particular product (e.g. 'Kids', then 'Boys').

The menus themselves look great and include some attractive imagery and offers, but the added level of complexity could potentially damage the UX, particularly on tablet.

2011

2014

23. Mamas & Papas

Mamas & Papas ha retained the same overall design for its mega menus, using a full-width layout with subcategories laid out in columns.

Some of the menus have product images on the right-hand side that advertise a special offer or best seller.

2011

 

2014

In conclusion...

There's a wide variety of approaches to mega menus among these retailers, and few have retained an identical design since 2011.

Full-width menus appear to be en vogue, with 15 out of the 22 brands opting for screen-filling navigation menus.

This gives retailers more space to include a bigger product range and additional images or offers, but it also creates issues for smaller product categories and UX problems on tablet devices.

It's also worth pointing out that four retailers included in the 2011 list no longer exist, which goes to show the difficulties that multichannel retailers continue to face. 

David Moth

Published 26 August, 2014 by David Moth @ Econsultancy

David Moth is Editor and Head of Social at Econsultancy. You can follow him on Twitter or connect via Google+ and LinkedIn

1690 more posts from this author

Comments (6)

Comment
No-profile-pic
Save or Cancel
Avatar-blank-50x50

Edwin

Those are great examples for desktop, but how will these complex navigations work on tablets and smartphones?

over 2 years ago

Avatar-blank-50x50

Matt

Thing missed here is the obvious one: each menu shows 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. Equally (ASOS is a great example), more and more primary nav designs blur the distinction between the browse and search journeys - with many nav items now acting as de facto facets for single product sets.

What would have been interesting is some insight into whether or not this is actually effective, or whether we’re approaching a saturation point where the noise/signal ratio of most modern ecom nav designs is overwhelming consumers.

over 2 years ago

Avatar-blank-50x50

Graham

Interesting article. thanks!

Would be nice to see Amazon in the analysis too.

There are three retaillers not in the 2014 report versus 2011:
1. Dixons
2. Comet
3. JJB Sports

Point 5 was numbered twice.

over 2 years ago

David Moth

David Moth, Editor & Head of Social at EconsultancyStaff

Thanks for your comments.

@Edwin, I think most of these won't work on smartphone screens as the retailers will either have a separate mobile site or they simply haven't planned for mobile users.

Regarding tablets, I had planned to try some of them out but I couldn't find the office iPad. One to look at in a future post!

@Matt, personally I was surprised that there wasn't a bit more content surfacing in these mega menus, particularly given the amount effort being put into content marketing.

Regarding your other point about the efficacy of these menus, I'll hopefully able to get some insight into that for a future post.

@Graham, thanks for pointing that out. Have amended it now.

over 2 years ago

Avatar-blank-50x50

Stephen

Great examples David. Recently the KitchenAid blog implemented a 3-column mega menu on the desktop site which has merit, yet demonstrates restraint. At set breakpoints it degrades to a tablet and mobile version of the menu. (http://blog.kitchenaid.com/).

over 2 years ago

Peter John

Peter John, Online marketing at Dianabol

With 3rd largest smartphone market in the world, India to reach 314 million mobile internet users by 2017 so we can say that these templates are awesome but perfect for desktop. I found one perfect site in wordpress (i.e. http://www.dianaboluk.co.uk/) this is responsive and no need to change skin for all devices.

12 months 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 Daily Pulse newsletter. Each weekday, you ll 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.