Why Are Mega-Dropdowns and Hover Menus So Inconvenient? #(website builder)
The main reason why mega-dropdowns can be difficult to utilise is that their aims and expectations aren’t always aligned. We strive to discern and act on a specific intent using hover menus by watching mouse behaviour, but our clients may have quite diverse goals and limits when viewing a page. (website builder)
Even while our analytics might portray a somewhat different tale with data points acquired and normalised over a longer length of time, customer behaviour is frequently unpredictable. We can only seldom precisely forecast behaviour.
Triangle # (website builder)
Rather than adding a delay, we might strive to be more generous with the paths that consumers will take. Because mouse motions are inherently imprecise, we can avoid tight hover tunnels and make travel corridors broader to reduce irritation.
For instance, we can use Amazon’s triangle technique, which involves creating a trajectory triangle that connects the current position of the mouse pointer to the mega-dropdown area’s boundaries. We connect the mouse pointer with the right upper and right bottom boundaries of the container in which the categories are shown if that region is required to appear next to the categories on the right (as seen in the figure below).
SVG Path Exit Areas #
When using the previous technique to generate a trajectory triangle, we would sometimes not only track the exact position of the mouse cursor, but also recalculate the triangle with every pointer movement — all the time. Instead of constantly recalculating the triangle, we can enhance the method by computing the whole SVG overlay area once and tracking whether the mouse pointer is inside it. Hakim el Hattab’s implementation, which creates the areas dynamically with SVG based on the position of the navigation item on the screen, is a wonderful example.
Because Hakim’s solution is responsive, if the sub-navigation doesn’t fit on the screen, it will float next to the main navigation item, full width or height displayed. If the user scrolls vertically or horizontally, the SVG path area will be recalculated accordingly. On Hakim’s debug view mode of the Menu pattern, you can see a working demo of the approach in action.
The Dangers Of Mega-Dropdowns That Open On Hover #
All of the strategies listed above have the same purpose, as stated previously. They make an attempt to predict the user’s purpose to open and exit the navigation menu by observing the speed of mouse movements, the length of time spent in a single place, and the exact location on the screen. These predictions will fail for some clients at some time, and there isn’t much that can do about it.
Accessibility concerns abound with mega-dropdowns that open on hover. We obviously need to allow keyboard-only navigation within the mega-dropdown, and we also need to make sure that we appropriately announce the items to screen readers. However, we must be cautious about where the mega-dropdown is situated in terms of general structure.
MANY SUB-NAVIGATIONS ARRIVE WITH DELAYS #
When many sub-navigations open on hover delayed, one after the other, the experience will be tedious. The Vodafone website is an unpleasant illustration of it in action. If every navigation item in this situation also serves as a standalone link to the category (in addition to opening a mega-dropdown), we should expect a lot of angry clicks around the site.
We essentially increase the delays and hover tunnel difficulties we discussed previously by making users wait for navigation to show and then forcing them to be extremely accurate within a hover corridor once it does. That’s where the annoyance comes from.
DOING TOO MANY THINGS #
As we’ve seen before, category names can sometimes serve two purposes. On the one hand, you may connect each category title to the category’s website, allowing customers to get right to the page by clicking on it. They could, on the other hand, open a mega-dropdown overlay. The mega-dropdown will open if the user hovers over the title for a long enough period, but the user may have already clicked on a link, causing flickering. When the UI doesn’t provide any hints, it’s impossible for users to set realistic expectations.
Designing A Better Mega-Dropdown: Menu #
Many large organisations want to quickly expose their clients to the breadth of alternatives accessible on the site, which is one of the reasons why mega-dropdowns commonly open on hover. We can display more alternatives faster and the client can explore more possibilities faster with the navigation options changing on hover. That’s why, for example, it’s hard to picture a huge eCommerce business without a massive navigation overlay.
However, if you change the hover navigation with a tap/click navigation, it’s a good idea to see if the engagement duration and click-through rates remain the same (or grow). In reality, you could readily handle most of the problems stated above by doing just that: the mega-dropdown overlay would only open and close when the user specifically requests it. There’s no need to keep track of the mouse cursor or fine-tune hover entry/exit timings as a result. Plus, since there is no hover on mobile, we need to provide an option to open the menu on tap/click for mobile one way or the other, so we can just maintain it as this for larger screens.
Source: website builder
