What is Fitts’ Law?

It’s hard to believe that one of the most important or rather say fundamental laws of design is also one of the most frequently ignored ones. We are here talking about the Fitts’ Law. If you are a person with experience in the design field, you may or may not have heard of Fitts’s Law but you would have almost certainly used it. Fitts’s Law states that the time to acquire a target is a function of the size of the target and the distance to the target. In this article, we will discuss what Fitts’ law is. and How can we use it to our advantage as UI designers?

Fitts’ Law

What is Fitts’ Law?

The name of Fitts’ Law comes from Paul Morris Fitts Jr. who was a psychologist at the Ohio State University where he developed a model that describes how quickly people can select a target. Fitts’s Law states that the time to acquire a target is a function of the size of the target and the distance to the target. This can mathematically be expressed by the formula

t = a + b * log₂(1+d/w)

• Where t is time to select a target
• a and b are constants set by the type of device
• d is the distance from the starting point to the target
• w is the width of target along axis of motion

In the definition of Fitts’ law, a target is what the user is trying to interact with, it could be a button to tap or a form field that needs to be clicked into. ID Stands for Index of Difficulty and is the measure of how difficult a task is independent from the input device. ID can be measured as:

ID = log₂(1+d/w)

• Here ID is the Index of Difficulty
• d is the distance from starting point to target
• w is the width of target along axis of motion

Example:

Consider there are two buttons on the screen, Button A and Button B and the distance between the centers of the buttons is 200px. Width of button A is 50px and the width of button B is 60px. We want to find our the time required for any user to move the cursor from Button A to Button B. Here Fitts’ Law can be applied in the following way:

t = a + b * log₂(1+d/w)

let us assume that constant a = 100 milliseconds and constant b = 150 milliseconds per bit. since the width of button A is 50px, the effective width is:

w1 = 4/3*50 = 67

similarly width of button B is 60px, the effective width is:

w2 = 4/3*60 = 80

now applying these values to the Fitts’ law equation:

t = 100 + 150 * log₂(1+200/80)

t = 400

On solving this equation, the time required for the cursor to travel from Button A to Button B is 400 milliseconds.

Takeaways from Fitts’ Law for UI design:

Following are the key takeaways from Fitts’ Law that a designer must keep in mind while designing interfaces:

• The targets we design must be large in size for the users to tap them or click them easily.
• The targets we design must have a threshold spacing between them so that they don’t appear cluttered.
• The targets we design must be placed in the interface in such a way that they are easily accessible.

Application of Fitts’s Law in UI design

• The Thumb Zone: When it comes to accessibility, Thumb Zone is the graphical representation of the area that can be easily covered by the user’s thumb in smaller screen devices. Targets present in accessible part of Thumb Zone that are close to thumb have the lowest interaction cost while targets that are far away have the highest interaction costs. This makes it quite obvious for designers to put important components of design in the easily accessible part of Thumb Zone.
• Bigger Size Targets: Similar to the Thumb Zone analogy, larger targets have the lowest interaction cost while smaller targets have high interaction costs. Therefore, Important actions should be larger so they are easier to select. This also means that the important target must have blank area around them to reduce interaction cost.
• Optimizing Distance to Target: We had a key takeaway from Fitts’ law that said the targets must be placed in the interface in such a way that they are easily accessible. Since the time to acquire a target is also a function of the distance to the target, distance between important targets must be optimized that is made smaller.
• Shorter is better: For the targets that include a lot of components, for example menus, drop-downs, or any other type of interactive list, make sure to have shorter text. This is a guideline rather than an absolute rule but shorter text reduces the target area and gives less cognitive load to the users brain and makes it easier to read.
• Spatial Interaction: Fitts’ Law has an important application in the UI designing of XR (Extended Reality) design environments. The placement of the virtual components of an XR design must be such so that its easy to control the core components of the interface for the user relative to functionalities that are relatively less important.

Conclusion

The Fitts’s Law states that the time to acquire a target is a function of the size of the target and the distance to the target. It is important to know Fitts’ Law if you are designing websites, mobile apps, device interfaces or even physical dashboards. We hope that the points mentioned in the article help you improve your understanding about Fitts’ Law and how it can be used by UI designers to their advantage. Make sure to follow the points we discussed in the article to design better and professional looking interfaces.