Content Hierarchy

Structuring content for scanability, progressive disclosure, and information architecture.

dragoon0x 5f83668 1.1 KB Updated

File contents

Content Hierarchy

Inverted Pyramid

Most important information first. Details follow.

  1. Headline: the conclusion/key takeaway
  2. Lead: essential context (who, what, when)
  3. Body: supporting details
  4. Background: additional context for those who want depth

Scanning Patterns

  • F-pattern: users scan headings down the left, then read selectively
  • Layer-cake: users jump between headings, scanning for relevance
  • Spotted: users scan for specific targets (links, buttons, numbers)

Design for Scanners

  1. Clear headings at each level
  2. Bold key terms within paragraphs
  3. Short paragraphs (3-4 sentences max)
  4. Bulleted lists for 3+ related items
  5. Pull quotes for key insights
  6. Numbers and data points stand out

Progressive Disclosure

  • Show summary by default
  • Expand for details on demand
  • 'Show more' / 'Read more' with preview of what's hidden
  • Accordions for FAQ-style content
  • Tabs for parallel content types

dragoon0x/everything-design-taste/tree/main/skills/content-hierarchy commit 5f83668ab0

Frequently asked questions

npx skillmds@latest add dragoon0x/content-hierarchy