Fitts's Law

How big a button should be and where it should sit was a matter of taste for a long time. One side argues that more whitespace looks tidier and wants it smaller. The other side says it's hard to hit and wants it bigger. Neither has evidence, so the argument goes to whoever is louder or more senior.

Pagedeck had exactly this fight while reworking the document toolbar. Noa posted a mockup with the icons shrunk to 24 pixels and Theo said he kept hitting the button next to the one he wanted. Noa said it was fine on her screen. Both statements came from one pair of hands, so the conversation had nowhere to go.

Fitts's law moves that argument into units of time. It comes out of a 1954 experiment that timed people reaching out to touch a target over and over, and found the elapsed time was almost fully explained by two things: how far the target was and how big it was. Once size and position are a question of milliseconds rather than prettiness, the decision turns on which option is faster instead of who argued harder. What interaction design calls a law is this kind of thing — a human limit that has hardened into a number or a trend. The Doherty threshold, which says a response inside 0.4 seconds keeps a person from dropping the thought they were holding, and Miller's law, which puts the number of items someone can hold at once around seven, sit in the same group.

The time to hit something follows the ratio between the distance to the target and the size of the target. Move it further away and the time goes up; make it bigger and the time goes down. Equal ratios feel about equally fast, which is why a large button far away and a small button close by come out similar.

The change is gentle in both directions. Doubling the distance doesn't double the time; it adds a bit. So reshuffling a whole layout to halve a distance usually pays less than simply putting the control near wherever the hand already is.

Three design rules fall out of this.

1. Make frequent targets bigger. In a document toolbar, save and share get pressed dozens of times a day and deserve the size; export settings, used once a month, can stay as they are. Going from a 24-pixel icon to a 44-pixel one cuts both the time to hit it and the time spent undoing a mis-hit.
2. Put frequent targets close. Close means close to where the hand was a moment ago, not close to the center of the screen. For changing formatting mid-sentence, a small bar that appears right where the text was selected is far nearer than a toolbar pinned to the top of the window.
3. Use screen edges and corners as targets. A cursor can't leave the screen, so it stops at the edge — which makes a control pinned to the edge behave like an infinitely thick target even if it's one pixel wide. The menu bar welded to the top of the macOS screen uses this property. Corners are easier still because two directions block at once.

For actions that are hard to undo, the law gets applied in reverse. Delete account and reset everything go small, far away, and one level in. Slow is the point.

The most quoted application is minimum touch target size. A fingertip covers far more screen than a cursor and it isn't precise about which part of that area registers, so mobile operating systems each carry guidance to keep the tappable area around 44 points on a side even when the visible icon is smaller. Widening transparent padding satisfies it without enlarging the icon at all.

The habit of putting important controls near the bottom of a phone screen comes from the same place. Held in one hand, the thumb covers the lower half comfortably while the top corners require regripping. A button up there isn't just far — it adds the cost of changing hands.

Context menus opening at the point of the click, resize handles living on corners, and file drop zones covering most of the window are the same reasoning. It also constrains gestures, the tap, swipe and long-press family of inputs, where the target often isn't visible in the first place.

"This button's touch area is only 32 points. I'll leave the icon and grow the padding."

Keep the visible size, expand the hittable area.

"Let's not put delete right next to save. By Fitts that's the easiest spot on the screen to hit."

An irreversible action is occupying the fastest real estate.

"The toolbar is too far away in full screen. Let's float it at the selection."

A proposal to cut distance by bringing the control to the hand.

When Pagedeck rebuilt the toolbar, Noa opened with this law. She pulled a month of press counts for every button first. Bold and link together came to nearly half of all presses; insert table and footnote came to two percent combined. So the four heaviest moved into a small bar that appears at the selection, and everything else went into the top menu.

Theo asked whether that made life worse for people who use footnotes. Noa said yes. Screen space that is both near and large is finite, so pulling one thing forward pushes another back. What the law actually decides isn't what to enlarge — it's what to demote.

The most common misreading is that bigger is simply better. Large targets are faster, so enlarging everything sounds like the logical conclusion. But the screen has fixed width, and growing every button pushes them apart, which moves all of them further from each other. What gets lost on distance cancels what got gained on size. A toolbar with twelve enlarged icons often ends up slower than the one nobody touched.

The second is assuming distance doesn't apply on touch screens. A finger can land anywhere directly, so travel seems to disappear. In practice the thumb still travels across the screen from wherever it is resting, and anything outside its arc adds the time to shift the grip. Leave that assumption in place and the confirm button lands in the top-right corner of a phone screen, where a user who presses it several times a day regrips the device every single time.