Empty States

Designing empty states that guide users to take action instead of showing blank screens.

dragoon0x 118f591 1.0 KB Updated

File contents

Empty States

Types

  1. First-use: User hasn't created anything yet. This is onboarding.
  2. No results: Search or filter returned nothing. Help them adjust.
  3. Cleared: User deleted everything. Celebrate or guide next action.
  4. Error: Data failed to load. Explain and offer retry.

Structure

[Optional illustration]
Headline: What belongs here (not "Nothing here")
Body: Why it's valuable to add something (one sentence)
CTA: Single clear action to fix the empty state

Examples

Bad

"No projects yet."

Good

"Create your first project. Projects help you organize your work into focused spaces." [Create Project] button

Rules

  • Every empty state needs a CTA
  • The CTA should be the primary action for that area
  • Empty states should feel inviting, not broken
  • Don't use sad face illustrations (it's not the user's fault)
  • Empty states are temporary, design them to be replaced by content

dragoon0x/everything-design-taste/tree/main/skills/empty-states commit 118f5910ff

Frequently asked questions

npx skillmds@latest add dragoon0x/empty-states