What is Fitts's law?

Table of contents

• How does Fitts's law work?
• How does it apply to web interfaces?
• What does it mean for mobile?

How does Fitts's law work?

Movement time rises with distance and falls with target width, on a logarithmic scale. Practically:

• A bigger target is faster to hit, with diminishing returns past a certain size
• A closer target is faster to hit
• Size matters along the axis of movement, so a wide flat button approached from above benefits from its height more than its width

What Fitts measured was rapid aimed movement toward a target of known position, with error rates held roughly constant. Movement time is the part the law predicts. Whether a visitor notices a button, understands it, or wants to press it sits outside the model, and several rules commonly filed under Fitts's law, including minimum tap sizes and thumb reach, come from platform guidance and biomechanics rather than from the equation.

Screen edges bound the pointer. An element flush against the edge of the display cannot be overshot, so its effective size along that axis is unbounded. This is why operating system menu bars sit at screen edges. Web pages get little of this, since page content usually sits inside a viewport with margins around it. The version available to a website is an element pinned to the top or bottom edge of the viewport, which a maximized browser window puts against the screen edge.

The starting position matters as much as the target. A button's effective distance is measured from where the pointer already is, which is usually where the visitor last interacted.

How does it apply to web interfaces?

Make the whole element clickable, not the text inside it. A card where only the heading is a link forces precision that the visual design did not ask for. This is one of the most common sources of dead clicks on Webflow sites, where a link block wraps the title instead of the card.

Include padding in the target. A button's clickable area should extend to its visual boundary. Padding that sits outside the link is a trap, since it looks like part of the button and is not.

Place the primary action near where attention already is. A CTA immediately after the argument that justifies it is closer, in Fitts terms, than one in a distant sidebar.

Keep destructive and primary actions apart. Adjacent targets of similar size produce mis-hits, and the cost is asymmetric when one of them deletes something.

The dominant Fitts failure on the web is an element whose clickable area is smaller than its visual area. Undersized buttons are the rarer problem.

What does it mean for mobile?

A fingertip is a larger and blunter pointer than a cursor, and the contact area is hidden by the finger at the moment of the tap.

Minimum target size. Roughly 44 CSS pixels on a side is the widely used floor, taken from platform guidance rather than from the law. Below it, mis-taps become common and surface in analytics as rage clicks.

Spacing between targets matters as much as size. Two adequately sized buttons with no gap still produce mis-taps.

Thumb reach shapes practical distance. On a phone held one-handed, the bottom and center of the screen are cheap to reach and the top corners are expensive. A primary action in the top right is technically visible and physically awkward.

There is no hover state to correct with. On desktop a visitor can see what they are about to hit. On touch, the first feedback is the tap itself, so target accuracy carries more weight.

Where do Webflow builds break Fitts's law?

Verify tap targets on a real device rather than in the Designer's responsive preview. The common Webflow failure is a link block smaller than the styled element it appears to fill, which looks correct at every breakpoint and mis-taps constantly in the hand.

Related terms

Hick's law · Dead click · Rage click · Mobile conversion rate · Cognitive load

Service: Conversion Rate Optimization.

FAQ

What is the minimum button size for mobile?

Around 44 CSS pixels on a side is the widely adopted floor, with spacing between adjacent targets mattering as much as the size itself. The number comes from platform guidance, not from Fitts's law, which sets no minimum.

Does Fitts's law apply to touchscreens?

Yes, and more strongly. The finger is a larger and less precise pointer than a cursor, and there is no hover state to correct an imprecise approach before committing.

Is a bigger button always better?

Up to a point. The relationship is logarithmic, so the gains flatten once a target is comfortably larger than the pointer. Past that, extra size costs layout and hierarchy without buying speed, and two oversized buttons of equal weight create a choice where there was one action.