---
title: "Fitts's Law"
source: "/reference/fitts-law"
description: "Acquiring a target generally becomes easier as the target grows and as the required pointer travel decreases."
---
# Fitts's Law
Acquiring a target generally becomes easier as the target grows and as the required pointer travel decreases.
### Principle
Acquiring a target generally becomes easier as the target grows and as the required pointer travel decreases.
### Why it matters
Target size, distance, spacing, and input method shape interaction cost. Important controls should be reliably selectable with mouse, touch, pen, keyboard, or assistive technology. Visual icon size is not the same as hit-area size, so a small icon can still provide a generous interactive target. Current WCAG 2.2 includes a 24×24 CSS pixel minimum target-size criterion with defined exceptions, which is a useful accessibility baseline rather than a complete ergonomic target.
### Deeper design interpretation
Fitts's Law connects target acquisition time with target size and distance. In interfaces, it helps explain why small, distant, tightly packed, or transient controls are harder to use. The relevant size is the interactive hit area rather than the visible icon alone.
The principle becomes especially important for high-frequency actions, touch interfaces, drag handles, close controls, dense tables, and controls near destructive alternatives. Input modality matters: a compact target may be acceptable with a mouse while becoming frustrating or inaccessible on touch.
Layr should combine ergonomic geometry with task consequence. A small “remove” icon next to “edit” deserves more scrutiny than an equally small decorative disclosure control because accidental activation has greater cost.
### What the agent should reason about
Measure the actual clickable/tappable bounds, spacing to adjacent targets, travel distance, viewport context, and input methods. Check accessibility requirements separately from ergonomic recommendations. WCAG minimums provide a compliance baseline, while product-specific ergonomics may justify larger targets.
The agent should also look for invisible affordances such as hover-only controls, because target acquisition begins with discovery.
### Common failure patterns
- Visible icon bounds equal the entire hit target.
- Destructive and safe actions are tightly adjacent.
- Frequent controls require repeated long pointer travel.
- Drag handles are tiny and have no keyboard or non-drag alternative.
- Essential actions appear only on hover and vanish during pointer movement.
### Audit questions
- What is the actual interactive area?
- Which input methods must this control support?
- How often is the action used, and what is the error cost?
- Can the target be made easier to acquire without visually enlarging the component?
### Example agent finding
> **High — The mobile modal close target is effectively 14×14px.** The icon itself is the complete tap target and sits immediately beside a destructive action. Expand the hit area, preserve the compact visual icon, and add separation so accidental activation is less likely.
### Agent directive
> Inspect interactive hit areas, spacing, and placement in context. Prioritize high-frequency and high-consequence targets and distinguish visible size from actual target size.
### Apply this when
- Buttons, icon controls, mobile navigation, table actions, close controls, drag handles, maps, editors, pagination, and touch interfaces.
### Observable signals
- A visible icon is also the complete click target and is very small.
- Adjacent destructive and safe actions have little separation.
- Frequently used actions require repeated long pointer travel across a large viewport.
- Tiny targets appear in dense mobile or touch contexts.
- Hover-only affordances reveal essential controls that are hard to acquire.
### Recommended actions
- Increase the hit area without necessarily increasing visible icon size.
- Add spacing between adjacent targets when accidental activation is plausible.
- Place frequent controls near the context they affect.
- Provide keyboard access and non-drag alternatives where appropriate.
- Check WCAG target-size requirements and exceptions rather than relying on a single house number.
### Do not over-apply
Do not maximize every control. Dense expert software can legitimately use compact visuals if hit areas, spacing, alternative input, and error cost are handled well.
### Example
**Weak:** A mobile modal uses a 14px close icon as the entire target directly beside a destructive action.
**Stronger:** The icon remains visually compact while the interactive area is larger, separated from destructive controls, focusable, and labeled.
### Evaluation notes
- **Default severity:** High when accidental or failed activation affects critical tasks; medium for repeated friction.
- **Typical confidence:** High when target geometry is measurable.
- **Primary evidence:** Bounding boxes, hit areas, pointer distance, input type, task frequency, WCAG checks.
- **Related rules:** Doherty Threshold, Pareto Principle, Selective Attention, Hick's Law
### References
- [Laws of UX — Fitts's Law](https://lawsofux.com/fittss-law/)
- [Paul M. Fitts (1954) — The information capacity of the human motor system](https://pubmed.ncbi.nlm.nih.gov/13174710/)
- [W3C WCAG 2.2 — Understanding Target Size (Minimum)](https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum)
## Related rules
- [Doherty Threshold](/__layr/pages/reference/doherty-threshold.md)
- [Pareto Principle](/__layr/pages/reference/pareto-principle.md)
- [Selective Attention](/__layr/pages/reference/selective-attention.md)
- [Hick's Law](/__layr/pages/reference/hicks-law.md)
## Agent guidance
Review criteria, the finding contract a report must use, and worked examples.
Established principle; Layr interpretation and agent guidance. Category: Interaction, Performance & Error Tolerance.
## Retrieve
- Canonical page: https://layr.design/reference/fitts-law
- Markdown for agents: https://layr.design/__layr/pages/reference/fitts-law.md
- Reference map: https://layr.design/llms.txt
- Route index: https://layr.design/__layr/routes.toon
## Rule object
```yaml
rule:
id: "fitts-law"
title: "Fitts's Law"
category: "Interaction, Performance & Error Tolerance"
origin: established
canonical_url: "https://layr.design/reference/fitts-law"
principle: "Acquiring a target generally becomes easier as the target grows and as the required pointer travel decreases."
directive: "Inspect interactive hit areas, spacing, and placement in context. Prioritize high-frequency and high-consequence targets and distinguish visible size from actual target size."
applies_when:
- "Buttons, icon controls, mobile navigation, table actions, close controls, drag handles, maps, editors, pagination, and touch interfaces."
observable_signals:
- "A visible icon is also the complete click target and is very small."
- "Adjacent destructive and safe actions have little separation."
- "Frequently used actions require repeated long pointer travel across a large viewport."
- "Tiny targets appear in dense mobile or touch contexts."
- "Hover-only affordances reveal essential controls that are hard to acquire."
audit_questions:
- "What is the actual interactive area?"
- "Which input methods must this control support?"
- "How often is the action used, and what is the error cost?"
- "Can the target be made easier to acquire without visually enlarging the component?"
recommended_actions:
- "Increase the hit area without necessarily increasing visible icon size."
- "Add spacing between adjacent targets when accidental activation is plausible."
- "Place frequent controls near the context they affect."
- "Provide keyboard access and non-drag alternatives where appropriate."
- "Check WCAG target-size requirements and exceptions rather than relying on a single house number."
avoid_when:
- "Do not maximize every control. Dense expert software can legitimately use compact visuals if hit areas, spacing, alternative input, and error cost are handled well."
common_failure_patterns:
- "Visible icon bounds equal the entire hit target."
- "Destructive and safe actions are tightly adjacent."
- "Frequent controls require repeated long pointer travel."
- "Drag handles are tiny and have no keyboard or non-drag alternative."
- "Essential actions appear only on hover and vanish during pointer movement."
evidence_types:
- "Bounding boxes"
- "hit areas"
- "pointer distance"
- "input type"
- "task frequency"
- "WCAG checks"
default_severity: "High when accidental or failed activation affects critical tasks; medium for repeated friction."
typical_confidence: "High when target geometry is measurable."
related_rules:
- { id: "doherty-threshold", title: "Doherty Threshold", url: "https://layr.design/reference/doherty-threshold" }
- { id: "pareto-principle", title: "Pareto Principle", url: "https://layr.design/reference/pareto-principle" }
- { id: "selective-attention", title: "Selective Attention", url: "https://layr.design/reference/selective-attention" }
- { id: "hicks-law", title: "Hick's Law", url: "https://layr.design/reference/hicks-law" }
```
## What to reason about
Measure the actual clickable/tappable bounds, spacing to adjacent targets, travel distance, viewport context, and input methods. Check accessibility requirements separately from ergonomic recommendations. WCAG minimums provide a compliance baseline, while product-specific ergonomics may justify larger targets. The agent should also look for invisible affordances such as hover-only controls, because target acquisition begins with discovery.
## Routing
Route a review here when evidence is measurable in interaction behavior: latency, target geometry, validation, parsing, task completion, duplicate actions, failed input, or recovery. Prefer instrumented evidence over aesthetic judgment.
## Review procedure
For every finding:
1. Identify the exact component, state, route, or interaction.
2. State the observable evidence.
3. Name the principle that applies.
4. Explain the user consequence in the current context.
5. Estimate severity from the consequence, frequency, and reversibility.
6. Recommend the smallest change that addresses the issue while preserving the product's existing design system.
7. Lower confidence when intent, frequency, audience, device, or product constraints must be inferred.
8. Do not produce generic advice such as "improve hierarchy" or "make this clearer" without specifying what is wrong and why.
## Finding contract — emit exactly this shape
```yaml
finding:
rule_id: string
location: string
evidence:
- observable fact
impact: string
severity: low | medium | high | critical
confidence: low | medium | high
recommendation:
change: string
rationale: string
preserve:
- existing design-system behavior
- valid product constraints
```
## Example finding for this rule
High — The mobile modal close target is effectively 14×14px. The icon itself is the complete tap target and sits immediately beside a destructive action. Expand the hit area, preserve the compact visual icon, and add separation so accidental activation is less likely.
## Code reference
The same principle as markup. Compare the structure, not the class names.
```html
DraftsMobile dialog
Remove this draft?
This cannot be undone.
×Delete draft
14 × 14 hit area · under the 24 × 24 baseline · 4px from Delete
```
```html
DraftsMobile dialog
Remove this draft?×
This permanently removes “Q3 launch notes”. It cannot be undone.