fitts-law-touch-targets

What problem does it solve?

Touch interfaces often cause mis-taps because fingers are less precise than cursors, and because small or poorly placed targets plus occlusion and hover-only patterns make actions hard to discover and confirm.

Core Features & Use Cases

• Minimum touch target sizing: Implements platform- and accessibility-aligned hit-area guidance (44×44 CSS px as a safe default) while allowing smaller icons inside a larger tappable region.
• Target spacing to prevent neighbor-taps: Reduces accidental inputs with clear gaps (e.g., 8px+) between adjacent touch targets in dense UI.
• Thumb-reach and placement heuristics: Guides where primary actions should live (typically the lower screen, often bottom-right) and how to use safe areas to avoid conflicts with system gestures.
• Occlusion-resistant feedback patterns: Ensures the UI provides visual confirmation that radiates beyond the finger (e.g., ripples/glows) and avoids hover-only affordances on touch.
• Practical anti-pattern fixes and examples: Corrects common failures such as tiny close buttons, hover-revealed actions that disappear on touch, and edge-flush buttons that trigger system gestures.

Quick Start

Apply Fitts’s Law to your UI by sizing every touchable control to a 44×44 CSS px hit area, spacing nearby targets, and placing primary actions in thumb-reachable zones with clear post-touch visual feedback.