The initial condition of a screen or component the very first time a user encounters it — before any content, data, or history exists. A thoughtfully designed zero state sets accurate expectations, reduces first-use anxiety, and provides a clear prompt toward the action that will populate the space.
Common contexts
- Designing the first-launch state of a dashboard where all widgets are empty and users need a prompt to add their first data
- Writing zero state copy for a messages inbox that explains what will appear there and invites the user's first action
- Auditing a product to find every zero state that currently shows a blank container with no guidance or CTA
Use when
Design zero states explicitly for every screen or component that starts empty — particularly in productivity tools, social features, and data dashboards where blank containers without context feel broken rather than new. The zero state is the product's first impression for new users and deserves as much care as the populated state.
Avoid when
Don't overload the zero state with onboarding tutorials, feature explanations, and multiple CTAs in an attempt to be maximally helpful — a zero state cluttered with guidance creates cognitive load at the exact moment users have the least context to absorb it. One clear next action is almost always better than three.
Zero states reveal how well a team has thought about new user experience — a blank container is never a neutral design choice, it's a missed opportunity to turn first-use uncertainty into first-use confidence.
Real-world examples
- Slack's zero state for a new workspace shows a Slackbot welcome message and pre-populates the #general channel with sample conversation, providing immediate context and reducing the intimidation of a completely empty product.
- Notion's zero state for a new page shows a 'Type something, or press / for commands' prompt — a single-line instruction that teaches the primary interaction model at the moment of maximum user attention.
- Airbnb's search zero state surfaces a 'Flexible dates' option and trending destinations rather than a blank map, converting an empty state into a discovery opportunity that increases search initiation by 25% over the blank alternative.