DEV Community

loading...

Fitts’s Law of UX Explained!

frontendexp
Mobile and Web development
Originally published at Medium on ・5 min read

Key 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.
Usability means it’s easy to use the interface. The time it takes for users to move to and engage with an interactive object is a critical metric. The time it takes for a user to engage with an object is relative to its size and the distance to it.
In other words, as the size of an object increases, the time to select it goes down.
The opposite is true as well: the smaller and further away an object is, the longer it takes to accurately select it.
Origins

American psychologist Paul Fitts predicted that the time required to rapidly move to a target area is a function of the ratio between the distance to the target and the width of the target.

Fitts also proposed an index of difficulty metric to quantify the difficulty of a target selection task in which the distance to the center of the target (D) is like a signal and the tolerance or width of the target (W) is like noise:

Fitts’s law was established as a model for understanding human movement in the physical world before the invention of the graphical user interface, but it can also be applied to movement through a digital interface. There are three key considerations that we can derive from Fitts’s Law.

  1. Touch targets should be large enough that users can easily discern them and accurately select them.
  2. Touch targets should have ample space between them. Last, touch targets should be placed in areas of an interface that allow them to be easily acquired. As obvious as it might seem, touch target sizing is of vital importance: when touch targets are too small, it takes users longer to engage with them. The recommended size varies (Table 2–1), but all recommendations indicate awareness of the importance of sizing.

It’s important to keep in mind that these recommendations are minimums.
Adequate touch target size not only ensures interactive elements are easily selectable but also can reinforce users’ perception that the interface is easy to use.
Small touch targets add to the perception that an interface is less usable, another consideration that affects the usability of interactive elements is the spacing between them.
When the space between elements is too small it is likely the user misses the intended target.
MIT Touch Lab conducted a study that showed that the average adult human’s finger pad is 10–14 mm and the average fingertip is 8–10 mm.2
Google’s Material Design guidelines recommend that “touch targets should be separated by 8 dp [density-independent pixels] of space or more to ensure balanced information density and usability.”
In addition to sizing and spacing, the position of touch targets is important to make it easy to touch a target.
Placing touch targets in areas of the screen that are harder to reach will in turn make them harder to select.
What isn’t always obvious is where exactly these hard-to-reach areas of a screen are, as it changes depending on the context of the user, the device used, etc.
Smartphones, for instance, come in a range of form factors and which people hold in a variety of ways depending on the task and availability of both hands. Some areas of the screen can become difficult to reach when holding the device in one hand and using the thumb to select items while holding the phone in one hand and selecting elements with the other greatly reduces this difficulty.
Even with one-handed use, accuracy does not increase linearly from the lower right to the upper left of the screen.
According to research by Steven Hoober, people prefer to view and touch the center of the smartphone screen, and this is where accuracy is the highest (Figure 2–2).
They also tend to focus on the center of the screen, as opposed to scanning from the upper left to the lower right as is common on desktop devices.

Examples
Form text labels.
By associating a text label element with an input, designers and developers can ensure that taps or clicks on the label will perform the same function as selecting the input (Figure 2–3).
This native feature effectively expands the surface area of the form input, making it easier for users to focus on the input with less precision.
The net effect is a better user experience for desktop and mobile users alike.

Placement of form submission buttons.
These buttons are usually positioned in close proximity to the last form input (Figure 2–4), because buttons that are intended to complete an action (such as pulling out a form) should be close to the active element.
This positioning not only ensures that the two types of input are visually related but also ensures that the distance the user must travel from the last form input to the submission button is minimal.

The spacing between interactive elements is also an important consideration. Take, for example, the connection request confirmation screen in LinkedIn’s iOS app (Figure 2–5)

Which places the “accept” and “deny” actions together on the right side of a dialog. The actions are so close together that users must make a significant effort to focus on selecting the action they wish to perform without accidentally selecting the other.
In fact, each time I see this screen I know it means I have to switch to using two hands to avoid misselecting “accept” with my thumb.
Smartphones, laptops, and desktop computers aren’t the only interfaces we interact with on a daily basis.
Take, for example, infotainment systems, which can be found in the vehicles many use every day.
On the image above we can see that the Tesla Model 3 features a 15ʺ display mounted directly on the dashboard.
Most of the vehicle’s controls are located on this screen and do not provide haptic feedback when the user engages with them. This of course requires the driver to divert their attention from the road to the screen to access these controls, so Fitts’s law is of critical importance.
With the arrival of the larger iPhone 6 and iPhone 6 Plus, Apple introduced a feature that aimed to mitigate the difficulty of one-handed use. The feature, called Reachability, enables users to quickly bring items at the top of the screen down to the lower half of the screen via a simple gesture (Figure 2–7). It effectively enables easy access to parts of the screen that would otherwise be difficult for one-handed users to interact with.

Conclusion
It’s the creator's responsibility to ensure the interfaces augment human capabilities and experiences and don’t distract from or deter them. Mobile interfaces are especially susceptible to Fitts’s law due to the limited screen real estate available.
We can ensure interactive elements are easily selectable by making them large enough for users to both discern them and accurately select them, providing ample space between controls to avoid accidental selection of adjacent actions, and placing them in areas of the interface that allow them to be easily selected.

Discussion (0)