Designing for the empty state
The first screen a new user sees is usually the emptiest one. It deserves more care than it gets.
The screen nobody designs
Product teams spend weeks on the dashboard full of charts, the inbox with forty messages, the project board crowded with cards. Then a new user signs up and sees none of it. They see a blank table with a header row and the word "None". The screen that shapes their first impression is the one that received the least attention.
What an empty state is for
An empty state has three jobs:
- Show the shape of the thing. A faint outline of the rows, cards, or charts that will appear tells people what this screen becomes once it is used.
- Say one true sentence. Not an apology and not a paragraph. One line about what belongs here.
- Offer the next action. A single button that starts the work, labeled with the action it performs.
Anything beyond those three is usually decoration, and decoration on an empty screen reads as filler.
Ghost interfaces
The most effective pattern we have found is the ghost interface: the real layout, rendered with placeholder shapes at low contrast. It sets expectations without pretending to have data. Users understand instantly that this is a list, that each row will have a title and a date, and that the column on the right will show a status.
Ghost interfaces also prevent a jarring layout shift when the first item arrives. The page does not reorganize itself; the shapes simply fill in.
Avoid the illustration trap
Large illustrations of smiling characters holding empty boxes became popular for a reason, but they age quickly and they push the actual action below the fold on smaller screens. If you use an illustration, keep it small and keep the button above it.
Different kinds of empty
Not every empty screen is the same:
- First use: nothing has ever been created. Teach and invite.
- Cleared: the user finished everything. Congratulate briefly, or just stay quiet.
- Filtered to nothing: the data exists but the current filter hides it. Say so, and offer to clear the filter.
- Failed to load: this is not empty at all. It is an error, and it must never be dressed up as an empty state.
That last one matters more than it looks. A list that failed to load and shows "No items yet" tells the user something false, and they will act on it.
Write less
The best empty states use fewer words than you expect. Read yours aloud. If a sentence restates the page title, cut it. If it explains a concept the button already implies, cut it. What remains is usually one line and one action, and that is enough.