taewoongheo/visual-hierarchy

Visual Hierarchy — Verification Principles

Squint Test

Blur your eyes (or zoom out to 25%) and check:

• Can you identify the most important element on each screen?
• Are there clear visual layers (primary → secondary → tertiary)?
• Do related items form visible groups?

If the hierarchy doesn't read when blurred, fix it with: size contrast, weight contrast, color contrast, or spacing.

Primary Action

Each screen should have one clear primary action.

• If multiple buttons compete for attention → reduce secondary actions to text/ghost style
• If the primary action isn't immediately obvious → increase size, contrast, or position prominence
• Primary action placement: bottom of screen (thumb-reachable) or top-right (navigation convention)

Information Density

• One concept per visible area — don't make users hold multiple ideas simultaneously
• Progressive disclosure — hide complexity behind taps, not scrolling past it
• Chunk related info — group 3-5 related items, then add visual break before next group
• Avoid walls of text — break into scannable pieces with clear labels

Empty States

Empty states are features, not afterthoughts:

• Icon (SF Symbol style) + short message (1-2 lines) + single action button
• Centered vertically in available space
• Tone: helpful and encouraging, not technical ("No items yet" → "Add your first X")
• The action button should directly resolve the empty state

State Coverage

Every interactive element should account for:

• Default — normal state
• Loading — skeleton or spinner, never blank
• Empty — guided empty state (see above)
• Error — clear message + recovery action
• Success — confirmation feedback (toast, animation, haptic)
• Partial — incomplete data, offline mode

Hierarchy Dimensions

Use multiple dimensions simultaneously for strong hierarchy:

| Dimension | Primary | Secondary | Tertiary | |-----------|---------|-----------|----------| | Size | Largest | Medium | Smallest | | Weight | Bold/Semibold | Medium | Regular | | Color | High contrast / Accent | Default text | Muted / Secondary | | Spacing | Most whitespace | Standard | Compact |

Don't rely on a single dimension (e.g., only size). Combine at least 2-3 for clear distinction.