Empty States

Design effective empty states that orient users, set expectations, and guide them toward the first meaningful action. Use when creating first-use experiences, zero-data screens, cleared views, or error-driven empty conditions.

itsual Updated

File contents

Empty States

Overview

Empty states are product moments, not blanks. They appear on first use, after clearing data, or when searches return nothing — and they strongly shape activation and confidence.

When to Use

  • First-run and zero-data screens
  • No-results and filtered-empty views
  • Permission-denied or setup-required states
  • Error states that leave a screen empty

Core Practices

  • Explain why the screen is empty
  • Offer a clear primary action to move forward
  • Use illustration or visuals sparingly and purposefully
  • Differentiate first-use empty from “you cleared everything” empty
  • Avoid dead ends

Principles

  • Empty states are onboarding opportunities
  • Be helpful, not cutesy at the expense of clarity
  • Match tone to the user’s likely emotional state
  • Design empty states as intentionally as populated ones

Verification

  • User knows what to do next
  • Primary action is obvious
  • Different empty reasons are handled differently when needed

itsual/agent-skills-collection/tree/main/skills/design-ux/empty-states commit 6c38f22f1c

Frequently asked questions

npx skillmds@latest add itsual/empty-states