The screen condition shown when no content yet exists — such as a first-time experience, a cleared inbox, or a search with no results. A well-designed empty state explains why the space is empty, sets honest expectations, and guides the user toward a meaningful next action rather than leaving them stranded.
Common contexts
- First-time user landing on a dashboard with no data yet populated after signup
- Search results page returning zero matches for a user's query
- An activity feed or inbox that has been fully cleared by the user
Use when
Any time a screen or container can legitimately exist with no content — design the empty state before the populated state, because it's the first thing new users see and sets the entire onboarding tone.
Avoid when
Don't design a generic empty state and reuse it across all zero-content contexts — a cleared inbox, a failed search, and a brand-new account each have different emotional contexts and require different copy and actions.
An empty state is a free onboarding moment — users are receptive, the screen is uncluttered, and a single well-written sentence can teach the product's core value proposition more effectively than a full tooltip tour.
Real-world examples
- Slack's empty state for new channels uses friendly copy and helpful prompts to guide users toward sending their first message, turning a blank screen into an onboarding opportunity.
- Dropbox Paper uses illustrated empty states with contextual calls-to-action when users have no documents, making the zero-content experience feel welcoming rather than abandoned.
- Duolingo's empty state when a user completes all available lessons for the day includes motivational messaging and streak reinforcement rather than simply showing nothing to do.