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.

Related Articles

3 Responses to “12 Design Best Practices for Drop-Down Menus”

  1. Nice list, but you missed out one major usability tip (tip #5 comes close, but it’s not explicit enough, and tip #10 goes the other way) …

    Be very careful about using hover/rollover states for dropdown menus in this age of mobile and tablet. Always provide a usable alternative for those platforms. Some alternatives might be:

    * Use onClick to reveal/hide the dropdown menu (perhaps in a lightbox) or
    * No dropdown – use onClick to go to a separate page

  2. Mike says:

    Good suggestions. It would be better if suggestions are provided based on the web language used to make the site. For e.g. maybe mention how it can be done in Drupal or WordPress or even Magento etc. The reason why I suggested is because our site is made using Ubercart (Drupal) and at times it gets difficult to implement certain drop down menu techniques which we see on other sites due to lack of information online. Also Drupal has a much smaller community then say WordPress or Magento so getting help also takes efforts and time.

    Thanks!

  3. Cubicle says:

    This is good stuff. I think #12 could be expanded on a little. Nothing worse than those first couple of weeks of trying to cram it all in before realizing that how the space and pages are managed and flow together matters more.

Leave a Reply

© 2014 Get Elastic Ecommerce Blog. All rights reserved. Site Admin · Entries RSS · Comments RSS