Motor Control

Fitts's Law

Why bigger and closer targets are easier to hit

Key Insight

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

Key Points

  • •Touch targets should be large enough for users to accurately select them
  • •Touch targets should have ample spacing between them (Google recommends 8dp minimum)
  • •Touch targets should be placed in areas of an interface that allow them to be easily acquired
  • •Larger targets are faster to hit because less precision is required
  • •Closer targets are faster to reach because less movement is required
  • •Screen edges act as "infinite targets"—no need to worry about overshooting
  • •Average adult fingertips are 16–20mm diameter (MIT Touch Lab study)
  • •People prefer to view and touch the center of smartphone screens—accuracy is highest there
  • •Form labels should be clickable to expand the touch target of inputs
  • •Submission buttons should be placed close to the last form input to minimize travel distance
  • •[FIGURE 2-1 — Fitts's law diagram] Shows: Visual diagram with two targets of different sizes at different distances, arrows showing movement paths. Teaches: The mathematical relationship between target size (W), distance (D), and time to acquire. Reproduce as: Interactive diagram where users can adjust W and D to see predicted time change.
  • •[FIGURE 2-2 — Smartphone touch accuracy] Shows: Heatmap overlay on smartphone screen showing touch accuracy zones—highest in center, decreasing toward edges and corners. Teaches: Users prefer touching center of screen; accuracy drops at edges, especially top corners for one-handed use. Reproduce as: Interactive heatmap showing accuracy zones with thumb reach overlay. Data: Based on Steven Hoober research.
  • •[FIGURE 2-3 — Form label touch targets] Shows: Form input with associated label, shaded area indicating the expanded clickable region when label is properly associated. Teaches: Associating labels with inputs expands effective touch target, improving usability for both mouse and touch. Reproduce as: Interactive demo showing clickable area with/without label association.
  • •[FIGURE 2-4 — Form button proximity] Shows: Form with submit button positioned directly below the last input field, with arrow showing minimal travel distance. Teaches: Buttons completing an action should be close to the last active element to minimize pointer travel. Reproduce as: Side-by-side comparison of close vs far button placement.
  • •[FIGURE 2-5 — LinkedIn spacing problem] Shows: LinkedIn iOS connection request dialog with accept/deny buttons too close together. Teaches: Insufficient spacing between touch targets increases accidental selection risk and forces two-handed use. Reproduce as: Interactive demo with adjustable button spacing.
  • •[FIGURE 2-6 — CarPlay spacing] Shows: Apple CarPlay interface with generously spaced touch targets for music controls. Teaches: Ample spacing between interactive elements mitigates accidental selection—critical for in-car interfaces. Reproduce as: Comparison of tight vs generous spacing in driving context.
  • •[FIGURE 2-7 — iPhone Reachability] Shows: iPhone screen with Reachability feature activated, showing top content pulled down to lower half. Teaches: For larger phones, provide mechanisms to bring distant targets closer to the thumb zone. Reproduce as: Animated demo of reachability gesture.
  • •[FIGURE 2-8 — macOS infinite targets] Shows: macOS screen with dock at bottom edge and menu bar at top edge highlighted. Teaches: Screen edges act as infinite targets—cursor stops at edge, so users can't overshoot. Reproduce as: Diagram showing cursor paths to edge vs mid-screen targets.
  • •[FIGURE 2-9 — VisionOS eye targeting] Shows: Apple Vision Pro field of view with recommended content placement zones—primary content centered, interactive elements at consistent depth. Teaches: For spatial computing, place targets in center of field of view at consistent depth; round corners increase eye-tracking precision. Reproduce as: 3D diagram of optimal content placement zones.

Guidelines

  • ✓Make touch targets at least 44×44pt (Apple), 48×48dp (Google), or 44×44 CSS px (WCAG)
  • ✓Separate touch targets by at least 8dp of space
  • ✓Place primary actions in easy-to-reach zones (center and lower portion on mobile)
  • ✓Associate form labels with inputs to expand clickable area
  • ✓Position action buttons close to the last input in a form
  • ✓Leverage screen edges for menus and toolbars (infinite target effect)
  • ✓For spatial interfaces, place content in center of field of view at consistent depth
  • ✓Round interactive elements in eye-tracking interfaces for better precision
  • ✓Consider Reachability-style features for large screens

Formula

ID = log₂(2D/W)

ID = Index of Difficulty
D = distance to center of target
W = width (tolerance) of target

Higher ID = harder to select

Want to learn this interactively?

Experience hands-on experiments and test your understanding.

Start Learning
🔥

Practice this topic

Active recall — strengthens long-term retention

Related Topics