How to Use Fitts’s Law When Designing Experiences

Humans are notoriously unpredictable. Unlike gravity, electricity, or friction, they just don’t seem to work the same way each time.

And this is what makes Fitts’s law so interesting. It’s a really good predictive model of human movement.

Using Fitts’s law when designing allows you to use regular human behaviour to make interfaces easier to use. This could be your website, software program, or even games. From grocery store self-checkouts to finance websites, human motion remains the same.

Any interface can use the lessons learned from Fitts’s law to help users make fewer errors and complete their tasks more quickly.

What Is Fitts’s Law?

Fitts’s law is basically an equation that models human behaviour. It describes the relationship between the difficulty of selecting a target and how big the target is and how far away it is.

The equation was originally developed based on participants selecting wooden blocks using one of their hands. The time it took them to go from touching one block to touching the other block was measured.

The blocks were changed so that they were thicker and thinner and the distance between the two blocks changed as well.

Based on this experiment, Fitts came up with a model for how difficult it was to select a one-dimensional target. Future researchers demonstrated that modifications of this model also work for 2D and 3D objects.

Fortunately, we don’t need to have an in-depth understanding of the equation to use the lessons from the model.

What Can We Learn From This?

There are two parts of the Fitts’s law equation we need to consider:

Target distance

Further -> Harder to select

Closer -> Easier to select

Target size

Smaller -> Harder to select

Larger -> Easier to select

Based on the knowledge of these relationships we can reconsider the layout of our system.

Lessons Based On Distance

Group buttons that are likely to be used together. This enables users to process tasks more easily. They don’t have to search for the next button and don’t have to travel too far to get to it.

This can sometimes be achieved by changing a button when pressed to another button, for example, the play/pause button. People often want to quickly alternate between playing and pausing when scanning a clip. By changing the button, they have already selected, you are making the next selection as easy as you possibly could.

The iTunes interface is one example of where this is done

It’s important when designing to look at the interaction by task rather than as separate pages. Pages that follow each other in a particular task should be compared next to each other to understand how far the user has to travel to get to their next step.

Part of the Amazon checkout flow.

Looking at the Amazon checkout flow, we can see that between the Ship, Pay, and Place Order pages, the button to proceed to the next step remains in the top right area so that users are able to quickly click through to place their order.

We can also use this relationship in the other direction. If there is a task that you really want the user to think about before doing, then you can slow them down by making them have to go further to accomplish that goal. This prevents an accidental double click from deleting all your files.

When closing a LinkedIn account, you have to press a button on the right, scroll down, and then press a button on the left to proceed with closing an account. This prevents an accidental double click from having unintended consequences. LinkedIn further confirms your decision by requiring an account password on the next page before closing.

Lessons Based On Size

Besides playing with the distance between elements, you can also change the size of each element.

On any interface, you want to make sure that each element is at a reasonable minimum size so that users are actually able to select everything. On mobile, you will want to pay even more attention to minimum sizes as people will need to select with their fingers instead of a tiny cursor.

A pop-up message that automatically appears the first time you go to this recipe website (shown on both desktop and mobile).

See that little ‘X’ in the upper right corner of the mobile version? That’s the only way to close the pop-up. This target size is way too small to select with fingers. This kind of interaction only works well when you are using a mouse. The size of the icon makes the task too difficult on mobile and it took several attempts before I was finally able to close the pop-up successfully.

When using a mouse, the edges of the screen become special because the mouse will stop when it reaches the edge. This means that any element right at the edge has an infinite size in that direction. This makes these elements very easy to get to.

The top bar on my computer.

This is why the elements around the edge can be a little narrower as they are much easier for people to select. The buttons above are only about a cursor width apart but very easy to interact with.

In addition, we’ll want to make important frequently used buttons bigger to allow the more common tasks to be completed efficiently.

Final Thoughts

Fitts’s law is one of the fundamental concepts you can use to design experiences that support users in their tasks. By considering the relationship between size, distance, and difficulty than you can make informed decisions that will influence the way users to experience your product.