#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