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.
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:
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.
No comments:
Post a Comment