A UX Idea: Know where they are aiming!

If you are a web developer or designer you know what :hover selector essentially does; browser detects current mouse cursor position, checks if the cursor is inside the element then adds the css rules you defined before. This is a significant feature in terms of usability; you can create a drop-down and get rid of the all the clutter of secondary items or you can reveal an info popup to explain the role of a button.

However, there is a drawback which is overlooked. Sometimes, you urge user to move the mouse on a specific element to go the actual target. Consider the following example,

As you see on gmail, you need to hover the plus icon to reach emoticons button. To make default to full screen, you are required to click the caret icon on the right bottom corner and then head to the actual link you want. Here is another example from New York Times website. In order to list the menu items, you need to click the section button and then navigate the page.

Let’s say you want to navigate fashion & style page. First, you should go to sections button and click. Thus, menu opens and you can click the link.

These sort of examples can be found any kind of website. To be honest, we are doing wrong; this is against to Principle of least effort because we make the path longer and user consumes much more time to reach the target. This is a problem, user is always in a hurry on a website and but we prevent him from making his work done as fast as possible. So, maybe we can make the path shorter by observing where the mouse cursor is going and we can easily find out which element user will hover or click. Then we can just skip out hover or click phase and show the user the actual target.

Now, let’s reconsider nytimes example with a different approach,

As you see above, when cursor is moving towards to menu button, we can write an algorithm that can understand where you are going to click before you reach there and toggles the menu in the half way. Therefore, it would be a logical approach to solve Principal of Least Effort issue. Not only user will have an open the menu when he goes halfway, but also, he will get rid of time loss on click or hover actions. In other words, he will gain both time and path.

This is how I decided to create a dedicated query plugin, jquery.aim. It simply calculates where the mouse cursor is going, finds the correct element according to a calculation and assigns hover/click classes or calls events before user reaches the target element. Simple enough.

Here you can see a demo on a drop-down which opens before mouse cursor reaches. And underlying method is like the following. There is a virtual element which I call anticipator and it moves as the mouse moves. If mouse moves faster, so user is aiming further and that’s why anticipator gets bigger and goes further.

The circle shows where user could be aiming. It grows when cursor moves faster and moves further to the direction where the cursor goes.

Plugin can be used in a variety of elements like menus, drop-downs, popups and can be used to show/hide sticky headers which is provided in examples page. If you want to see more examples, reports bugs and give feedback, see github page.

I also thank the creator of Amazon’s drop-down and Teehan+Lax website for inspiration.

Note: plugin still in beta stage so don’t use it on your production versions. It’s implemented in a couple of hacky hours so there are many bugs on both algorithm and performance.

Thanks to Rıza for reviewing this article.