Skip to content
Motif
Psychology & conversionLesson 2 of 3Beginner14 min

Fitts's Law

Fitts's Law: time to hit a target grows with distance and shrinks with size. Big, close targets are faster — and screen edges are effectively infinite.

Kept on this device only.

In one line: the time to point at something grows with how far away it is and shrinks with how big it is — so make the targets that matter big, close, and easy to slam into.

What it is

Fitts's Law models how long it takes to move a pointer (finger, mouse, stylus) to a target. The predicted movement time is MT = a + b·log₂(D/W + 1), where D is the distance to the target and W is its width along the axis of motion. The a and b terms are device-dependent constants you fit to your input method.

The log term is the index of difficulty (ID), measured in bits: log₂(D/W + 1). Pushing the target farther away raises ID; making it wider lowers it. The law captures the everyday speed/accuracy tradeoff of pointing — you can move fast at a big near target, but a small far one forces you to slow down and aim.

Why it matters

The controls people use most should be the cheapest to hit. Primary buttons want to be large and near the user's current focus, not small and stranded in a corner of a form. Tap targets on touch screens live in the thumb zone — the arc a one-handed grip can comfortably reach — so a bottom bar beats a top-left hamburger for frequent actions.

Screen edges and corners are effectively infinite targets: you can fling the pointer past them and the OS clamps you onto the control, so W is unbounded in that direction. That is why pinned navigation, a fixed action bar, and the macOS menu bar glued to the top edge feel so fast — you cannot overshoot them. Menus and toolbars benefit too: a submenu that opens right under the cursor costs far less than one across the screen.

See it

Live demo
Tweak it2
56
160
Resize and move the target; the predicted time to hit it tracks size and distance together.

Resize and move the target with the two knobs; the predicted time tracks both. Shrinking the target or pushing it farther raises the index of difficulty and the movement time — make it big and close and the number drops.

How it works

The whole model is one equation: MT = a + b·log₂(D/W + 1). The log₂(D/W + 1) factor is the index of difficulty in bits — a far, narrow target is "more bits" of aiming work; a near, wide one is fewer. The constants a (a fixed start/stop cost) and b (the per-bit cost) you measure empirically for a given device.

A crucial subtlety is that W is the effective hit area, not the visible pixels. CSS padding, an invisible bounding box, or an enlarged touch region all count toward W even when the drawn control looks small — so you can keep a compact look while making the real target generous. The same trick explains magnetic targets and edge snapping: when the OS or app clamps the pointer onto a control, W behaves as if it were huge.

This is why edges and corners win: against a screen boundary you cannot overshoot, so the target is effectively infinitely wide along that axis. And it is why minimum tap-target sizes exist: WCAG 2.2 sets a 24×24 CSS-px minimum (Success Criterion 2.5.8), while the older ~44×44 rule of thumb is the comfortable recommendation for touch.

Build it

The model is a pure function: feed it distance, size, and your fitted constants, get back a predicted time in seconds.

TypeScript
fittsMovementTime.ts — predicted pointing time in seconds
/**
 * Fitts's Law movement time in seconds.
 * @param distance  distance to the target (px)
 * @param size      effective target width along the axis of motion (px)
 * @param a         fixed start/stop cost (s)
 * @param b         per-bit cost (s/bit)
 */
export function fittsMovementTime(
  distance: number,
  size: number,
  a = 0.05,
  b = 0.15,
): number {
  const indexOfDifficulty = Math.log2(distance / size + 1);
  return a + b * indexOfDifficulty;
}

Note that size is the effective hit area: CSS padding enlarges the real target a finger lands on, so a visually small button can still have a large W.

Make it yours

Use the controls beside the demo above to change target size and distance — each change updates the example live.

Experiment in the playground
  • Drop the size to its minimum and push the distance to the max — watch the index of difficulty and predicted time spike.
  • Hold the distance fixed and double the size: the time falls, but less than you'd guess, because the difficulty term is logarithmic.
  • Imagine the target pinned to a screen edge — its effective width becomes infinite, so the predicted cost would collapse toward the fixed a term.

Reproduce it with an LLM

Reproduce it with an LLM

You are a UX engineer who applies Fitts's Law (time to acquire a target grows with distance and shrinks with size). Audit a UI — 'a mobile checkout where the primary Pay button is small, mid-screen, and next to a Cancel link' — and propose concrete fixes grounded in Fitts's Law: size and place the primary action for the thumb zone, increase its hit area (padding, not just visible size), separate it from destructive/secondary actions to avoid mis-taps, and use screen edges/corners (infinite-width targets) where appropriate. Give specific sizes/spacing (respecting the 44×44px / 24×24px minimum tap targets) and explain each in Fitts's terms. Return a prioritized list of changes.

Run with your key

Pitfalls & accessibility

  • Never rely on hover-only affordances for primary actions on touch — there is no cursor to hover, and the tap target is all the user gets.

Further reading