12 Design Best Practices for Drop-Down Menus
We often focus optimization activities on landing pages, checkouts and home pages, and less on the pages that provide the "assists" in conversion. Today's post shines the spotlight on navigation menus, with an excerpt from Econsultancy's Ecommerce Best Practice Compendium.
These ecommerce navigation menu best practices are just 12 of the over 170 tips in the report.
Tips for improving drop-down usability
1. Use clear 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.
2. Use columns
Most sites already group related sets into their own columns and often use a single pixel column border to help with demarcation.
3. Showcase your best sellers
Save time for customers by placing your best-selling products on the mega menu. This means that users can click directly to them without the need to visit a sub-category and then locate the product.
4. 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.
5. 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.
6. 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.
7. Consider using the full width of the page
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.
8. Use images and icons
The Sunglass Hut example, and this from BMW show how drop-down menus can be more useful, as well as easy on the eye, with the addition of product images.
9. Promote your USPs
Promote offers, guides and unique selling points on your mega menu.
10. 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 for half a second before appearing, as this prevents the menu popping up every time a user passes their mouse pointer over the top.
11. Vary the menu size
If you need to If some top-level categories contain dozens of sub-categories while others contain just a few, consider using mega menus containing different numbers of columns. Some sites with small ranges in certain areas use a combination of wide multi-column mega menus and short drop-downs to good effect.
12. 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 sub-categories, otherwise you'll make the menu too big and overwhelm your visitors with too many options.
The entire Ecommerce Compendium Report is available from Econsultancy.
Like what you’re reading?
Check out some of our other great content here