Fitt’s Law

Image created with Midjourney. Prompt:
Image created with Midjourney. Prompt: Dynamic minimal style 2D illustration of Fitt's Law in action, showing a hand reaching out to a large button close by and a small button further away, emphasizing the speed-accuracy trade-off. Medium: Digital art. Mood: Educational, engaging.

Overview

The time to acquire a target is a function of the distance to and size of the target.

Takeaways

Touch targets should be large enough for users to accurately select them.

Touch targets should have ample spacing between them.

Touch targets should be placed in areas of an interface that allow them to be easily acquired.

Origins

In 1954, psychologist Paul Fitts, examining the human motor system, showed that the time required to move to a target depends on the distance to it, yet relates inversely to its size. By his law, fast movements and small targets result in greater error rates, due to the speed-accuracy trade-off. Although multiple variants of Fitts’ law exist, all encompass this idea. Fitts’ law is widely applied in user experience (UX) and user interface (UI) design. For example, this law influenced the convention of making interactive buttons large (especially on finger-operated mobile devices)—smaller buttons are more difficult (and time-consuming) to click. Likewise, the distance between a user’s task/attention area and the task-related button should be kept as short as possible.

Fitt's Law has profound implications for software design, especially when it comes to user interface (UI) and user experience (UX). The principle that the time to acquire a target is a function of the distance to and size of the target directly influences how software products are designed to maximize usability and efficiency. Here are three examples that illustrate this:

  1. Button Size and Placement: According to Fitt's Law, larger targets are easier to hit, and targets that are closer take less time to reach. This is why interactive elements such as buttons on software interfaces are often large and placed in easily reachable areas. For instance, on mobile applications, important buttons like "Add to Cart" in a shopping app or "Post" in a social media app are often large and located at the bottom of the screen, where they are within easy reach of the user's thumb.
  2. Navigation Menus: Fitt's Law also influences the design of navigation menus. Items that are frequently accessed are typically placed closer to the edges of the screen or in locations that require minimal mouse movement. For example, in web browsers, the back and forward buttons are usually located at the top left corner, close to the address bar, minimizing the distance the cursor needs to travel.
  3. Form Design: In forms that require user input, fields that are commonly used or need to be filled out first are generally placed at the top. This reduces the distance that the user's eyes and mouse cursor need to travel, making the process more efficient. For instance, in a signup form, the "Name" and "Email" fields are often the first ones, followed by other fields like "Password" and "Confirm Password".

In all these cases, adhering to Fitt's Law makes the software more user-friendly and efficient, enhancing the overall user experience. By keeping the principles of Fitt's Law in mind, software designers can create products that are not only visually appealing but also functionally optimized.