Fitts's law

Overview

Efficiency and simplicity of interaction are key components of UX/UI design in order to provide seamless user experiences. Fitts' Law is a key psychological and mathematical paradigm that helps guide interface design. This law, developed by psychologist Paul Fitts in 1954, illustrates the relationship between a target's size, distance, and time to attain it. Essentially, larger and closer targets are easier and faster to deal with than smaller and faraway ones, which demand more effort and time.

This article delves into the significance of Fitts' Law in UX/UI design, including its mathematical underpinning, real-world applications, and recommended practices for optimising digital interfaces for improved usability.

What is Fitts's Law?

Fitts’s Law Formula
Fitts' Law's mathematical formula is: T=a+blog2(WD+1).
Where:
T is the time taken to move to and choose a target (in milliseconds).
The constant a represents the minimal reaction time, which may vary depending on the device or system.
The constant b represents movement speed, which may vary depending on the device or user.
D: Distance to the target (in pixels, cm, or mm).
W represents the target's width (in pixels, cm, or mm).
Log₂ is a base-2 logarithm that represents movement difficulty. Behind the Formula
Larger targets (higher W) need less effort to click or tap.
Closer targets (lower D) require less moving time.
The logarithmic factor allows for declining returns, as doubling the size does not reduce selection time while still improving usability.

Solved Example of Fitts's Law Problem Statement
The designer aims to optimise the location of a "Submit" button on a website.
The button is now 600 pixels (D) distant from the cursor's initial position.
The button width measures 150 pixels (W).
The system uses constants a = 200 ms and b = 100 ms.
Calculate the time (T) required for the user to move the cursor and click the button.
Solution

Applying the Fitts's Law formula:
T=a+blog⁡2(DW+1)T=a+blog2​(WD​+1)
Substitute the given values:
T=200+100log⁡2(600150+1)T=200+100log2​(150600​+1)T=200+100log⁡2(4+1)T=200+100log2​(4+1)T=200+100log⁡2(5)T=200+100log2​(5)
Log₂(5) ≈ 2.32, resulting in T=200+100×2.32. T = 200 + 100 x 2.32 = 200 + 232 = 432 milliseconds (ms). T equals 432 milliseconds.
It takes about 432 ms (0.432 seconds) for the user to move the cursor and click the button.

Why Fitts' Law is Important in UX/UI Design.

Users interact with digital interfaces using buttons, links, forms, and navigation elements. Ignoring Fitts' Law might result in frustrating experiences, such as:

• Users find it difficult to click small buttons, resulting in longer interaction times.

• Higher error rates: Small touch targets can result in unintended clicks.

• Reduced accessibility: Users with motor disabilities or using mobile devices may struggle to navigate.

• Lower engagement and conversions: If crucial aspects are difficult to access, users may abandon the experience.

Using Fitts' Law, designers may improve usability, speed up interactions, and build more intuitive interfaces.

Use of Fitts' Law in UX/UI Design

1. Button Size and Clickability
Buttons are the main interactive elements in digital design. According to Fitts' Law, making buttons large enough allows users to click or tap them easily.

✅ Best practices:

• Ensure your buttons are at least 44x44 pixels (as recommended by Apple and Google).

• To avoid misclicks, provide plenty of padding around buttons.

• Make the major CTAs (Calls to Action) bolder and more visible.

For example, Amazon's "Buy Now" button is huge and visible, making it simple to click immediately.

2. Positioning Interactive Elements Closer
Reducing the distance between frequently used UI elements can increase efficiency.

✅ Best practices:

• Place comparable actions close together (for example, "Save" and "Cancel" buttons).

• Place navigation menus near thumb zones on mobile devices.

• Keep form labels and input fields close together to reduce eye movement.

For example, Google's search bar and auto-suggestions appear near together, allowing for faster searches.

3. Optimal Navigation Menus
Menus should be easy to navigate, with obvious distinctions between clickable objects.

✅ Best practices:

• Use wider letters and spacing for menu items.

• Avoid using small or tightly packed links in dropdowns.

• Implement sticky navigation bars for easy access.

For example, Facebook's mobile app uses bottom navigation, which reduces thumb travel distance.

4. Improving Form Usability.
Forms are an essential component of digital encounters, yet small input fields can be hard to use.

✅ Best practices:

• Use form fields that are large and touch-friendly.

• Increase the tappable space of checkboxes and radio buttons.

• Allow autofill and predictive text to reduce user effort.

For example, Google's login form has a wide text entry and a clear "Next" button, which reduces interaction effort.

5. Designing for touchscreens and mobile devices.
Fitts' Law is especially important on mobile devices, where users rely on their fingertips rather than precise mouse clicks.

✅ Best practices:

• Increase the button size to improve touch accessibility.

• Keep primary activities in thumb-friendly zones.

• Space out the elements to avoid inadvertent taps.

For example, Apple's iOS design principles prioritise big, tappable features that allow for simple interactions.

Exceptions & Limitations of Fitts’s Law

While Fitts’s Law is highly effective in interface design, it has limitations:

• Context Matters – Sometimes, a smaller button may be acceptable if it is rarely used.

• Too Large is Bad Too – Oversized buttons can clutter interfaces and reduce visual hierarchy.

• User Experience is Holistic – Fitts’s Law should complement, not replace, other usability principles like Gestalt principles, Hick’s Law, and cognitive load reduction

Conclusion

Fitts’s Law is a powerful tool in UX/UI design, emphasising the importance of size, distance, and interaction efficiency. By designing larger and closer interactive elements, reducing movement effort, and optimising UI layouts, designers can create seamless, user-friendly experiences.
When combined with other usability principles, Fitts’s Law helps enhance accessibility, usability, and overall engagement. By following these guidelines, UX/UI designers can craft interfaces that feel effortless, intuitive, and enjoyable