Overview

Usability is a key aspect of good design. As the term implies, ‘ease of use’ means the interface is easy to understand and navigate. It also means that interaction with the interface is painless and straightforward, and that users can engage with interactive objects without much effort. The time it takes for users to move to and engage with an interactive object is a critical metric. Compounded by the wide range of input methods available today, from the precision of the mouse to the relative imprecision of fingers, it’s important that designers size interactive objects appropriately to ensure they are easily selectable and they meet user expectations in regards to the selectable region.

To aid in this endeavor is Fitts’s Law, which describes the time it takes for a user to engage with an object is relative to the size and distance to it. In other words, as the size of an object increases, the time to select it goes down. Additionally, the time to select an object decreases as the distance that a user must move to select it decreases. The opposite is true as well: the smaller and further away an object it, the longer time it takes to accurately select it. This rather obvious concept has far-reaching implications, which we’ll unpack in this chapter, as well as take a look at some supporting examples.

Origins

The origins of Fitts’s Law can be traced back to 1954, when 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 (Figure 1.1).1 Today, it’s regarded as one of the most successful and studied mathematical models of human motion and it’s widely used in ergonomics and human–computer interaction to model the act of pointing either physically or virtually.

Figure 1-1. Diagram depicting Fitts’s Law

Fitts’s 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 (Figure 1-2).

Figure 1-2. Fitts’s metric to quantify the difficulty of a target selection task

Key Considerations

Fitts’s Law was established as a model for understanding human movement in the physical world before the invention of the graphic user interface, but it can also be applied to movement through a digital interface. There are three key considerations that Fitts’s Law gives us: first, touch targets should be large enough for users to both discern what it is and to accurately select them. Secondly, touch targets should have ample spacing between each other. Lastly, touch targets should be placed in areas of an interface that allows them to be easily acquired.

Touch Target Sizing

As obvious as it might seem, touch target sizing is of vital importance and should be repeated: when touch targets are too small, it takes users longer to engage them. The recommended size varies (Figure 1-3) but all recommendations indicate awareness of this importance. Adequate touch target size not only ensures interactive elements are easily selectable, but can reinforce to users that the interface is easy to use. Even if a selection error is avoided, small touch targets add to the perception that an interface is less usable.

Figure 1-3. Minimum touch target size recommendations converted to physical measurement (millimeters).

It is important to keep in mind these recommendations are minimums. Designers should aim to exceed these target touch areas whenever possible to decrease the need to precise accuracy.

Touch Target Spacing

Another consideration that affects the usability of interactive elements is the spacing between them. When the spacing between elements is too small, the likelihood of touch target errors increases. MIT Touch Lab conducted a study titled “3-D Finite-Element Models of Human and Monkey Fingertips to Investigate the Mechanics of Tactile Sense” 2 where they found that the average human finger pad is 10-14mm and the average fingertip is 8-10mm for most adults. It’s inevitable that a user will partially touch outside a touch target, and if additional touch targets are too close they might be accidentally selected. One recommendation to mitigate the false activation that can happen when targets are too close can be found in Material Design (Google), which says “touch targets should be separated by 8dp of space or more to ensure balanced information density and usability”.

Touch Target Positioning

In addition to sizing and spacing, the position of touch targets is key in how easily selectable they are. Placing touch targets in areas of the screen that are harder to reach will obviously make them harder to ultimately select. What isn’t always obvious is where exactly are these hard to reach areas of a screen, which changes depending on the context of the user. In general, touch targets that are closer to the edge of the screen are easier to select because they require less travel distance to acquire. An important caveat to keep in mind here is that users that are using a device with one hand will have difficulty reaching specific areas of the screen. (Figure 1-4)

Figure 1-4. Thumb zone difficulty (left hand).

The image above illustrates the zones that are more difficult to reach with a thumb when using a smartphone with a single hand. As the size of the device increases, the zones that are hard to reach or require stretching to reach expand while the easy to reach area contracts. This is a result of a decrease in dexterity of the hand while holding the larger device.

Examples

We’ll begin our examples by looking at a common example of Fitts’s Law: 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 1-5). This native feature effectively expands the surface area of the form input, making it easier for users to focus the input with less precision. The net effect is a better user experience for desktop and mobile users alike.

Figure 1-5. Touch target area on text label + form input.

Another example is the connection request confirmation screen on LinkedIn’s iOS app (Figure 1-6), which places the two action 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 two hands to avoid misselecting ‘accept’ with my thumb.

Figure 1-6. LinkedIn Invitations screen features actions that lack ample space between them.

The interfaces we interact with on a daily basis are not isolated to smartphones, laptops and desktop computers. Take for example infotainment systems, which can be found in the vehicles many use every day. The Tesla Model 3 features a 15” display mounted directly on the dashboard and is the center of attention within the vehicle. Most of the vehicle controls are placed within this screen and do not provide haptic feedback when the user engages with them. This of course requires concerted attention to acquire the control and diverts attention from the road to the screen, and Fitts’s Law is of critical importance. The Model 3’s follows Fitts’s Law providing ample space between the bottom navigation bar items (Figure 1-7), which mitigates accidental selection of adjacent actions.

Figure 1-7. Tesla Model 3 Infotainment navigation bar features sufficient space between items.

I mentioned thumb zones in regards to touch target positioning earlier, and how positioning touch targets in hard to reach areas of the interface make them harder to select. With the arrival of the larger iPhone 6 and iPhone 6 Plus, Apple introduced a feature that aimed to mitigate difficulty for one-handed usage and thumb zones on their new devices. The feature, called ‘Reachability’, enabled users to quickly bring items at the top of the screen down to the lower half of the screen via a simple gesture (Figure 1-8).

Figure 1-8. iPhone Reachability feature allows easy access to top half of screen. (Source: Apple)

This feature effectively enables access to parts of the screen that were difficult to access for one-handed users on these larger devices.

Key Takeaways

Touch targets should be large enough for users to both discern what it is and to accurately select them.

Touch targets should have ample spacing between each other.

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

Conclusion

Fitts’s Law is a very appropriate principle to begin with because it’s fundamental to good user experiences and illustrates how neglecting to consider it can lead to life-threatening situations. A key responsibility we have as designers is to ensure the interfaces we create augment human capabilities and experiences, not distract 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 what it is and to accurately select them, providing ample space between them to avoid accidental selection, and place them in areas of an interface that allows them to be easily acquired.

Index

Fitts, Paul M. (June 1954). “The information capacity of the human motor system in controlling the amplitude of movement”. Journal of Experimental Psychology.

Dandekar K., Raju B.I., Srinivasan M.A. (2003). 3-D finite-element models of human and monkey fingertips to investigate the mechanics of tactile sense. Journal of Biomechanical Engineering, 125, 682–691.