Fitts’ Law is a mathematical model that predicts how long it will take to “point” at a target. It was first proposed by Paul Fitts in 1954. It takes into account where you are currently pointing relative to the target; How far away the target is and how big the target is. It has been widely applied; but the most common application is as a measure of how long it takes for a user to move their mouse cursor to click on a target item such as a link or button.
Movements to a target occur in 2 distinct parts: firstly a big movement to get approximately in the right place, followed by a series of fine tuning motions to lock on. You can see these in action – watch your finger as you point at a small object at the far side of the room you are sat in now e.g. a light switch. Chances are you’ll move your arm in a big movement, probably overshoot, then make a series of smaller movements until you are pointing directly at it. Now try it with a bigger object – maybe you have a big TV hanging on the wall. Here you will make the same big arm movement, but because the target is so big you don’t have to make as many (or any) fine tuning motions – so it’s easier to acquire the target.
Lets look at some examples. In all of the below graphics the red box is the target; the dashed line represents the travel from the starting point to the target and the area marked over the target represents the dimension in which the user can decelerate and acquire the target:
Here we have a big target on the far side of the screen, because it’s big it shouldn’t be a problem to click on quickly:
The big target area means that the fine tuning motions aren’t necessary before the cursor comes to rest over the target.
In this next example we have a much smaller target on the far side of the screen so it’s going to be harder:
Because we have to move the cursor a long way and it’s a small target it’s going to take a series of fine tuning movements before the pointer is correctly aimed at the target.
However, if the small target is close by – it is less of a problem to hit because the initial movement to get there is smaller – reducing the risk of needing to correct an overshot.
It is important to bear in mind that for irregular shaped targets, size is relative to the plane of movement. In the following example, if you are moving to the target horizontally the button is quite big, however, when approaching from above or below the target presents a much smaller area.
In addition to the size of an object, we can make a target easier to acquire by placing it at the edges or corner of the screen. This is because they are “infinitely targetable”; that is – you have an ‘invisible barrier’ to work against. You make the initial big movement then you don’t need to make the smaller fine tuning motions as any excess overshoot is ignored.
This is used by both of the major OS vendors to good effect:
Mac OS X has the Dock at the bottom of the screen; this is infinitely targetable as you can’t point your cursor at a point lower than the dock so it’s always clickable:
On Windows, the Start menu is in the bottom left corner of the screen – the corner is infinitely targetable as if you make a big mouse gesture towards that corner you will always end up over the start menu button.
One of the big differences between Mac OS X and Windows is the location of program menus. Mac OS X has the menu across the top of the screen whereas Windows has them attached to individual application windows. Fitts’ Law shows that in many cases the Mac approach is superior: On the Mac you throw your pointer to the top of the screen and you automatically end up over the menu. On Windows you have to go through the full sequence of making a big movement, then smaller correcting movements before you end up over the menu. There is no region of infinite targetabiltiy.
However, the Mac’s approach is starting to see limitations. Whilst it is infinitely targetable, Fitts’ Law includes a measure of your current location. As large monitors and multiple monitor set ups become more and more common, the Mac user is having to travel a significant distance to reach the menu at the top of the screen, potentially outweighing the time saved by reducing the need for finer movements.
Fitts’ Law Applied
One of the biggest disappointments for web developers is that we can’t easily take advantage of the edges and corners of the browser window. So we have no infinitely targetable areas we can use to our advantage. So what can we do:
- Make your links bigger by increasing the targetable area. Use padding around links so that the user has a little forgiveness around the text they are trying to click
- When you have several clickable items or links together either make the items larger or space them out a little. Page navigation links on search results is very often done badly. For example, this results page has far too much too close together: Whereas Amazon do a much better job, nicely separating the individual links:
- Make the button a user is most likely (or most wanted) to click bigger. E.g. Make your OK button bigger:
- Group actions together – if related interactions are near to each other this not only increases their relatedness in the eyes of the user but also reduces the mouse movements necessary to move between them
Finally, don’t be afraid of experimenting! 37 Signals have a really interesting use of Fitts’ Law on their “Signup” button for Sortfolio – as you hover over the button it grows and shows more information – so as you begin to make the fine tuning movements to precisely acquire the button, the need for them is reduced by the target button growing! Fantastic stuff!