During our two-year long usability test study on how users navigate e-commerce sites, we’ve verified that having a category navigation that uses a hover-based drop-down menu (aka a “Mega Drop-Down”) can provide major usability benefits.
In fact, using a hover-based drop-down menu for the category navigation has become a web-convention among e-commerce sites. Our benchmark of Homepage & Category Navigation of 50 top US e-commerce sites reveals that in 2013 86% of e-commerce sites used a mega drop-down, and it has remained almost unchanged since (88% in 2017).
However, despite the popularity of using a drop-down menu, we’ve also observe that 43% of drop-down menu implementations suffer from “flickering” issues that disrupt users’ ability to control the main navigation and navigate the drop-down “frustration free.”
In this article we’ll therefore dive deeper into our usability test findings on the “flickering issues of drop-down menus,” and provide two solutions that were verified during testing.
The core of the flickering issue is that, once users hover a parent category in the main menu and within the drop-down menu that unfolds spot the sub-category they were looking for, they will instinctively move the mouse cursor in a direct line from the parent category to the sub-category. However, in this process the mouse cursor will often temporarily hover the trigger area of the next sibling parent category in the main navigation — causing the entire drop-down content to change.
During testing we see that moving the mouse cursor in a direct line towards the target hit area is such an ingrained and instinctive user behavior that the issue takes just milliseconds to provoke, and that users are often unable to even spot or articulate what went wrong, beyond noticing that “the menu just changed.” Hence, we’ve internally at Baymard named it “the flickering issue.”
43% of drop-down menus suffer from “flickering” issues that will disrupt users’ navigation
At first this issue might appear as a minor interaction detail, but this “flickering” caused great frustration to all test subjects who experienced it. The consequence is that the content of the drop-down menu will change from displaying the hit area that the user has just decided is their best path forward to displaying something completely irrelevant.
To solve the accidental activation of the sibling parent category, users will
Due to how ingrained this low-level “direct-line” mouse cursor behavior is, we often observed users having the same issue multiple times in a row, before they were finally able to stop their direct-line mouse cursor movement and stop their accidental activation of the wrong parent category.
What makes this “flickering” issue so severe is that it’s simply caused by users trying to interact with something as vital and heavily utilized as a site’s main navigation.
When benchmarking the top 50 US e-commerce sites we find that 43% of sites make no attempt to solve the flickering issues of their drop-down menus. Luckily, we during usability testing also observed both a simple and a more advanced drop-down menu implementation that will solve the flickering issue.
1) The Simple Solution: A Hover Delay. A large part of the “flickering” issue can be solved by adding a minimum amount of time the user has to hover a new trigger area (the parent categories) before the current drop-down content is replaced. Typically a delay of around 300 milliseconds is observed to eliminate the worst “flickering” without introducing needless friction for intentional-hover interactions.
2) The Advanced Solution: Mouse Path Analysis. The above solution of using a hover delay is a slightly crude implementation as it has a built-in dilemma:
By using a more advanced implementation that accounts for the direction of the user’s mouse path we can create the ideal hover delay. We can eliminate any accidental activation of the sibling parent categories by adding an extra-long hover delay if the mouse cursor is moving in a direct line from the cursor’s current position towards the sub-categories. (Or just between the hit area of the parent category and its sub-categories.) In the above Amazon example this is seen in the area marked in red. At the same time we can remove the hover delay entirely when users are not moving their cursor towards the sub-categories, e.g. if they are deliberately moving it towards a sibling parent category.
This more advanced Mouse Path Analysis solution will be a prerequisite for making vertical drop-down menus work decently, as the height of a vertical drop-down menu item will always be low compared to its width (causing the “safe” hover area to be very small). However, the Mouse Path Analysis solution will also greatly improve a horizontal drop-down menu.
(Tip: If a Mouse Path Analysis sounds like too-much coding, Ben Kamens has kindly provided us all with the jQuery-menu-aim script that has this exact type of behavior.)
One might ask why we don’t simply get rid of the hover-based drop-down menu and instead have it be click based. The greatest usability benefit of hover-based drop-down menus is that users are able to read through the main categories, then hover one which might be appropriate, and then based on the revealed sub-categories infer if it is in fact the appropriate category or if they need to explore other main categories. Indeed, during our Homepage & Category Navigation study we found that 55% of the test subjects deduced the correct parent scope and category taxonomy solely with the help of hover-based drop-down menus — it allows them to probe into a parent category without a click commitment.
While the overall concept of a hover-based main drop-down menu is great, real life implementations often fall short, as we find that
For something as important as the site’s main navigation, using either a basic hover delay or the more ideal Mouse Path Analysis is required to attain a good performance for any hover-based drop-down menu where users can otherwise experience “flickering” issues by accidentally hovering sibling parent categories.
This article presents the research findings from just 1 of the 600+ UX guidelines in Baymard Premium – get full access to learn how to create a “State of the Art” e-commerce user experience.
Authored by Christian Holst on March 14, 2017
Join 30,000+ UX professionals and get a new UX article every second week.
See all 36 ‘Homepage & Category’ articles