242

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

  • 40
    I've specifically heard of a fix for this referred to as the "amazon menu hack". – jkerian Aug 14 '17 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 Aug 14 '17 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 Aug 15 '17 at 15:33
  • 2
    @msanford: Done. Thank you for the suggestion. @ everyone else, thanks for all the insights! – N. Quest Aug 15 '17 at 17:54
  • 40
    Oh man that gif is giving me anxiety – BruceWayne Aug 16 '17 at 4:02
287

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

  • 33
    @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 Aug 14 '17 at 15:05
  • 23
    I can't believe I didn't notice this for four years. – user3067860 Aug 14 '17 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 Aug 14 '17 at 22:56
  • 96
    @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 Aug 15 '17 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 Aug 15 '17 at 11:29
95

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/)

  • 2
    What jQuery dependency? Do you mean JavaScript? – Segfault Aug 14 '17 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 Aug 14 '17 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 Aug 15 '17 at 0:33
  • 3
    So the red squares belong to "Your Settings"? – problemofficer Aug 15 '17 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 Aug 15 '17 at 13:29
35

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.

  • 1
    Did a Google search for it - doesn't seem to used by anyone outside your company. – Mayo Aug 16 '17 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 Aug 16 '17 at 21:35
  • 35
    @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 Aug 16 '17 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 Aug 16 '17 at 22:28
  • +1 for irrational Star Wars reference. Not much use as an answer, but we need some comic relief around here! – plainclothes Aug 17 '17 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..

  • 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 Aug 16 '17 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 Aug 21 '17 at 13:43
4

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.

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.

  • 22
    1-1.5s sounds way too slow – Bergi Aug 14 '17 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 Aug 15 '17 at 15:32
  • 6
    Hover menus are even more obnoxious than infinite scrolling. – barbecue Aug 15 '17 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 Aug 17 '17 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 Aug 17 '17 at 12:31

protected by Community Aug 19 '17 at 8:10

Thank you for your interest in this question. Because it has attracted low-quality or spam answers that had to be removed, posting an answer now requires 10 reputation on this site (the association bonus does not count).

Would you like to answer one of these unanswered questions instead?

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