Mega menus have been applauded by gurus such as Jacob Nielsen for their ease of use, so it's little surprise that they've become the menu of choice for a growing proportion of e-commerce retailers.
If you are planning on adding a mega menu to your site, want to improve your existing menu or just need some inspiration, here is a round-up of some of the things online retailers are currently doing with their horizontal navigation.
1. Argos
Argos uses a part-width mega menu to provide easy access to hundreds of different product categories.
Major categories are marked in bold to draw the eye to the appropriate area and it uses neatly spaced columns to help differentiate between sets of subcategory within.
2. Asos
Asos also goes for a part-width mega menu. It stands out from the page slightly thanks to a subtle drop shadow on the bottom and right hand side.
It doesn't break up the subcategories as much as others do, which makes the menu a bit more dense and harder to scan. However, it uses a dividing line to separate the subcategories within the main category "women" from the other links, so the running copy does feel as though it's all part of the same section.
There are also some links in the Shop By Collection part at the end which satisfy customers who prefer to shop in a different way.
3. Ebuyer
Ebuyer's mega menu fits well with the theme of the site and is held together nicely by an orange border which extends from the tabbed navigation.
It includes prominent category names at the top of each column, making it easy to find what you're looking for. Each category has its own column, so categories with multiple subcategories are shorter than those with many.
This is clearer, but might present problems for information architecture because you're going to be forced to keep subcategories to a small number to prevent the mega menu from becoming too tall.
4. Lakeland
Lakeland's mega menu uses bold headings in a larger font to clearly define categories, with subcategories appearing beneath. Its menu is on the tall side, so it might pose an issue to customers browsing on netbooks which have a short display depth of only 600 pixels or so.
While it's really clear and very navigable on larger screens, I wonder whether Lakeland had difficulties in making all of their categories fit on the menu, because some of them, such as "Bins, recycling and composting", don't have any subcategories beneath, suggesting they couldn't fit them all on.
Making it fill the entire width of the screen might make it possible to fit in more of the subcategories for some of the categories for which there are currently none, and could solve the problem of its tall height.
5. B&Q
DIY retailer B&Q has quite a lot of stuff to squeeze in, so its mega menu is on the large side. It has grouped categories into blocks with a prominent heading, making it easy to find what you're looking for.
However, the lists within the blocks are of unequal size, which looks a little strange and might restrict scalability.
The Pet & Bird Care block on this menu looks a bit odd as a result. Nonetheless, it's fairly well designed and is very easy to navigate.
6. Dixons
The Dixons mega menu failed to load properly on my Mac, leaving me with a mess of layered menus that were hard to navigate.
It worked after a refresh to reveal a minimalist menu with clickable category headings and neatly ordered subcategories. It lacks column borders, which makes it a little harder to scan.
7. House of Fraser
The main categories on the House of Fraser menu are clearly laid out and there are borders to help group related content. However, there are also some odd gaps for no apparent reason.
8. John Lewis
The John Lewis site uses columns to group content into related sets and uses a pale grey bar with bold headings.
For me, this doesn't work as well as some others here and I find the headings blend into the nav bar a bit too well giving the menu a cluttered feel.
9. Comet
Comet's mega menu is uncluttered, clear and easy to navigate. It makes good use of the full width of the page by utilising the far right hand column to promote advice guides which help aid the customer in picking the right product.
The use of images is also eye catching.
10. Maplin
Maplin has gone for a slightly different approach and used a combination of columns and rows. This defies the usual convention making it feel a little different to the others here.
11. Kiddisave
Kiddisave uses the full page width and uses clear headings to define sections. It makes good use of the right hand column for promoting best-selling products, and there's a neat Top Brands column on the far left for those only after a certain brand.
Kiddisave has extended the use of brands to a menu of its own, which makes it really easy to find certain brands and aids SEO by directing search engines to brand landing pages via the appropriate keyword phrase.
11. Fat Face
Fat Face uses a combination of double-column mega menus and single column drop-downs. They're clearly laid out and work well, but they might be missing a trick in not using a wider menu to promote other stuff.
12. Jigsaw
Again, Jigsaw uses a combination of small double-column mega menus and single column drop-downs. The headings could be clearer and some of the second columns are very sparse indeed.
13. Monsoon
Monsoon's menus are also very minimalist, but the column border makes them easy to read and the headings are clear.
14. Next
Next's mega menus are mainly four or five columns wide, but there's also a single column menu for Flowers and Gifts.
They're easy to scan and it's simple to find what you're looking for. There are also shortcuts to other related categories in the left hand column.
15. Lovehoney
On the Lovehoney site the subcategories are clearly visible and easy to find, popular subcategories get their own column and there's even an additional column at the end for guides and FAQs.
The spacing used seems to make it particularly easy to scan, or perhaps it's the lines beneath the subcategory names.
I particularly like the clever use of the top edge of the menu here to promote Lovehoney's USPs, such as 100% free returns and discrete free shipping.
It's a well executed example, but I did wonder if making the menu wider by adding an extra column to promote offer or best selling products with some images might further improve it.
16. MyProtein
MyProtein has managed to fit its whole product range on this menu, which is quite unusual.
It uses a full-width mega menu with clear headings for each section and columns to help separate the categories making it fairly clear and easy to scan, despite the large number of links.
More impressive though are MyProtein's other menus for Your Goals, Your Sport and About Us. Each one is image rich, attractive to look at and a cracking example of how to use a mega menu really effectively.
Compared to these more graphical menus, the Our Range menu feels a bit cluttered, and I wonder whether MyProtein could further improve it by moving the search box to the middle of the page and extending the menus to include more imagery and promotions for popular lines.
17. Novatech
Novatech's simple mega menu uses bold text to mark out the columns and single pixel borders to aid demarcation. Top-level categories, such as monitors, which include smaller numbers of links, get the single column treatment.
18. Blacks
Blacks' mega menu feels particularly clear. The headings are very clear, it's easy to tell which related set you're looking at and it's quite easy to scan.
Like Novatech, Blacks also uses smaller single column drop-downs for those top-level categories which only have a small number of links.
19. Wiggle
This is another simple but effective menu. The category headings stand out well and the columns are clear, so it's easy to scan. Rather than simply listing the subcategories, Wiggle also lists top brands, what's hot and what's new, but does so without the use of images.
20. La Redoute
La Redoute has a fairly minimal menu but it's clean and easy to navigate so it works well.
21. JJB Sports
The JJB Sports mega menu has fairly clear headings and clear columns. However, when the equipment tab is used, the width of the mega menu extends beyond the edge of the page, so users with a screen resolution of 1024 pixels end up with the outer edge of the menu missing.
22. Jaeger
Jaeger's mega menu is slightly unconventional in that it lists the subcategories in the bottom left hand corner. It gives prominence to promotions, such as the new season offers, sale and editor's picks.
It looks attractive but as it defies the usual convention seen on the majority of menus it doesn't feel as instantly usable to me.
23. Selfridges
Selfridges has tried to cram quite a lot onto this double-column menu, which has made it rather long.
The headings are clear and the pixel border makes it easy to scan, but it feels too tall and users with short screens might need to scroll.
24. Marks and Spencer
25. Mamas and Papas
The Mamas and Papas mega menu is another good example of how to use the right hand column of a full-width menu to promote a particular offer. The Shop by Model section also shows how you can create related setsby clever use of the column border.
Mega menu tips
Use headings
One of the main reasons for using a mega menu is to present a large range of links in related sets. To show users which links fall into related sets you can use headings to group them together.
Use columns
Most sites already group related sets into their own columns and often use a single pixel column border to help with demarcation (see Asos for an example of how to do this for a really long multi-column list).
Avoid laying out the content into rows as this can make the ordering look random, which goes against the point of using a mega menu in the first place.
Show your best sellers
Save time for customers by placing your best-selling products on the mega menu so users can click directly to them without the need to visit a subcategory and then locate the product.
Keep it short
Be cautious of making your mega menu too tall. It might extend off the page if they are browsing from a small screen, such as a netbook or mobile device. You can check how many of your customers have such screens by using Google Analytics.Try to make the menu fit the majority of screen sizes.
Add a border or shadow
Help the menu to stand out from the page content better by using a drop shadow or subtle border. This is particularly important if you're using a white menu on a white background.
Test it in a range of browsers
Make sure the menu works in all browsers by undertaking plenty of cross-browser testing to ensure it's easily navigable for everyone. Quite a few of the menus above didn't work perfectly.
Consider going full width
Some of the clearest and most effective mega menus are the ones which span the entire width of the page, or a significant proportion of it. They allow the site to include clearer headings, supporting images and promotions for offers and best-selling products, which aids usability and helps drive sales.
Promote your USPs
Promote offers, guides and unique selling points on your mega menu. Check out the probably-not-safe-for-work Lovehoney site for a great example of the USPs and Comet for the help guides.
Get the timing right
Make sure the menu appears rapidly, stays in place while the user's mouse is hovering over the top and vanishes when the mouse is moved away.
Jakob Nielsen recommends that the menu should wait 0.5 seconds before appearing, as this prevents the menu popping up every time a user passes their mouse pointer over the top.
Vary the mega menu size if you need to
If some top-level categories contain dozens of subcategories while others contain just a few, consider using mega menus containing different numbers of columns. Some sites with small ranges in certain areas, such as Blacks, use a combination of wide multi-column mega menus and short drop-downs to good effect.
Focus on granularity
When you're planning what to include on your menu take time to consider your approach. You don't want to offer too many groups or include too many subcategories, otherwise you'll make the menu too big and overwhelm your visitors.
You also need to get the category names just right, so test them before releasing your menu.
Learn more...
The Reducing Customer Struggle report, published by Econsultancy in association withTealeaf, looks in-depth at the extent to which companies understand the overall online customer experience and the approaches or types of technology they use to identify issues and remedy them.
The study also looks at the relationship between online and offline areas of business.
No comments:
Post a Comment