Empty State

Mockups are nearly always drawn full. A document list gets shown with twelve titles in it, because that is the version that looks convincing in a review.

The screen a user meets first, though, is empty. Somebody who just signed up has no documents at all, and even a long-time user hits zero results the moment they set a filter too narrowly. Leave that case undesigned and what remains is a blank white area.

People react to that blank in one of two ways. They assume something is broken and reload, or they cannot tell what to do and leave. A product whose first screen after signup reads "No documents" and nothing else loses people on day one for exactly this reason.

There are two different reasons a screen can be empty, so it becomes two designs with different copy and different buttons.

The first is that nothing has been created yet. This is the new user's screen, and what belongs on it is a statement of what to make plus a button that makes it. "Create your first document and share it with your team," next to a create button, keeps the next action within reach.

The second is that nothing matches the current conditions. This is the zero-results screen behind a search or a filter, and what belongs on it is how to change the conditions plus a button that clears the filter.

Use the same copy for both and one of them is guaranteed to be wrong. That is how you end up telling someone with no documents to try a different search term, or telling someone with zero search results to create their first document. Either way, empty state copy works best as one line explaining the emptiness and exactly one next action. Offer two or three suggested actions and you have added a decision, which is reliably answered by doing nothing.

Keeping this screen distinct from its neighbors is also part of the job. Show it while content is still being fetched and "nothing here" flashes for a moment, so the loading state goes first. Show it when the fetch failed and the user believes the data does not exist and never comes back.

"There's no empty state mockup. This is the first screen after signup."

The state a new user sees before anything else is this one.

"Zero search results is showing a create-your-first-document button. We're using one screen for both cases."

The copy is wrong for the situation because the two kinds were never separated.

"This is a failure but it's falling through to the empty state. It needs a retry button."

Treating an error as emptiness leaves the user no way to try again.

At Pagedeck, Noa draws two empty states for every list screen. Mia tracks the new-user one separately, alongside first-week drop-off.