Fitts’ Law: Why Your Buttons Are in the Wrong Place and the Wrong Size

Last year I was doing a walkthrough of a web app. Nothing exotic, a standard dashboard with a data table and a few actions. The primary button sat in the top-right corner of the screen. Small, precise, about 28px tall. The users we watched kept missing it. Not because they didn’t know it was there. Because their hand had to travel across the entire screen to reach a small target after finishing their work in the center.

The designer who built it called it “consistent placement.” It was consistent. It was also exhausting to use twenty times a day.

This is Fitts’ Law. Not a vague principle about “making things accessible”. An actual formula that predicts how long any pointing movement takes, based on two variables. Teams that understand it build interfaces that feel effortless. Teams that don’t build interfaces that feel subtly wrong, and spend the next year trying to figure out why users seem “hesitant.”

The formula nobody teaches but everybody uses

Paul Fitts published his research in 1954, studying the relationship between target size, distance, and movement time (source: wikipedia.org). The formula:

MT = a + b × log₂(2D / W)

Where MT is movement time, D is the distance to the target, and W is its width. Time increases with distance and decreases with target size. Both variables matter — and they interact.

Two variables. Both matter. Neither alone is enough.

What most designers miss: a large button that is far away can be harder to reach than a small button that is close. You can’t fix a bad placement with a bigger button. The NN/g analysis of Fitts’ Law across modern interfaces confirms the formula holds for mouse, touch, and stylus inputs with predictable variance by device type (source: nngroup.com).

The guidelines exist. Teams ignore them anyway.

Apple’s Human Interface Guidelines recommend a minimum touch target of 44×44pt for all interactive elements (source: developer.apple.com). The W3C WCAG 2.5.5 criterion sets the same threshold at 44×44px for accessibility compliance (source: w3.org).

These numbers aren’t aesthetic preferences. They’re derived from motor research. A 28px button on a mobile screen requires substantially more precision than a 44px button. More precision means more time, more errors, and more frustration. Especially for users who are tired, moving, or holding a coffee.

And yet. Open any B2B SaaS product and count the buttons under 36px. Count the icon-only actions without hit area expansion. Count the modal close buttons sitting at 16×16px in the corner. The guidelines exist. The implementations regularly don’t follow them.

Distance is the variable teams forget completely

Touch target size gets some attention in mobile design reviews. Distance gets almost none. But in the formula, distance is equally important.

The average flagship phone in 2025 has a screen around 6.7 inches. The average human thumb has not grown since 2019 (source: medium.com). The result: the top of the screen on most modern phones is nearly unreachable for one-handed use. Placing your primary CTA in the top-right corner visually clean, “consistent with web conventions”puts your most important action in the zone that requires the most motor effort.

The screen got bigger. The thumb didn’t.

On desktop, distance works differently. Fitts’ Law has a well-known corollary: screen edges and corners are effectively infinite-size targets, because the cursor stops at the boundary. This is why the macOS menu bar lives at the top edge. You can slam the cursor upward at full speed without overshooting. It’s why the Windows Start button sat in the bottom-left corner for decades. Not arbitrary aesthetic choices. Motor-optimized placements.

Screen edges are infinite targets. Most products ignore this.

Most web products put primary actions floating in the middle of the screen, in small buttons with generous whitespace around them. Visually balanced. Physically wasteful.

Where the real violations happen

Destructive actions too close to primary ones. “Delete” and “Save” sitting 8px apart, same size, same visual weight. One misclick between completing the task and losing the work. This is a Fitts’ Law violation in the most expensive possible direction.

Icon-only toolbars with no hit area expansion. The icon is 16×16px. The actual clickable area is also 16×16px. This looks elegant in Figma. It produces error rates that show up in your support queue.

Modal close buttons at 16px in the corner. Every modal. Every time. There’s a direct line between this decision and users who close the browser tab instead.

Form submit buttons at the bottom of long pages. The user finishes the last field. The cursor is wherever that field was. The Submit button is at bottom-right. Distance: maximum. Effort: unnecessary.

A practical checklist

On mobile:

• Primary CTA in the bottom third of the screen, within natural thumb reach
• Minimum touch target 44×44pt. No exceptions for “small” or “secondary” actions
• Destructive actions separated by at least 16dp of dead space from primary ones
• Icon-only elements: expand hit area to 44pt even if the visual is smaller

On desktop:

• Use screen edges for frequently repeated actions: navigation, toolbars, menus
• Primary CTA close to where the user finishes their last action, not where it looks symmetric
• Enough distance between confirm/cancel pairs to prevent misfires
• Check hover states to see actual hit area. Catch violations before they ship

In design review:

• Check actual px values on interactive elements, not just visual appearance
• Ask: where is the user’s pointer realistically sitting after the previous step?
• Any action performed more than 10 times per session deserves a Fitts’ audit

The nuance: efficiency isn’t the only goal

Optimizing purely for motor efficiency produces interfaces that look like they were designed by a physical therapist. Nobody wants every button enormous and pinned to the nearest edge.

Reserve premium real estate: bottom of mobile screen, screen edges on desktop, proximity to the completion point of the previous action. For actions users perform frequently and need to reach reliably. Put low-frequency, high-consequence actions somewhere that requires deliberate effort. That’s not an accessibility failure. That’s intentional friction.

The formula is a tool. Using it means knowing when distance is costing your users something real, and when it’s a reasonable design choice.

Nobody re-audits for motor cost

Teams do accessibility audits for color contrast. They check font sizes. They almost never run a systematic audit for target size and placement. There’s no linting rule for Fitts’ Law. No automated test. It shows up, if at all, in usability studies. Which most teams run infrequently, on timelines that don’t match sprint velocity.

The result: motor cost accumulates exactly the way cognitive load does. Decision by decision, sprint by sprint, until the interface feels “a bit slow” and “a bit error-prone” and nobody remembers why.

Paul Fitts described this in 1954. The physics of human hands hasn’t changed since. What changes is whether the team in charge of the interface has a shared framework for measuring it.

Build the framework. Run the audit. Your users’ thumbs will thank you.

I audit interfaces against Fitts’ Law and 29 other UX principles using a Claude skill I built called Prism 👉 How it works.