250

Recently I have seen a small UI issue in mouse-over drop-downs. Here is an example of such a drop-down (although Bloomberg is not the only offender):

https://www.bloomberg.com/view/articles/2017-08-09/yogurt-liquidity-and-listings

edit: Adding marked-up screenshot for historical purposes. The red line is the user's mouse path. Entering the red box will instantly hide the Opinion drop-down.

Bloomberg View - Menu issue

If you hover over "Opinion" in the top bar, you will be presented with links related to the Opinion section.

The issue: A straight-line path from positions within the Opinion button to some of the links will cross through the "Politics" section, instantly clearing the Opinion options. This means the user has to conciously think about their mouse pathing as they select the link.

Is there a name for this issue? What are the best ways to resolve it?

edit: Here is an additional gif displaying the issue, courtesy of Ben Kamens' blog, which is also linked by Midas below:

Gif demonstrating menu issue

Improve this question
13
  • 42
    I've specifically heard of a fix for this referred to as the "amazon menu hack".
    – jkerian
    Commented Aug 14, 2017 at 16:26
  • 11
    @jkerian: This problem/solution have been around a lot longer than Amazon has. I remember reading an article about how Windows 98 handles this, almost 20 years ago.
    – BlueRaja - Danny Pflughoeft
    Commented Aug 14, 2017 at 16:30
  • 5
    I'd suggest you take a screenshot and annotate it for historical purposes: Bloomberg will surely change but we'd like the to keep User Experience useful for future readers.
    – msanford
    Commented Aug 15, 2017 at 15:33
  • 2
    @msanford: Done. Thank you for the suggestion. @ everyone else, thanks for all the insights!
    – N. Quest
    Commented Aug 15, 2017 at 17:54
  • 42
    Oh man that gif is giving me anxiety
    – BruceWayne
    Commented Aug 16, 2017 at 4:02

6 Answers 6

Reset to default
298

One suggestion for a name for a solution is from this great article is directional menu aiming.

It shows how Amazon prevent users from incorrectly selecting an unwanted element while hovering their 'mega-menu', without using delays, through detecting the path of the cursor.

At every position of the cursor you can picture a triangle between the current mouse position and the upper and lower right corners of the dropdown menu. If the next mouse position is within that triangle, the user is probably moving their cursor into the currently displayed submenu. Amazon uses this for a nice effect. As long as the cursor stays within that blue triangle the current submenu will stay open.

Amazon Hover Menu direction

Improve this answer
19
  • 34
    @AlanGeorge Actually you don't need to, you only need to know where the mouse was previously. Once it has moved to the right, you are no longer interested in what's to the left. To Midas: this is amazing, I'm going to remember this and suggest this any time I can.
    – Draco18s no longer trusts SE
    Commented Aug 14, 2017 at 15:05
  • 25
    I can't believe I didn't notice this for four years.
    – user3067860
    Commented Aug 14, 2017 at 19:58
  • 12
    @AlanGeorge I'm skeptical to believe that you can come up with an improvement to a menu that drives billions of dollars of revenue as though it wasn't already thought of, developed, went through QA, and A/B tested on many thousands of page views.
    – Nick T
    Commented Aug 14, 2017 at 22:56
  • 102
    @user3067860 you didn't notice it because it's so good. That's the horrible part of UX engineering. If you do your work perfectly, no one will notice.
    – CodeMonkey
    Commented Aug 15, 2017 at 8:05
  • 9
    @NickT You're very much correct, I likely will not. The point of my comments wasn't to fix it, it was to open up a discussion about the possibility of a user going down first. God forbid I have a critical opinion on an expert Q&A site :). I answered my own question when I mocked it up: it felt unnatural to move down first instead of to the right.
    – Alan
    Commented Aug 15, 2017 at 11:29
98

The issue you're talking about is sometimes referred to as a "narrow mouse corridor". Having a narrow mouse corridor can result in users becoming frustrated by the lack of user control.

An alternative to Amazon's triangle approach (which was originally done by Bruze Tognazzini in 1986 with Apple) is to use little boxes to extend the corridor. One advantage of this particular implementation is that it's pure CSS (pseudo-elements) so it removes the dependency on jQuery (or vanilla JS).

Image from: https://css-tricks.com/dropdown-menus-with-more-forgiving-mouse-movement-paths/

(Image from: https://css-tricks.com/dropdown-menus-with-more-forgiving-mouse-movement-paths/)

Improve this answer
8
  • 2
    What jQuery dependency? Do you mean JavaScript?
    – Segfault
    Commented Aug 14, 2017 at 17:21
  • 7
    @Segfault It's a reference to jQuery-menu-aim which is mentioned at the bottom of the article linked by Midas.
    – Hay
    Commented Aug 14, 2017 at 17:34
  • 2
    Wouldn't this act as if I were hovering above 'your settings' if I was permanently hovering the left side of 'help'?
    – ESR
    Commented Aug 15, 2017 at 0:33
  • 3
    So the red squares belong to "Your Settings"?
    – problemofficer - n.f. Monica
    Commented Aug 15, 2017 at 5:48
  • 2
    @EdmundReed Yes, it would. The article states that the "slight danger is that you can cover up a decent amount of adjacent menu items, which could mean a user hovering over a legit menu item and not being able to click it. I imagine in a lot of cases they just move the mouse a little and it works, but it's definitely a balancing act between too small and too big." However, one commenter suggested that you could use the (un)hover technique he talks about in combination with the red boxes to prevent this issue.
    – Jonathan
    Commented Aug 15, 2017 at 13:29
36

Where I work, we call that a "death-star trench menu". I"m pretty sure we didn't invent that name, but I can't find the book it's from.

Improve this answer
5
  • 1
    Did a Google search for it - doesn't seem to used by anyone outside your company.
    – Mayo
    Commented Aug 16, 2017 at 21:35
  • 3
    This does not provide an answer to the question. Once you have sufficient reputation you will be able to comment on any post; instead, provide answers that don't require clarification from the asker. - From Review
    – Mayo
    Commented Aug 16, 2017 at 21:35
  • 36
    @Mayo: The primary question I see is, "Is there a name for this?" So it looks to me like this is an answer to the question.
    – Jeff Roe
    Commented Aug 16, 2017 at 21:57
  • 2
    As someone who used to bulls-eye womp rats, I don't have any difficulty with these menus. But I like this answer!
    – Jeff Roe
    Commented Aug 16, 2017 at 22:28
  • +1 for irrational Star Wars reference. Not much use as an answer, but we need some comic relief around here!
    – plainclothes
    Commented Aug 17, 2017 at 23:35
9

From a programer perspective, I would suggest a hover intent function (delaying the environment reaction by some 300ms. This isn't too visible and would reduce the risk of accidental closing/opening of menus). Although you may find that the 300ms would add up in more complex trees of menus and sub-menus..

Improve this answer
2
  • 8
    I would imagine there is a reason the "programmer perspective" is not up-voted. But this is why I (also a programmer) highly value the input of a dedicated UX designer, because the quickest/easiest/most intuitive solution to program is ultimately solving the problem of programming before the problem of UX.
    – Jeff Neet
    Commented Aug 16, 2017 at 4:01
  • 1
    This seems like a lot less effort than the Amazon solution, and it's my usual recommendation in projects I work on. The drawback is that hover delay slows down the user as they're using the nav menu. Maybe 300ms is the sweet spot where the menu still feels snappy. I'd want to try a few different delays and see how they feel.
    – Ken Mohnkern
    Commented Aug 21, 2017 at 13:43
6

The name I use for this pattern is hover tunnel.

Hover tunnels have long been recognized as problematic: http://uxmovement.com/navigation/why-hover-menus-do-users-more-harm-than-good/

One of the worst things about hover menus is that they force users to move their mouse through hover tunnels. Hover tunnels are passages that users have to move their mouse through to click an item. Older users who are less tech-savvy will often have trouble doing this. Even tech-savvy users can find it annoying that they have to move their mouse in a confined path.

I suspect the 'anti-pattern' is just a side effect of the hover tunnel collapsing because, altogether, it would not be a reliable way to direct users to ads or other content.

Improve this answer
1

No there is not a name for this pattern.

Its just a hover menu, hover menus are trash when it comes to UX. Even me, an experienced internet user has problems navigating through such menus and in 9 out of 10 times i get mad when i have to use a hover menu.

One thing to make such menus a bit more user friendly is for example to set a small delay when the users navigates out of the table so the menu is not closing immediately but has like 1-1.5s delay so the user has the chance to move the mouse back while in his normal flow.

Improve this answer
7
  • 22
    1-1.5s sounds way too slow
    – Bergi
    Commented Aug 14, 2017 at 15:07
  • 5
    I can get behind this. There's nothing more infuriating than a site that uses hover menus. If I wanted it to drop down/pop out I would have clicked on it. Delay might be a bit long, but I've seen that tactic used to help mitigate the horror of hover menus.
    – Brian Knoblauch
    Commented Aug 15, 2017 at 15:32
  • 6
    Hover menus are even more obnoxious than infinite scrolling.
    – barbecue
    Commented Aug 15, 2017 at 23:39
  • 1
    @Bergi It does sound slow, but it's the same in Windows (of course, it can be dismissed immediately by clicking). In Windows, the menu also doesn't disappear when you leave it. The sub-menus are hover-based, but since the "main" menu wasn't, it's clear that it only disappears on a click (or key-press). Too bad that this is impossible now on the web, since many sites use the "main menu buttons" as both drop-downs and links on their own, not to mention that the mouse control still isn't quite good enough for that. And then they do the same thing again for the sub-menus, argh.
    – Luaan
    Commented Aug 17, 2017 at 8:28
  • 2
    @PectoralisMajor Yes, that's a problem, but imo not the problem that this question is about: "A straight-line path from positions within the Opinion button to some of the links will cross through the "Politics" section, instantly clearing the Opinion options."
    – Bergi
    Commented Aug 17, 2017 at 12:31

Not the answer you're looking for? Browse other questions tagged or ask your own question.