Why empty states matter
An empty state is any screen that has nothing to show yet. A table with no rows. A dashboard with no data. A search with no results. An inbox you have cleared.
These screens get little attention in design reviews. The team draws the full version, with all its rows and charts, and the empty one is left to the developer. So the user gets a blank white area, or a small grey line that says "No data".
But for a new user, the empty state is often the first thing they see. It is the screen that decides whether they know what to do. Good empty state design for SaaS is cheap to build and does a lot of work, especially in the first session.
First use, no results and error are different
The same blank space can mean several different things. Each one needs its own message.
| Type | What it means | What the screen should do |
|---|---|---|
| First use | The user has not created anything yet. | Explain what goes here, and offer the first action. |
| No results | The user searched or filtered, and nothing matched. | Say what was searched, and offer a way to widen or clear it. |
| Cleared or done | The user finished everything, like an empty task list. | Confirm it, briefly. A little warmth is fine. |
| Error or no access | Data failed to load, or the user cannot see it. | Say what went wrong, and what to try. Never show it as "empty". |
The last one is a common mistake. If a request fails and the screen shows "No projects yet", the user believes their data is gone. That is a serious scare for a small bug. Always keep errors visually and verbally distinct from empty.
Give one clear action
Our main rule is simple: one empty state, one main action.
If a user lands on an empty customer list, the screen should say what the list is for and offer one button, such as "Add your first customer". Not five buttons. Not a menu. If there is a second path, like importing from a file, make it a quiet link under the main button.
A good empty state has four parts:
- A short title that says what this place is. "Your customers will appear here."
- One sentence of help that says why it is useful or what to do. Keep it to a line or two.
- A primary button with a verb that matches the action. "Add customer", not "Get started".
- An optional secondary path. Import, connect, learn more.
An illustration is optional. A small, calm one can help a screen feel finished. A big cartoon on every empty screen gets old fast, and takes room away from the button. Do not let the picture be the main thing.
Sample data and templates
For some screens, a blank page is hard to act on. A dashboard with no data cannot show you what it will look like. A report builder with no reports is a puzzle.
Two good patterns:
- Sample data. Show the screen filled with realistic example content, clearly labeled. Let the user turn it off or delete it in one click. This works well for dashboards and charts.
- Templates. Offer a few ready-made starting points, such as "Weekly sales report" or "Team standup". Starting from something close is easier than starting from nothing.
Always label sample content as sample. If people mistake fake numbers for real ones, they will stop trusting the product.
Patterns for tables, dashboards and search
Tables
An empty table should still show its column headers, if they help explain what will appear. Under them, put the empty message and the add button. If the table is filtered and nothing matches, show the active filters and a "Clear filters" action.
Dashboards
Dashboards are the hardest, because they have many parts. Do not fill the page with six empty charts. Show one clear next step at the top, such as "Connect your data source", and keep the charts quiet or use sample data behind it. As data arrives, replace each block in turn.
Search
No-results screens need three things: repeat what the user searched for, say that nothing matched, and offer a way forward. A way forward may be a spelling hint, a broader filter, or a link to create the thing they were looking for. "No results for 'invoce'. Did you mean 'invoice'?" is a better screen than "0 results".
Writing the copy
Empty state text is short, so every word counts. Some rules we follow:
- Talk about the user's goal, not the product. "Add your first customer" beats "No customer records found".
- Use plain verbs on buttons. Add, import, connect, invite.
- Do not blame. "You have not added anything" sounds like a scolding. "Nothing here yet" is calmer.
- Be specific. "Invoices you send will appear here" tells the user more than "Nothing to show".
- Skip jokes unless they are really good. A joke that is funny the first time is annoying on the tenth visit.
Checking it in the real product
Empty states are easy to miss, because your own test account is never empty. Here is how to check them.
- Make a fresh account with no data and walk through every main screen. Write down each blank or confusing one.
- Apply a filter that matches nothing on each list.
- Turn off your network and open pages. Does an error look different from an empty state?
- Log in as a user with limited permissions. Do they see "empty" when they really have "no access"?
- Check on a small phone screen. Does the main button still show without scrolling?
This list takes about an hour, and most products we look at have something to fix. It is one of the first things we check in a UX audit. If you are designing a new product, we plan these states from the start in an MVP design sprint, so they are not left for the end. You can see more about the products we work on at our SaaS design agency page. If you want a quick opinion on one of your own empty screens, send it to us for a free design review.
