Empty states in a UI: what to show before there's any data

A new user opens the "Projects" or "Orders" section and finds it empty — no cards, no explanation. A screen designed only for its full state looks broken at this point, even though an empty section is a normal part of the journey.

Explain why it's empty and what to do

Separate the reasons: the section is empty because the user hasn't started yet, because a filter removed everything, or because loading failed. Each reason needs its own text and action — a "Create your first project" button is not the same as a "Clear filter" button. A single "nothing found" message covering all three confuses people.

Don't just reuse the full-state layout

Empty states often get designed last, by copying the container from the populated version and removing the cards. What's left is bare space with no direction. Check the layout on its own: is the hint text contrasty enough, does the action button fit on a small screen, does the illustration end up heavier than the actual feature.

Test it on a genuinely new account

Ask a colleague who wasn't involved in building the screen to open the section with a clean account, without telling them the next step. If they can't tell what to click, fix the text or button placement before release, not after support tickets pile up.