Empty State Design
Transform dead air into deliberate moments. A well-crafted empty state educates, guides, and converts — never abandons the user.
The Three-Layer Rule
Every empty state needs three layers stacked in order: an illustration or icon that sets tone, a single-sentence headline that names the void, and a clear call-to-action that bridges the gap. Skip any layer and the user feels lost.
Tone Matching
Match the emotional register of the surrounding product. A financial dashboard empty state should feel calm and reassuring. A social app can be playful. The illustration style, copy voice, and CTA verb must form a single coherent signal.
Progressive Disclosure
Don't cram onboarding into the empty state. Offer one primary action and tuck secondary paths behind a subtle “Learn more” link. Users who need hand-holding will find it; power users won't be slowed down.
Sizing & Spacing
The illustration should occupy no more than 40% of the viewport height. Headline sits 24px below it. CTA follows with 16px gap. Generous whitespace signals intentionality; cramped empty states read as bugs.
Anti-Patterns
- Generic “No data” with zero guidance
- Overloading with five CTAs of equal weight
- Using the same empty state for every context
- Hiding the empty state behind a loading spinner
Quick Reference
Illustration → Headline → CTA. One primary action. Tone matches product. Whitespace is the frame, not the enemy.