SuperAPI AI Directory

content-hierarchy

Design & creation

View repository

Updated 10-16 05:06

About this skill

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