Diving Deep Into Fitts' Law

An Explorable Explanation by Tim Marco

If you spend any time learning about ergonomics, human-computer interaction, or user experience design, you'll probably come across the concept of Fitts' Law.

Although it isn't really a law of the type you might see in physics or math, Fitts' Law is an empircally-verified, predictive equation. In its most simplistic form, it says something like:

It's easier to point at things that are big and close to you than things that are small and far away.

That probably sounds.... pretty obvious, right? Even if you had never heard of Fitts' Law, you probably could have guessed that.

But like a lot of important findings in science—and especially in psychology—there's a lot of important nuance hiding behind the common sense.

And that nuance is really important, because a deeper understanding of Fitts' Law is at the heart of why some things are easy to use (and others aren't). What matters here is that the Law isn't really that simple statement; it's a mathematical model that describes just how hard it is to point at something, given its Distance and Width.

Specifically, it's this:

If you can grasp all of the complexities and nuances contained in that formula, congrats! You're a human computer who doesn't need to read any further.

But if you're anything like most people, the equation alone probably isn't very illuminating. And you'll probably want to continue reading.

Index of Difficulty

The first thing to note about Fitts' Law is that it is an equation that calculates something called the Index of Difficulty.

This is a unitless number that is used to describe how difficult it is for users to point at something. Because it has no units, it can be a little tricky to develop an intuition for what it really represents. For now, just know that this number is always more than zero, and that higher numbers mean that a particular task is more difficult.

You may be wondering what, exactly, could be difficult about pressing a button. It's there, and you just need to move to it, right? In this context, 'difficult' doesn't necessarily mean hard. It's relative. If something is harder to point to, users might need to take a little more time to get there. Or they may be just a little bit more likely to overshoot where they're going, and have to correct themselves.

As you'll see later, the Index of Difficulty winds up being really important for two reasons:

  • First, it allows you to objectively compare the relative difficulty of pointing to things under different circumstances
  • And second, researchers can use it to actually predict the amount of time that it will take a typical user to complete some pointing action.

But before we get there, it's important to get a little more precise about what the Index of Difficulty actually measures.

To get a little more concrete with this idea, think about using an email application, like the one on the right. This isn't a real email app, but hopefully the general concept is familiar enough.

Imagine that you're using this app, and you're ready to send an email.

Pointing Action

If you're using a computer with a cursor and a mouse, you'd want to navigate to the 'Send' button.

This is what's called the pointing action or, more technically, target acquisition. Fitts' Law will help us how difficult this process will be in relative terms

It's important to remember that the pointing action depends on the initial pointer position of the cursor.

Targets

If you want to send out the email, you'll need to move the cursor over the 'Send' button.

In the terms of Fitts' Law, the area where the user needs to move the cursor is referred to as the Target.

In this particular example, the Target is a button with a clear boundary. But that doesn't always have to be the case.

If you wanted to do something other than send the email, you might need to move the cursor elsewhere. Some of these are clear buttons (like 'Save Draft'), but targets can also be textboxes, links, or any other interactive elements.

One of the most common (and difficult) tasks in design is deciding how to balance different potential targets in a confined space. You'll almost always have multiple competing tasks that you want to help users achieve, and prioritizing them can be incredibly tricky.

One of the main benefits of Fitts' Law is that it gives designers an objective way to do just that. Rather than guessing easy one target will be relative to another, they can measure the difficulty precisely.

Distance (to the Target)

There are two aspects of the Target that matter when you want to apply Fitts' Law. The first is the Distance to the target:

Specifically, this refers to how far the initial position is from the nearest edge of the target.

The units to the distance doesn't actually matter here. You could use inches, or meters, or furlongs and the calculation will work just as well. Since this particular example is on a computer screen, we'll use pixels for measurement.

Width (of the Target)

The other measurement that you'll need is the Width of the target.

The word 'width' might be a little bit confusing. Normally, you'd think of things like buttons having only a single, unchanging width. But when you're dealing with Fitts' Law, the measured Width actually depends on where the pointer starts.

That's because the Width is actually a measure of how large the target is compared to a straight line starting at the initial pointer position.

Distance : Width Ratio

If you look back at the equation for Fitts' Law, you'll see that requires you to get the Ratio of the Distance to the Width:

This is why the measurement units don't matter. And it's also why the Index of Difficulty is just a number. Division cancels out the units.

The Binary Logarithm

Even though we've been talking about Fitts' Law as an equation, there hasn't been anything too math-y about it yet. Fortunately, the only part of Fitts' Law that is a little bit more advanced than just measuring distance is the Binary Logarithm, written as log2:

In case it's been a while since you took Algebra I, the Binary Logarithm is a pretty simple math function. Like other functions, it takes in an input value, and produces an output. In most schools, you'd see it visualized like the chart to the right.

You might find it a little bit easier to think of the binary logarithm as two number lines, with input values on top, and outputs on the bottom.

Looking at it this way, one obvious thing to notice is that the output is always going to be smaller than the input. (That's why all of the lines slant to the left).

Taking a look at the binary logarithm helps explain where that '+1' in Fitts' Law comes from. If you feed the Binary Logarithm an input value of less than one, the results are going to be negative.

If you're trying to measure how difficult something is, that doesn't really make any sense. What would it mean for something to have '-2.3 difficulty' even mean? How could you compare it to something with a 2.3 difficulty?.

Adding +1 to the equation just ensures that the results will make sense.

One final thing to note about the binary logarithm is that it is nonlinear. In simple terms, this means that small changes to the input have a much larger effect on the output when you're closer to zero.

For Fitts' Law, this means that increasing the Width of a target will have a much larger effect on closer targets than those farther away.

Full Equation

Now that you know about each of the individual components of Fitts' Law, let's go back to our example of pressing 'Send' in an email app. Try using your cursor to check out how the entire equation plays out.

One last way to think about Fitts' Law for this scenario is to think about what the Index of Difficulty looks like from every possible starting position. Here, we've color-coded every pixel in the window to correspond to the Index of Difficulty at that point.

Here, darker shades of orange correspond to a higher Index of Difficulty. If you look closely, you'll notice streaks of white emanting from each corner of the send button. These correspond to the regions where the Width is highest, because the axis of motion travels across the diagonal length of the button.

At this point, you may be wondering why Fitts' Law follows the binary logarithm. Why can't you just look directly at the Distance / Width Ratio? Why flatten the numbers out?

There's an answer to those questions that goes back to academic fads, information theory, and the history of science. But the better answer is that using the binary logarithm works.

Researchers test out how long it takes users to point to targets in labs all the time. They've been doing it since at least the '50s, when Paul Fitts discovered the law that bears his name.

And time and again, when they collect enough data, the pattern of the binary logarithm accurately predicts difficulty. It just works.

Why This All Matters

If Fitts' Law just told us that bigger and closer targets are easier to hit, it might not be worth dedicating the time to write or think about it. But as we've already seen, Fitts' Law is predictive: it doesn't just tell you that some targets are easier than others, it tells you how much easier some targets are.

That alone turns out to be hugely important. By doing actual lab tests, researchers can easily measure how much time it takes users (on average) to hit targets with a particular Index of Difficulty using a huge variety of pointing devices.

Over time, this allowed organizations to build better tools – both pointing devices and interfaces – based on empirical knowledge, not just gut feeling.

Personally, I think that's interesting and worthwhile. But the really interesting thing about Fitts' Law is that when you follow it to its logical conclusions, you end up with some really surprising tricks for developing things that are really easy for humans to use.

This idea boils down to two basic strategies:

  • First, you can try to make your target widths as huge as possible
  • Or you can try to minimize the distance between users and targets using some subtle design decisions

Let's check out some real-world examples of this.

Maximizing the Target Width

One of the clear takeaways from Fitts' Law is that the Index of Difficulty is inversely proportional to the target Width. If you make targets larger and closer to the user, they'll be easier to get to. That much is obvious, even if the precise relationship is a little surprising.

So if you were designing the interface for email, and you knew that your users would want to hit 'Send' a lot, you might want to reconsider. Where you placed the button. Maybe it'd be better to put it right below the textbox.

Or maybe you'd want to make it bigger.

But at some point, you'd run out of space. The button would get so big that it would crowd out everything else on the screen. So, at least in this one example, you're limited in how easy you can make things for the user.

But there are some peculiar situations where that isn't the case. Sometimes, you can make targets infinitely large. Or at least, effectively infinitely easy for users to access.

To see how, you'll need to think about the real-world context of our example.

The email application runs in a browser, which runs in an operating system, which in turn runs on some kind of a display.

And displays aren't infinite. They have edges.

Think about what happens when you, as a user, try to to move your cursor beyond the edges of a screen. No matter how far you move your mouse (or whatever input device you're using), the cursor doesn't continue. It doesn't loop back around.

It just stops at the edges. You can't overshoot the bottom of the screen.

This has some strange effects for Targets that touch a corner of the screen, like the ones highlighted here.

Because you can't overshoot these targets, they might as well continue on forever. Moving the cursor as fast as you can past the edge is the same as moving it to the edge.

How can you calculate Fitts' Law for something that extends out forever? You need to extend the Width well beyond the actual, physical target.

Try playing around with the example to the right. No matter where you place the initial starting point, the Width is going to be huge (probably so big that you can't even see the whole line).

But the Distance is limited by the height of the screen. So the Ratio, and therefore the Index of Difficulty, is going to be tiny.

It's super, super easy to move the cursor to hit this target. So easy, that these targets have a special name: magic pixels.

Clever interface designers are well-aware of Magic Pixels, and use them to help improve the user experience. In current versions of macOS, for example, moving the cursor to anywhere on the bottom of the screen brings up a dock bar, which makes it easy to switch between applications.

For the same reason, Windows Operating Systems have had a Start Menu / Taskbar locked to the bottom of the screen. In both cases, these are the most important things a user can do. So they deserve a special, magical spot.

Phones

Magic Pixels don't just show up in desktop environments. They are also key to good usability design for touch-based devices like phones and tablets.

Just like in a desktop, targets on the edges of a phone are effectively infinitely large.

And this explains why gestures like swiping from the bottom for important actions are so effective. On most modern phones, swiping from below the bottom of the screen will trigger a special action, like opening up a control panel.

Targets touching the left- or right-hand side of the screen are usually used for things like navigating histories. In most mobile browsers, these let users easily go Back and Forward.

Fitts' Law influenced other aspects of phone design, as well. Scrolling on a cursor-based system is simple enough. You can use gestures on a touchpad, a mouse scroll wheel, or an actual scroll bar on the side of a screen. But none of those would work on touchscreens.

Two-finger gestures would be awkward. Scroll wheels don't exist on your thumb. And given the small physical screen size, the Index of Difficulty for a narrow scroll bar would be incredibly frustrating.

So with Fitts' Law in mind, designers have tried to maximize the Width of the scroll target. Quite literally, in fact: the target for scrolling on phones is usually the entire screen itself!

All of this is to reinforce the idea that Fitts' Law tells us that the nature of the pointing device itself is incredibly important. As a designer, you must take how users are pointing into account. With touchscreens, that device is the users' thumb (or fingers).

And while things makes things more natural for most users, it constrains design. Our thumbs don't have nearly the resolution of a cursor – it's much harder to point to specific pixels on a screen. So things like buttons have to be relatively larger than they would otherwise be.

TV Remotes

Even though we've been talking about digital interfaces so far, Fitts' Law was originally created computer graphics even existed. It isn't limited to interactive displays, and it's just as useful for designing physical controls, like my TV remote.

My remote has a lot of functions. There are buttons to turn the TV on and off, switch inputs, change channels and volume, etc.

Just by looking at the remote, you can tell that some buttons are more important than others. Towards the top of the remote, there's a set of buttons for navigating menus. And towards the middle, there's a set for controlling the DVR Playback.

Both sets of buttons have the same size, so the Index of Difficulty for pointing at either will boil down to the users' Initial Pointer Position. (In this case, the pointer is their thumb, not a cursor).

If you were to naïvely apply Fitts' Law, you might be tempted to assume that it'll be easier to reach the DVR controls. After all, they're located right in the middle of the remote, which should minimize the average Distance to those buttons.

But the physical construction of the remote complicates things a bit. The remote isn't just an abstract interface on a screen. It's a real, three-dimensional, thing.

And it's specifically designed to be held by the human hand. And in a very specific way.

The curve of the back of the remote is an affordance. It subtly – even subconsciously – encourages users to hold it in a specific way. And when they do, their thumbs just naturally land on a specific position: resting on top of the Menu controls.

In practical terms, this means that a vast majority of the time, the Index of Difficulty for the Menu Controls is exactly zero.

Clearly, the designers of this remote intended the Menu Buttons to be the primary interface to the TV. But the larger point here is one of ergonomics.

The physical construction of devices, especially how the can – and can't – be used by humans matters a lot for design. It's intrinsically tied to Fitts' Law, and the interplay between the two has major effects on how easy things are to use.

Sources and Further Reading