A collection has five states, not one
Any component that shows a set of things has at least five states a real person can land on: empty, loading, error, exactly one item, and many items.
Most designs cover the last one. A list with eight rows of plausible data, every avatar loaded, every name a comfortable length, every date recent. It is the state that gets put in the case study and the state the stakeholder signs off.
Eight perfect rows is the rarest state there is
On the first day nobody has eight rows. They have none. On a slow connection they spend longer looking at the loading state than at the content. When the request fails they get the error. When the search is too narrow they get nothing back.
Designing only the full state does not remove the other four. It moves them to whoever is implementing the screen, at the end of the work, without a design to build from. That is where "No data" centred in a grey box on an otherwise finished product comes from.
Empty is at least three different states
Treating empty as one thing is the most common version of this mistake, and the three need different words and different actions.
- Nothing yet. A new account. Nothing has ever been created here. This one is onboarding: name what belongs in this space and give the single control that makes the first one.
- Nothing left. Everything has been completed, archived or deleted. This is usually a small success and should read like one. Somebody who has used the feature for a year does not need to be told what a project is.
- Nothing matches. A filter or a search came back with no rows. The data exists and the query is the problem, so the action is to widen or clear the filter, not to create a record.
Showing "Create your first project" to somebody who has just archived their twelfth is the precise failure that separating these prevents. So is offering a "New invoice" button to somebody whose search for a client name returned nothing.
What an empty state actually needs
Name what goes here, in the words the person would use. Give one action. Stop.
A useful check is to cover the illustration and read what is left. If the remaining words do not tell somebody what this space is for and what to do next, the illustration was carrying meaning it cannot carry, and it will carry even less for anybody who has images turned off or is listening to the page.
Loading: hold the space open
When the shape of what is arriving is known, show that shape. A skeleton matching the final layout means nothing jumps when the data lands. A spinner in the middle of an empty region means the whole page moves the moment it resolves.
The reason to care is not elegance. Content that shifts under a pointer causes people to click the wrong thing and to lose their place in a paragraph they were halfway through. Reserving the space is the fix, and it costs nothing once the layout is known.
Error: what happened, and what to do
Two things, and the second matters more. What failed, and the one action available now. "Something went wrong" manages neither, and it is worse than silence because it looks like an answer.
A retry control that retries only the part that failed is worth more than a message that leaves a full page reload as the only way forward. If the failure is permanent, say so, and point somewhere useful.
One item
A layout that looks composed with eight rows often looks broken with one. A single card stranded at the left of a three column grid. A table with more header than body. An average that is computed from a single number.
This is worth checking carefully, because it is the state every user passes through exactly once: immediately after they succeed at something for the first time. It is the worst possible moment for the product to look unfinished.
The order to work in
Empty, then one, then many, then loading, then error.
Working in that order means the structure gets decided by the hardest cases instead of the most flattering one. It also tends to produce a simpler full state, because a layout that survives one item and no items is usually a layout without much decoration in it.
The full state is the one that gets screenshotted. The other four are the ones that get used.
