Is there a name for this drop-down anti-pattern?

  • 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):

    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

    I've specifically heard of a fix for this referred to as the "amazon menu hack".

    @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.

    Expandable items in dropdowns from the top Menu Bar in Ubuntu suffer from this UX problem, and - even though I'm very much an Ubuntu evangelist/apologist - it drives me *nuts*. Experimenting on my Mac (e.g. using the *Edit->Find* menu in Chrome), it seems that OS X solves the problem by requiring you to keep hovering over the other item for some non-zero minimum time period before the hover takes effect.

    "Is there a name for this drop-down anti-pattern?" Judging by the existing answers, there is no such name.

    I'd suggest you take a screenshot and annotate it for historical purposes: Bloomberg will surely change but we'd like the to keep [] useful for future readers.

    Solution - Don't use hover for menus. Have it as a click to open for each item. Hovers don't work on touch devices anyway. Nor with keyboard (not easily anyway).

    @msanford: Done. Thank you for the suggestion. @ everyone else, thanks for all the insights!

    Oh man that gif is giving me anxiety

    That GIF is how I expect Macs to work. You must zig the mouse right to keep the submenu open, then down to the item you want, then click.

    My coworker calls this Super Monkey Ball.

    @BlueRaja-DannyPflughoeft: Amazon was founded in 1994.

    Thank you for pointing out 50% of what is wrong with Apple TV

  • Midas

    Midas Correct answer

    4 years ago

    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

    This is a really interesting solution. My only suggestion would be to move the left-most point of the triangle to the left-most position of the parent menu option.

    @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 My line of thinking was, what if the user goes down slightly first before right? It would add a bit more room to move. Just a thought.

    @AlanGeorgeMight be worth having the triangle's tip slightly to the left, but not very far. 5 or 10 pixels, but not all the way to the left hand edge.

    Very interesting, thanks Midas! Is there some kind of library that is capable of accomplishing this or a dev has to write the code?

    @NoSaidTheCompiler this. it's at the end of article.

    I can't believe I didn't notice this for *four years*.

    @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.

    Looking at the js, there is a 'tolerance' setting for how forgiving you want it to be. It's set to 75 by default, so maybe I'm reading its intentions incorrectly?

    @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.

    @AlanGeorge The size of the menu items helps here - as well as the blue triangle, you can also imagine a box around the entire "Amazon Cloud Drive" menu item which you can also move the mouse around in without the submenu changing

    @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.

    @Kai Good thought! Adds a bit more room.

    Dumb question maybe. Doesn't this fail when you select a parent menu option towards the top, and then the sub menu drop down is larger than the parent menu option and you want to select something near the bottom of the sub menu? Should the 3 points of the triangle not be the parent selected, and the top left and bottom left of the sub menu?

    From the beginning (I think it was 2011 or 2012), the directional triangle was only part of the equation. If the user reverses direction, even within the triangle, the "aiming" is cancelled.

    @plainclothes I haven't looked at the implementation, but that could be achieved by recalculating the triangle after every movement.

    @CodeMonkey Say that to a typographer :-)

    The bottom of the triangle seems a bit overkill for the four items shown .I guess it's a universal triangle, to cover an arbitrary number of items, correct?

    @trlkly to match the height of the elements in the container. you can check for yourself on Amazon

License under CC-BY-SA with attribution

Content dated before 7/24/2021 11:53 AM