UI DESIGN LAB
  • Home
  • Community
  • Library
  • Knowledge
  • Docs
ZHLogin
Back to knowledge
Typography Color Accessibility

Target Size and Spacing

Target Size and Spacing turns a frequent interface judgment into an executable constraint before generation.

target-sizetouchaccessibility

Design Principle

Interactive targets need enough size and spacing, especially on mobile, toolbars, and dense lists.

Principle Interactive targets need enough size and spacing, especially on mobile, toolbars, and dense lists.

Design action Default touch targets to roughly 44px or equivalent padding; dense desktop controls still need clear hover/focus and spacing.

Examples Positive example: Icon buttons, table row actions, mobile bottom bars, and dense filters need low mis-tap risk. Counterexample: A 16px icon has no extra hit area.

Apply when Icon buttons, table row actions, mobile bottom bars, and dense filters need low mis-tap risk. Users need to judge state, scope, risk, or next action quickly.

Source notes Source note: Synthesized from W3C WCAG 2.2, Apple Accessibility, IBM Carbon Accessibility, and accessibility practices in major design systems.

Agent Directive

Default touch targets to roughly 44px or equivalent padding; dense desktop controls still need clear hover/focus and spacing.

Apply When

  • Icon buttons, table row actions, mobile bottom bars, and dense filters need low mis-tap risk.
  • Users need to judge state, scope, risk, or next action quickly.

Avoid

  • A 16px icon has no extra hit area.
  • Irrelevant structure, copy, or decoration is added only to make the UI feel richer.

Knowledge Metadata

Category
Typography Color Accessibility
Quality
86%
Version
v1
Published
6/6/2026