Designing useful empty states
What an empty state is
An empty state is what people see when a screen or list has nothing to show. Left blank, it looks broken. Designed well, it explains the space and points to the next step. Treat it as a real screen, not an afterthought.
Four kinds
First use
Nothing has been added yet. Explain what the space is for and invite the first action.
No results
A search or filter matched nothing. Say so, and suggest changing or clearing the query.
Cleared or completed
The list is empty because the work is done. A short confirmation is enough.
Error
Content failed to load. Say what happened and offer a way to retry.
What to include, and tone
Good empty states answer three questions: what is this space for, why is it empty, and what is the next step? Keep the copy short and give one clear next action, usually a single button.
Generic copy examples:
- First use: No projects yet. Create a project to get started. [Create project]
- No results: Nothing matches this search. Try a different word or clear the filters. [Clear filters]
- Completed: All tasks done. New tasks will appear here.
- Error: The list could not be loaded. Check your connection and try again. [Try again]
The tone of an empty state should match the situation. A first-use screen can be encouraging and brief. An error state should be calm and practical. A completed state can be short and positive, without jokes that might feel out of place.
- Place the message and action in the area where content will later appear, so the screen does not shift once data arrives.
- Reuse the same layout for all empty states, changing only the heading, text and action.
- Translate the copy properly and test it in right-to-left layouts, where the button and text alignment should mirror.
Avoid dead ends and keep it accessible
- A dead end is a screen with no action. Always offer a way forward or a way back.
- Illustrations are optional. A clear heading and a button work without them.
- Make the message real text, not part of an image, so screen readers can read it.
- When results update after a search, consider announcing the empty message with a live region.
Write the message to explain and to help, never to blame the user.
Review every empty state when features change. A message that mentioned a button that no longer exists is worse than no message at all.
Sources
- Nielsen Norman Group. Usability Heuristics for User Interface Design (10 heuristics by Jakob Nielsen).
This guide was drafted with AI assistance from public standards and references. For the exact wording of a standard, use the sources listed above.