The Neck of a Drop Down Menu

I have this horrible mini-UX experience in LinkedIn.  Overall, I love LinkedIn, but this one tiny thing is like a small pipe in a hallway that I keep stubbing my toe against.  You can try it out too.

  1. Go to LinkedIn and look at the top right.
  2. You see the “People you may know” box?
  3. Hover over the X and it gives you a sub-menu.
  4. Mouse over to “I don’t know them” link.
  5. The menu will often completely disappear.

linkedInNeck

If you are like me (and millions of other people) you would have made a straight line from the X to the words on the link.  This traveled through the neck of the menu and the JavaScript was not set up to handle that.  The menu constantly disappears on me.

They intend the menu to work by traveling directly south from the X until you are on the menu item you want and then either moving west or clicking right there.  I find this to be so frustrating because my mouse movements are much more natural when they work in a straight line.

Here is another example of how the neck can be a nuisance.  This time on Amazon.com.  (UX analysis posted previously)

Fixing the issue is straight forward.  There needs to be a delay before you dismiss a menu.  Don’t dismiss it immediately.  Give the user 200ms to get their mouse back on the menu.  That is plenty of time.

This also goes to show that a really good app with good UX can be ruined by the smallest details.  Pay attention to the details or pay by losing customers.


Comments

One response to “The Neck of a Drop Down Menu”

  1. I just programmed something similar, very similar to the Twitter login box, and one difficulty was making sure the logic for detecting if the click was inside the login box (though it would be hover event in your examples).

    The LI/Amazon examples make me wonder if the hover is tracking to the menu hyperlinks rather than the menu ‘box’ itself.

Whatya think?