UI Coach guide
Empty State Design
How to design empty states that teach the next action instead of looking like a broken screen.
By UI Coach Editorial ·
An empty state is the UI when the useful object does not exist yet: no projects, no messages, no results, no notifications. If you leave a blank table, people think the product is broken. If you fill it with witty illustration and no action, they still do not know what to do.
Three jobs of an empty state
- Explain what belongs here in one sentence.
- Offer a primary action to create or connect the missing thing.
- Optionally show an example so the quality bar is visible.
Not every empty state needs a mascot. A first-run inbox might need more teaching than a filter that returned zero rows. Zero search results should help people adjust the query, not celebrate a lifestyle illustration.
Differentiate first-use and later emptiness
First-use empty is an invitation. Later empty might be success: inbox zero, no alerts, nothing overdue. Success emptiness should feel complete, not like a prompt to manufacture busywork. Do not use the same art for both.
Keep the chrome
Show the page structure. Navigation, titles, and primary actions should still be there. Replacing the entire view with a poster removes wayfinding.
Common mistakes
- Dead-end copy such as Nothing here with no next step.
- A primary button that opens a feature the user cannot access yet.
- Hiding empty states behind skeleton loaders that never resolve.
Practice this on UI Coach
When you take a dashboard or collaboration challenge, design the zero-data view as a first-class screen. Illustration libraries in Resources can support it. They cannot replace a verb.
Sources
- Nielsen Norman Group on empty states in UI