/empty-states

An empty list is a first-run screen, not an error. It is also, for a new user, the first screen — which makes it the one place where a blank div does the most damage.

Three kinds, and they are not the same

Nothing yet. The user has done nothing wrong. Show what belongs here and the action that creates it. This is a teaching moment and the only one you get.

Nothing found. The user searched or filtered. Echo the query back so they can see the typo, and offer the way out — clear the filter, broaden the range. Never show the first-run copy here; telling someone how to create their first invoice when they have four hundred is insulting.

Nothing left. They cleared the queue. This one is allowed to be pleased about it, briefly.

Size it like the filled state

The empty state should occupy roughly the space the filled state will. Otherwise completing the action makes the whole page jump, which reads as a bug at the exact moment you wanted it to feel like progress.

Say less than you want to

Headline, one line of explanation, one action. An illustration is optional and usually costs more than it returns — it delays the point and it is the first thing that looks dated.