Fitts's Law

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