A UX Idea: Know where they are aiming!

Cihad Turhan
Jul 24, 2014 · 4 min read

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,

Image for post
Image for post

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.

Image for post
Image for post
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,

Image for post
Image for post

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.

Image for post
Image for post
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.

Thoughts And Ideas

An attempt to bring all heart-touching and thought…

Sign up for The Thoughts And Ideas Community

By Thoughts And Ideas

Life Lessons, Sobriety, Mental Health, Self Improvement, Mindfulness, and Spirituality Take a look

By signing up, you will create a Medium account if you don’t already have one. Review our Privacy Policy for more information about our privacy practices.

Check your inbox
Medium sent you an email at to complete your subscription.

Cihad Turhan

Written by

Thoughts And Ideas

An attempt to bring all heart-touching and thought provoking writings under one roof to make an impact.

Cihad Turhan

Written by

Thoughts And Ideas

An attempt to bring all heart-touching and thought provoking writings under one roof to make an impact.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store