guglok.blogg.se

The user starts scrolling down slowly to assess the content on a page, but the menu keeps popping up.Imagine a situation when you want to resize the window, and just as you are about to snap to the right edge of the window, a hover menu keeps showing up - just because you’ve moved your mouse cursor too closely.With nested sub-menus within a mega-dropdown, the customer wants to explore similar items within the category in which they currently are, but because of nesting, they have to re-open the mega-dropdown over and over again, and travel the same hover tunnel over and over again.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.