System & logic
Empty states
Never leave a blank screen. Say what is missing, why it is missing, and what to do next — an empty state is the one screen guaranteed to need instructions.
'No projects yet' + 'New project' button
Empty panel, no next step
How to apply it
- 1
Pair every empty state with an explicit message like No projects yet plus a New project button.
- 2
State what is missing in the heading, not just a vague icon.
- 3
Add a one-line reason when relevant, such as no results match your filters.
- 4
Always include a primary action button, never leave the fix implicit.
Why it works
Every empty state is a moment of doubt: did something break, or is there genuinely nothing here yet. The three-part structure — what is missing, why, and how to fix it — turns a dead end into a next action: No projects yet names the state, a line underneath says why, and a New project button hands the reader the fix, where a bare white panel hands them a question.
What breaks
A blank white box leaves users unsure if the page is broken or still loading, so they abandon the screen or file a support ticket instead of taking the obvious next action.
Review questions
- 1
Does the empty screen name what is missing instead of showing a blank box?
- 2
Is there a visible button or link telling the user how to fix it?
- 3
Would a first-time user know this state is intentional, not a bug?