Leveraging Fitts’ Law: User Interface Design Principles for E-commerce

Small improvements to an e-commerce site’s purchasing flow can make a big impact when enticing visitors to become paying customers. By applying Fitts’ Law to an e-commerce site’s interface, designers can make it easier for users to find exactly what they’re looking for, add items to their carts, and ultimately make purchases.

Fitts’ Law says that the amount of time it takes for a person to move a pointer to a target is a function of the distance to the target divided by the size of the target. Essentially, it means that objects that are larger and closer are easier to interact with. The law was originally conceived in 1954 by psychologist Paul Fitts, who created mathematical models of human behavior and worked to quantify the abilities of the human nervous system.

Fitts’ Law quantifies the speed-accuracy trade-off: The more precise the execution of a task has to be, the longer it will take to complete. Translated for UI design, it means that the further away a target—such as an “Add to Cart” button—is from a user’s cursor or finger, the larger that target has to be. That way, the act of reaching the target does not require much precision, and can be executed quickly.

The importance of making a UI component larger may seem obvious, but Fitts’ Law is not about increasing size for visual impact. It’s about reducing the amount of time it takes a user to reach a component with their cursor or finger. Often, that means making a UI component larger, but it could also mean deploying other techniques that allow users to move through an e-commerce site more efficiently and ultimately make a purchase.

Breaking Down the Fitts’ Law Formula

The mathematical equation that Fitts wrote is t = a + b log2 (2 d/w) where:

• t equals time.
• a and b represent regression coefficients that are derived from observation of the tests.
• d is the distance between the starting point and the target.
• w is the width of the target.
• log2 indicates that the formula is logarithmic, and log2 (2 d/w) yields the Index of Difficulty (ID), a measurement that quantifies how hard it is to acquire the target.

The logarithmic equation indicates the relationship between target size or distance and reaction time: A small size or distance increase for small targets can make them easier to acquire, whereas a small increase in size or distance for larger targets won’t make them much easier to reach.

In light of the equation, e-commerce UI designers must take two things into account: the size of an interface target relative to other items on the site and the distance of that target from the cursor. Applying Fitts’ Law for e-commerce means making a target easy to spot and interact with so customers can complete their task quickly and move to the next step in the purchasing process.

Fitts’ Law and E-commerce UI Design: A Perfect Fit

Fitts’ Law also helped give rise to the concept of the prime pixel—the location of a user’s cursor at any given moment. The goal for e-commerce UI designers is to shorten the distance from the prime pixel to the target as much as possible. But since the prime pixel is variable (Who knows where exactly a user will place their cursor when they arrive at a page?), there are several techniques for controlling the fixed components of an e-commerce page in order to place them as close as possible to where a user’s prime pixel is likely to be.

Design for Efficient Product Discovery

On successful e-commerce sites, products are easy to find. One way to use Fitts’ Law to improve product discovery is to add search functionality to the hero section of the homepage. People tend to scan web pages in predictable patterns, and scanning behavior and cursor movements are closely correlated.

Placing a search bar in an area where you’d expect visitors to gaze—and therefore position their cursor to create their prime pixel—could dramatically reduce the distance they would need to move their cursor in order to enter a search query. In addition, implementing predictive search can help bring users to target listings more quickly.

Optimize E-commerce Menus

A critical feature of any successful e-commerce site is a menu that allows customers to explore efficiently and find the categories and products they’re shopping for. Apply Fitts’ Law by adopting an automatic drop-down menu that appears when a customer hovers over a content category. Avoid placing too many items in one list so users don’t have to move the cursor far to select an item. Additionally, employ good information architecture and product photos to provide users with larger target areas that shorten the distance their cursors need to travel to make selections.

Increase the Surface Area of Call-to-action Buttons

The obvious place to apply Fitts’ Law is to a CTA button that will trigger a purchase. Make the button large so that it stands out and is easy to click; acquiring a larger target requires less accuracy. Additionally, make the button obvious by including it above the fold, applying accessible contrast, and placing it far enough away from other components that users don’t click on the wrong element. T0 further boost users’ decision-making confidence, ensure that microcopy on the button is clear and instructive.

Also consider placing the CTA button along the edge of the screen to maximize the use of what are known as magic pixels, areas of the screen where a user can navigate quickly and imprecisely while still hitting the target.

Make Some Actions Harder Than Others

In most cases, e-commerce UI designers apply Fitts’ Law to speed up users’ interactions. However, in some cases they may want to slow them down. For instance, designers might implement small check boxes for product add-ons that are further away from the prime pixel (which in this case is likely an “Add to Cart” button). Doing so would force users to be more precise when selecting additional products, ensuring they don’t purchase unwanted items inadvertently.

Fitts’ Law for Mobile Devices

In applying Fitts’ Law to e-commerce UI design for mobile devices, designers must factor in some constraints.

Fingers Are the Cursors

On mobile devices, there are no cursors. Users rely on their fingers to engage with the interface. However, fingers are thicker and therefore less precise than cursors. Touch targets should be bigger for mobile applications than they are for websites. Consider a CTA button that spans the width of a screen, and increase its padding to make it more clickable.

Mobile Use Is Often One-handed

Much of the time, users hold their mobile devices in one hand and operate them with their thumbs. This generally restricts users to interacting with the bottom of the screen unless they use two hands to enable touching the top. In considering UI design for mobile e-commerce, designers should place their desired targets within the natural reaching range of the thumb.

Consider the Caveats

When applying Fitts’ Law, it’s worth considering two key questions: What is the primary goal that users want to accomplish when they land on this page? And: How can I make that goal easy for users to achieve?

Fitts’ Law isn’t a silver bullet; there will be instances when it makes sense to apply it and times when other concepts are more appropriate. In the case of e-commerce, it is also worth considering whether focusing on another aspect of the site—for instance, how well the content speaks to the audience—could yield better results.

There is also the danger that Fitts’ Law could be used as a dark pattern, as sometimes happens with ads that appear on search engine pages. Typically, these ads are presented at the top of the page as though they are search results themselves. This is an example of Fitts’ Law, as the distance between the ad and the component last interacted with are near one another. While there are many good use cases for displaying a company’s ad next to a relevant search result, this design decision is often hijacked by competitors that want to misdirect users.

Follow Fitts’ Law for E-commerce Success

Although Fitts’ Law was developed decades before the advent of the internet, it’s a valuable principle in digital product design. Today, designers can use Fitts’ Law to boost revenue by making it easier for e-commerce customers to navigate a site, find products, and make purchases.