Fitts's Law

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

Key Principles

1Make interactive targets large enough to be easily selected.
2Place important actions within easy reach of the user's cursor or finger.
3Reduce the distance between related actions and their likely trigger points.
4Edge and corner targets on screens are effectively infinite in size—use them.

Try It

Click “Start” then hit each target as fast as you can. Smaller targets take longer.

Large

Medium

Small

Tiny

Code Pattern

tsx

1// ✅ Good: Large, easy-to-hit touch target
2<button className="min-h-[44px] min-w-[44px] px-6 py-3">
3  Submit
4</button>
5
6// ❌ Bad: Tiny, hard-to-tap target
7<button className="px-1 py-0.5 text-xs">
8  Submit
9</button>

Ensure interactive elements meet minimum touch target sizes (44×44px for mobile).

AI Analyzer

Analyzing against Fitts's Law