Empty State Pattern: More Than Just a Blank Page
An empty state turns a blank screen into a helpful guide, showing users what's possible and how to get there. It's crucial for first-time use, 'no results' searches, or after data deletion. The footgun is treating it as an afterthought, leaving users stuck.
Why it exists
To prevent user dead ends. When an app has no data to display—either because the user is new, has deleted everything, or a search yields no results—a blank screen is confusing and unproductive. The empty state pattern exists to fill this void with guidance and support.
The mental model
Think of an empty state not as a void, but as an opportunity. It's a concierge for an empty room. Instead of showing nothing, it explains what the space is for, what the user can do next, and provides a clear call to action to get them started. It transforms a potential point of friction into a smooth, guided experience.
How it works
A typical empty state includes a few key components. A title offers a concise, positive explanation (e.g., "Start by adding data assets"). Body text explains why the space is empty and what action to take. A primary call to action, like a button or link, provides the direct next step. Optionally, an image can add context and a secondary link can point to documentation.
When to use it
Use this pattern whenever a UI component has no content to display. Three common scenarios are: first, for new users who haven't created any data yet; second, to provide feedback on a user action, like showing "No results found" for a search; and third, for error management when data fails to load.
When not to use it
Avoid over-designing empty states for secondary features. More content isn't always better, as it can increase cognitive load. For simple situations, a basic message and a single action are more effective than a complex, multi-step onboarding flow. The goal is just-in-time guidance, not overwhelming education.
One canonical example
A new user signs up for a project management tool and navigates to their "Projects" dashboard. Instead of a blank page, they see an empty state with the title "Create your first project," body text explaining that their projects will appear here, and a prominent "New Project" button. This immediately orients them and encourages action.
Interview question
What is the primary purpose of implementing an Empty State pattern in a user interface?
- a.To offer detailed, multi-step onboarding for every new feature.
- b.To transform a blank screen into a guided opportunity for user action.Correct
- c.To serve as a universal placeholder for all types of system errors and warnings.
- d.To ensure consistent branding and visual design across all application screens.
Why? this is the answer
The card states that an empty state's primary role is to prevent user dead ends by guiding them on how to interact with a blank section, turning it into an opportunity for action. While it can involve onboarding, the card explicitly warns against over-designing with comprehensive tutorials.
Just read this? Test yourself on what you have been reading.
Read the original → carbondesignsystem.com
- #design systems
- #ui
- #ux
- #user experience
You just looked this up. Could you explain it out loud?
That is the part interviews actually test. Tezvyn takes questions like this one and gives you what the interviewer is really checking, the answer that lands, and the mistake that ends the conversation, in the four minutes before your next meeting.
The iPhone app is on the way
We are building it. Until it lands, nothing here is held back from you: every interview card, your saved cards, streaks and the job board all work in Safari, plus hundreds of free practice quizzes of thirty questions each. Sign in and it all carries over to the app the day it arrives.
Want it as an icon? Tap Share at the bottom of Safari, then Add to Home Screen. It opens full screen and the cards you have read stay available offline.
We are hiring for this. Open roles that interview on design systems — each one lists the topics its interview covers.
See open roles