Laws of UX · Examples ← All laws GitHub ↗

Fitts's Law

The time to acquire a target is a function of the distance to and size of the target.

Read the original on lawsofux.com →

The scenario: a mobile checkout screen for a sneaker store. Both versions are live — try tapping the purchase action and feel how long it takes your pointer (or thumb) to land on it. Same screen, same actions; only size and placement of the targets differ.

What's wrong here? The most important action — “Complete purchase” — is an 11px text link tucked in the top-right corner, the farthest point from a thumb. The quantity steppers are 14px squares, and “delete” sits one millimeter from “apply coupon”: one shaky tap empties the cart instead of saving money.
m.stridewear.shop/cart

Your cart (2)

👟
Stride Runner V2
$89.00 · Size 42
delete item apply coupon save for later
1
🧦
Crew socks 3-pack
$14.00 · One size
delete item apply coupon save for later
1
Total$103.00

Free returns within 30 days. Shipping calculated at the next step.

🔍 What changed

  • The primary action went from an 11px corner link to a full-width 48px button at the bottom — bigger target, shorter travel, sitting in the thumb zone.
  • Full-width bottom placement acts like a screen edge: you can't overshoot it, so it's acquired almost instantly.
  • Quantity steppers grew from 14px to 44px — at or above the recommended minimum touch-target size.
  • The destructive “Remove item” moved away from frequent actions, so a near-miss no longer empties the cart.

💼 Explaining it to stakeholders

“Every extra millimeter of distance and every pixel we shave off a button adds time and errors to the exact moment the customer is trying to pay us. Making the buy button big and putting it where the thumb already rests is the cheapest conversion optimization we can ship — and separating ‘delete’ from ‘coupon’ stops accidental cart wipes that we currently read as abandonment.”