Tuesday, April 25, 2017

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


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



Answer




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


No comments:

Post a Comment

technique - How credible is wikipedia?

I understand that this question relates more to wikipedia than it does writing but... If I was going to use wikipedia for a source for a res...