How to use Fitts' Law in UX design

Whether you're an experienced product marketer or an amateur UX designer, it’s important to know the foundational UX laws.

These principles steer product design and shine a light on the psychology behind UX. Therefore, you should follow them if you want to produce winning designs.

One such principle is Fitts' Law. In this blog, we'll explore the nuts and bolts of Fitts' Law, look at how it applies to user experience design, and examine some examples of it.

Don't let UX problems go unnoticed

Use Dovetail to analyze all your customer interviews and uncover hidden UX issues that are costing your business every day.

Analyze with Dovetail

Before learning how Fitts' Law in UX design works, we must first look at exactly what it is and its original intended use. 

Coined by psychologist Paul Fitts in 1954, Fitts' Law intends to model the act of pointing at a target on a computer monitor. Unexpectedly, it was also designed to account for both mouse and hand actions.

Fitts' Law states that "the time to acquire a target is a function of the distance to and size of the target." This means that the bigger the object and the closer it is to us, the easier it is to move to that object.

The nuts and bolts of this well-known psychological phenomenon are not difficult to understand. 

Essentially, Fitts' Law is all about illustrating the time it takes to reach a target object. A target object, in the context of UXs, can be any interactive element, such as buttons, icons, tags, filters, and the like. The quicker you can reach a target object, the more convenient and easy it is to use.

For instance: imagine you're focusing your mouse cursor and attention on the logo of a given website. You're then compelled to click a button, so you focus on the button in question. The speed and efficiency of this movement from one position to another is what Fitts' Law aims to pinpoint.

Like most other laws, Fitts' Law centers on an elaborate mathematical formula:

MT = a + b * log2 (2 D/W)

In the above equation:

• MT is the time it takes to move to a target 

• a + b are constants dictated by the type of device

• D is the distance from the starting point to the target

• W is the width of the target along the axis of motion

Note that the only variable taken into account is the width of the target object. Depth and height don't come into play when working in two-dimensional mediums such as monitor screens.

However, this doesn't necessarily mean that height isn't important. Say you created a target object 250 pixels wide (to satisfy Fitts' Law) and only two pixels high. It's quite obvious that users will find it incredibly difficult to click on that object with real accuracy. In other words, Fitts' Law isn't foolproof. Apply common sense if and when need be.

As a UX designer, you know how daunting and time-consuming it can be to decide where to put action buttons on the UI. The space is huge, and the options are practically endless. But thanks to the prime pixel in Fitts' Law, it's possible to make your user's life much easier. 

As the name suggests, the prime pixel is a superpixel that determines your users' next move. It's not in the middle of the screen or in any corner. It sits right at the center of the user's sight. It's the pixel of the cursor. When they're navigating your system, they always start from where they left off in the previous step. Ideally, this is where you'll want to place your action button for maximum effect.

There's a caveat, though. It's much harder for your websites to utilize the prime pixel compared to applications or browsers. That's because it changes every time the user moves their cursor. In short, you cannot predict the prime pixel when users arrive on a site or when they're playing with their mouse.

The good news is it's much easier to determine the likely prime pixel when a user takes an action. So, for instance, if a user clicks on login, the box that appears for them to complete that action should be as close to the login button as possible.

In addition to the prime pixel, Fitts' Law also accommodates other not-so-important pixels. They're known as the "magic pixels." At their simplest, they're the four corners, the top edge, and the bottom edge of a screen.

The role of the magic pixels is to create boundaries. A user's cursor cannot move beyond these areas, meaning they're the furthest points from the prime pixel. With that in mind, avoid placing anything important in magic pixels when applying Fitts' Law, as users will most likely miss it.

As we mentioned earlier, two key variables impact movement time: the size of the target and the distance to the target. In this section, we'll use these variables as our categories as we discuss the nitty-gritty of how to apply Fitts' Law in UX.

Optimizing target size

Bigger is better

If there's one standout takeaway from Fitts' Law, it's that large targets work excellently. Fitts' Law clearly states that people will be faster to move, tap, or click on bigger targets. Additionally, error rates decrease as target sizes increase.

In some situations, though, bigger might not necessarily be better. A button that takes up half the screen isn't a good idea, and we don't need a mathematical study to tell us.

Icons plus labels

Universal icons are rare. As such, for your icons to truly make an impact, they need labels. Not only does a text label overcome icon ambiguity and helps clarify its meaning, but it also boosts movement time toward that specific target.

The reasoning behind this is simple: an icon and a label combined will be bigger than an icon alone and, hence, according to Fitts' Law, will be easier to spot and access.

Don't overcrowd targets

One common mistake that UX practitioners make is clustering targets together, so much so that they appear messy and overcrowded. With such a setup, it's highly likely that a user may aim for one target and mistakenly trigger another. This is particularly the case with small targets on a mobile phone screen.

Keep in mind that padding is not enough

A padded target is typically a small target with a larger invisible space around it, otherwise known as white space. At most, padding will help prevent a few overshooting errors. 

However, users may still overshoot and click on the wrong target. That's because most non-designers can't tell a padded target from one that's not padded. So they'll still slow down more than necessary when approaching the target to ensure they don't go outside the visible area. This defeats the very essence of Fitts' Law.

Infinite targets along screen targets

The edges of the screen are "infinitely deep." You can't miss the edge as the mouse stops when it gets there. Also, this infinite depth is doubly true for corners, so those are the easiest areas to select, not under the mouse. 

Operating-system designers have taken full advantage of this consequence of Fitts' Law. Check any MacOS you'll come across, and you'll notice that the application menus appear at the very top of the screen, on the horizontal edge. This allows the user to reach that area without hiccups.

Note that while edge placement works brilliantly for mouse- or trackball-driven UIs, it offers no real benefits to touchscreen users. If anything, it increases the access time for targets positioned around ages. That's because, for touchscreens, it's the thumb doing the clicking. As such, users are more likely to overshoot and hit beyond the edge of the screen. 

Optimizing distance to target

Menu design

The different types of menus are all capable of impacting movement time. A pie menu, a ribbon menu (rectangular menu), or a linear menu produce a different effect on the click factor.

In a linear menu (or pull-down menu), the time it takes to reach the first item in the menu is the shortest, and the time to reach the last item is the longest—simply because the distance to that first element is shortest and the distance to the last item is longest. For this reason, you might want to order elements based on how frequently users utilize them, with the most frequently used ones at the top.

In a rectangular menu (or square menu), the average distance to an item inside the menu is smaller than if all the items were placed in a long list, one under the other—that is, a linear menu.

What if it took the same time to reach all elements of the menu? That can only be possible if all the elements are equally distanced from the handle (they're on a circle centered in the menu handle). That's how the pie menu (or radical menu) was born. Pie menus are more efficient than rectangular menus, which, in turn, are more efficient than pull-down menus.

Place related targets close to one another

If you know you have targets that users will click in a specific order, place them close to each other to reduce the distance between them and optimize the overall movement time.

However, be careful not to place targets too close to each other, as this may make the interface look cluttered. There's also the possibility of overshooting.

Google

Google has mastered the art of utilizing likely prime pixels and magic pixels.

Its search box is always in the center of the screen, and its menu options are in the upper corners.

Even more impressively, the "Google Search" button is directly below the search input field, shortening the path to the desired action.

Nest

Despite its compact size, the Nest thermostat allows users to operate the entire unit with very little effort. That's because it embraces the pie menu in its interface. According to Fitts' Law, pie menus are more efficient than both linear and rectangular menus.

Spotify

Spotify's desktop app is another shining example of Fitts' Law. Through its right-click menu, users can effortlessly access commonly used functions. A user doesn't even have to move their mouse from its starting point to access these functions. This ensures the users can almost always utilize the prime pixel.

As a fundamental UX design concept, Fitts' Law empowers you to design experiences that support users in their tasks. By ensuring the target action is always accessible to the user—in terms of the target’s size and the distance the user has to travel—you significantly increase your product's usability. Make no mistake, today's demanding users aren't willing to compromise on that aspect whatsoever.

That said, take Fitts' Law with a pinch of salt. When it comes to testing user experience, data is always king. The best way to know if your design is user-friendly is to roll it out to real users. In other words, only use Fitts' Law as a starting point, an essential guideline, not as a hard and fast rule.

While Fitts' Law does not apply to regular drop-down menus. That's because these menus prevent users from accessing the target in a straight line. As a result, cursor movement increases, undermining the very purpose of Fitts' Law. The best way to utilize drop-down menus is to arrange items according to the frequency of use.  

Fitts' Law does not apply to continuous motion (e.g., drawing). It only applies to rapid, pointing movements (e.g., thumb-to-screen action in smartphones).

Yes. Generally speaking, Fitts' Law advocates the need to give up speed to gain acceptable levels of accuracy. To achieve this, one has to adjust movement time so errors are acceptably small.

According to Fitts' Law, the precision of performing any given task significantly depends on how fast a person completes it.