E-commerce drop-down menus: examples and best practices
Drop-down menus are a valuable navigational tool for e-commerce and other sites. There are potential usability issues, but a well designed drop-down will help customers to navigate more quickly and effectively.
In this post, I'll look at some of the pros and cons of drop-downs, mega drop-downs, as well as some examples and best practices from a range of e-commerce sites.
The importance of drop-down menus
Drop-down menus are now almost ubiquitous on online retail sites and, used well, they enable shoppers to take a shortcut to the product category or sub-category they are looking for, while also providing a chance to promote certain products or offers.
From a design perspective, the use of drop-down menus also allows a ‘busy’ layout to be tidied up, with all of the sub-categories hidden away awaiting a mouse-over.
However, they can be fiddly to use when not implemented well, and are frequently a pain when viewed on a mobile screen.
Usability issues with drop downs
There are some potential usability hazards with drop-down menus, such as losing the menu altogether by moving the cursor out of the menu area.
To minimise this risk, avoid drop-down menus with more than two levels, as in the example below from Best Buy.
Since the menu and sub-menus are activated, then the cursor hovers over the menu, it is very easy for customers to hover outside of one of the columns and lose the whole menu.
It also makes the menu almost impossible to use on a mobile device.
Making users scroll within drop-down menus should be avoided, as this can be a fiddly process which creates more work for the user, and increases the risk of losing the menu altogether.