The customer wants to open the category page, so they travel to the category link, click on it, but experience flickering because a mega-dropdown appears delayed.This would cause the mega-dropdown to open involuntarily every time the user pauses when traveling to CTAs or shopping cart at the top of the page. The customer might use a trackpad (or a mouse) to operate a large secondary display, so pointer movements will be slower, abrupt and inaccurate.To do that, they have to keep re-opening mega-dropdown, or use separate browse tabs, positioned side by side. The customer wants to look up mega-dropdown options while typing in a search autocomplete.However, there are also plenty of other situations to consider. From: Dropdown Menus with More Forgiving Mouse Movement Paths. Hover tunnels can be frustrating to navigate. The customer is moving the mouse towards a target on the screen, but the trajectory that the mouse has to travel covers a nav link that opens a mega-dropdown.The customer is aiming at the category link and travels there directly to explore the sub-navigation items in that category.The common scenarios we usually explore are: We just rarely can predict behavior accurately. With hover menus, we try to deduce and act on a particular intent by tracking mouse behavior, yet our customers might have very different objectives and very different limitations when accessing a page.Ĭustomer’s behavior is usually unpredictable, even although our analytics might tell a slightly different story with data points gathered and normalized over a longer period of time. The main reason why mega-dropdowns can be cumbersome to use is because of a mismatch of intentions and expectations. ( Large preview) Why Are Mega-Dropdowns Hover Menus Frustrating? A common component for large retail stores. Sometimes the submenu appears unexpectedly, and sometimes it suddenly disappears, and sometimes it stays on the screen for a while, although the mouse pointer is already in a very different part of the page, or on another page altogether. And for decades, a common user’s complaint about this pattern has been the absolute lack of certainty and control about how and when the sub-navigation opens and closes. Usually it includes a mixed bag of links, buttons, thumbnails and sometimes nested dropdowns and overlays on its own.įor decades, a common behavior for this kind of navigation is to open the menu on mouse hover. A mega-dropdown is essentially a large overlay that appears on a user’s action. That’s exactly why mega-dropdowns have become somewhat an institution on the web - albeit mostly for complex and large projects. No wonder that a common way to deal with this complexity is to expose customers to a large amount of navigation quickly. Think of large eCommerce retailers and large corporate sites, catering to many audiences and having plenty of entry points. And with such a complex multi-level navigation, showing the breadth of options requires quite a bit of space. When a website houses thousands of pages, often combined with micro-websites and hundreds of subsections, eventually the navigation will go deep and broad. Let’s explore things to keep in mind when designing and building a mega-dropdown, alternatives to hover menus and fine details for designing a better UX.Ĭomplex websites often rely on complex navigation. Do we need mega-dropdown hover menus in 2021? Probably not.
0 kommentar(er)
