# Empty states, the first screen a new user actually sees

> Why "No data" doesn't cut it, what belongs on an empty screen, and how first run, empty search, all done and failed loading differ.

Published: 2025-05-11 · Source: https://subxcat.com/articles/empty-states · Author: SUBXCAT

You spent a long time designing the main screen: charts, lists, filters. In the mockup it's full of tidy sample data. A new user will never see that screen. They'll see the same thing empty: axes with no lines, a table that's just a header row, and the words "No data".

The empty state isn't an edge case. It's the first screen of your product for every new person, and often the last.

## What's wrong with "No data"

"No data" reports a fact the person can already see. It doesn't say why it's empty, whether that's expected, or what to do next. And an empty screen with no explanation is easy to read as broken: probably didn't load.

Worse are the empty states nobody designed at all: a chart drawing a flat zero, pagination reading "page 1 of 0", a filter showing "0 results" with no way to clear it.

## What to put on an empty screen

A good empty state answers three questions: what will be here, why it's empty right now, and what to do to fill it.

- One line about what will appear: "Invoices you send to clients will show up here."
- One primary action: "Create your first invoice." One, not four.
- If needed, a quieter second option: import, an example, help.

An illustration is fine, but it doesn't replace the text and the button. If removing the picture makes the screen confusing, the picture isn't the problem.

## Different kinds of empty

Screens are empty for different reasons, and each one needs its own answer.

First run. The person hasn't created anything yet. Explanation plus a primary action works here. You can also show what the screen looks like with data: an example clearly labeled as one, or a "fill with sample data" button whose data is easy to delete later.

Empty search or filter. There's data, but nothing matches. Say what didn't match and let people clear the filter in one click. If search supports typos or similar results, show those.

All done. An empty task list or inbox is good news, not failure. A calm "you're all caught up" fits better than a push to create something new.

Error or no access. This isn't empty, and showing it as empty is wrong. If data failed to load, people need to know something went wrong and they can retry, not conclude they have nothing. This matters most in anything involving money: an empty payments list in place of an error is far more alarming than an honest "couldn't load this, try again".

## Empty inside a screen

It's not just whole pages. An empty dashboard widget, an empty tab on a customer record, an empty comments section. Each deserves one line of text instead of a bare frame. For small blocks, "No comments yet" is enough, with no buttons or illustrations.

## How to find all of them

Create a fresh account and visit every screen. Then create one object and go through again. Then apply a filter that matches nothing, and turn off the network. Note every place you see a frame with nothing in it, a zero with no explanation, or a spinner that never stops.

There are usually more of these than there are screens in the mockups. Especially in apps built with AI: the generator draws a screen full of data because the prompt described a screen full of data. Nobody asked it for the empty version.

## The short version

Empty states take a day or two to do properly, and every new user looks at them. It's one of the cheapest changes you can make that visibly affects how many people reach their first useful action.

SUBXCAT walks through products with a fresh account, finds the empty and broken states, and fills them with clear copy, actions and honest errors.