The lesser-spotted mega-menu was first identified and named by Jakob Nielsen back in 2009. When preparing for a Navigation Design seminar he identified a new trend in navigation design. Jakob described them as: “Big, two-dimensional drop-down panels that group navigation options to eliminate scrolling and use typography, icons, and tooltips to explain the user’s choices.”
He was so impressed with the ‘mega drop-downs’ that he endorsed their usage over traditional drop-down menus from that point forwards. Since Jakob’s article, increasing numbers of websites, including e-commerce sites, have started to use this navigation method. Below I’ve taken a look at why they are appealling, who’s using them well and what not do do with a mega-menu.
Why do we need them?
Logical navigation
Organising the main navigation on a large website is a challenge and mega-menus offer clear advantages over traditional drop downs. JohnLewis.com for example have to categorise over 150,000 products, from 11 top navigation items. Mega-menus containing columns and sections of items in logical divisions makes this size of organised navigation not only possible, but a positive user experience.
Supporting content
Mega-menus don’t just have to be about products, it also allows the products to be supported by additional content. Typically these are buying guides for the items available, shop by brand functionality and the latest offers or arrivals. This also allows websites with simplier navigation to consider the mega-menu, it may be that they offer the chance to better group together parts of your site that simple one column drop down menu cannot achieve.
Natural selection
By presenting the range of products available in this easy to use format, visitors are far more likely to find what they are looking for. By using a organisational structure that uses a common-sense approach and provides a variety of options mega-menus take the effort out of tracking down that product. The wording of the main navigation titles are often very hard to select, having a mega-menu underneath that title acts as a support mechanism if visitors are not 100% sure if it’s the correct section.
3 of the best mega-menus
JohnLewis.com
The John Lewis mega-menu has three great features:
- Clean, clear design – vital for distraction free navigation.
- Use of sub-sections in a coloured band – Toys, Need Inspiration, Our Favourites and Featured Brands. This varies across sections, but is a useful guiding sub-title.
- These sub-sections are more than just additional product categories. Using titles like ‘Our Favourites’ feels much more like an edited collection of items – similar to asking the advice of an instore advisor.
Lakeland.co.uk
The recently re-launched Lakeland site has two noteworthly elements:
- Simple use of colour and lines to allow sub-categories to be displayed, without adding confusion. The resulting menu is very quick to read and browse friendly.
- Prominent promotion of promotional offers at the top of the mega-menu.
EsteeLauder.co.uk
Beauty brand Estee Lauder adds some nice design styling to the traditional take on the mega-menu:
- The addition of a promotional footer allows one or two elements to be featured at the bottom of the mega-menu.
- Strong visual design through coloured titles, stylised bullet points that doesn’t detract from it’s functionality.
3 Things not to do in mega-menus
These 3 retailers are doing alot of the right things, they are also avoiding the pitfalls identified below:
- Avoid filling the space - having too many items within the mega-menu will make it very hard to use and add confusion, rather than remove it.
- Think about the usability & do user testing – Don’t just launch your new, mega-menus without any testing. Make sure that as well as looking good they actually work well. Test the working version of the menu in a variety of browsers, by adding a slight delay to the disappearance of a menu the usability can be improved significantly. Also find time to do some actual user-testing on the navigation, getting actual users to test what you think is the perfect solution can often reveal great insights (Thanks to @sparklypips for the reminder about user testing)
- Less is more - Navigation menus are not a place to let your creative guru’s go crazy and fill them will background wallpaper and stylised typography. Keep the design a simple blend of clean fonts, simple colours and an occasional dividing line.
Jakob Neilsen also re-visited mega-menus in his Alertbox series of articles, highlighting some additional things not to do – Mega-Menus Gone Wrong.
In summary…
The benefits of the mega menu are clear for both large and small websites. Although they are appealling, make sure you take time to research the correct categorisation of your items and any supporting elements. Mega menu’s are going to be very challenging to fully automate, so ensure you dedicate time and resource to keep them current and also analyse how they are used.
More mega menu information…
- How to build a kick-butt mega menu in CSS3 – Net Tuts
- 48 Mega Menu design examples – dzineblog
- The Supermenu Professional extension for Magento – Magento Connect
