Fitts’ Law Explained: Definition and Examples

Imagine you’re standing on a packed tram, holding on with one hand and trying to delete a message with the thumb of the other. The trash icon is a tiny symbol way up in the corner, right next to “Archive.” You miss twice, and on the third try you hit the wrong icon.

That’s no coincidence. A law from motor-control research explains it: Fitts’ Law.

Explained simply

Fitts’ Law says that the time it takes you to hit a target depends on two things: how far away it is and how big it is. The farther and smaller the target, the longer the movement takes and the more often you miss.

Think of tossing a ball into a laundry basket one meter away. You could almost do it with your eyes closed. Throwing the same ball into a cup from five meters takes time, focus and usually several attempts.

The law is named after the American psychologist Paul Fitts, who published it in 1954 in the Journal of Experimental Psychology. He had participants tap back and forth between two target areas with a stylus. The Nielsen Norman Group sums up the formula like this: the time grows with the logarithm of the ratio between distance and target size. For everyday design work, the direction is what counts: bigger and closer means faster.

What it means for interfaces

On screens, the targets are buttons, links, icons and form fields. That gives you three levers. First, size: important actions need a generous hit area. Second, proximity: actions should sit where the mouse or thumb already is, such as a “Continue” button right below the last form field. Third, screen edges: with a mouse, they act like infinitely large targets because the pointer stops there. That’s why the menu bar at the top of macOS or the Windows taskbar is so quick to reach. According to the Nielsen Norman Group, this advantage doesn’t carry over to touchscreens, where your finger can slide past the edge.

How big is big enough?

WCAG 2.2 sets two values. Success criterion 2.5.8 (level AA) requires at least 24 × 24 CSS pixels or enough spacing from other targets. Criterion 2.5.5 (level AAA) calls for 44 × 44 CSS pixels. Apple’s Human Interface Guidelines recommend a hit area of at least 44 × 44 points, and Android recommends at least 48 × 48 dp. Keep in mind that the hit area can be larger than the visible icon, for example through padding.

An example

Here’s an example: a banking app shows a small check mark in the top right corner to confirm a transfer, with an X to cancel right next to it. Many people have to shift their grip to reach it, and a slip of the thumb lands on the wrong action.

After the redesign, a wide “Send transfer” button sits at the bottom, easy to reach with your thumb. “Cancel” is a text link with clear spacing. The main action is now big and close, while the risky one is deliberately a bit farther away.

In practice

Make the main action the biggest target. Whatever people do most often gets the largest area. Making whole cards or list rows clickable enlarges the target without extra visual clutter.
Keep risky actions at a distance. “Delete” doesn’t belong right next to “Save.” Here, a little extra distance is exactly what you want.
Think about thumbs and edges. On a phone, the thumb reaches the lower part of the screen most easily. For more on navigation patterns on small screens, read The 4 Most Frequently Asked Questions About the Hamburger Menu. You’ll find more laws like this one in the Laws of UX resource.

Related terms

Hick’s Law, Accessibility, WCAG

Fitts’ Law