UX/UI design / DIJION
Make empty states explain the next step
Empty-state examples separating first use, no search results and unavailable content, with a useful next action for each.
A screen without visible content does not represent a single condition. Someone may have no records yet, a filter may exclude every result, or content may have failed to load. Reusing the same cheerful illustration and Nothing here message leaves the next step unclear. Establish the reason first, then consider the person’s task.
Separate empty, loading and failed states
Do not show an empty result while the request is still unresolved. If the server is unavailable, You have no records may also be false. Document the evidence that allows the screen to make each claim. Interface accuracy depends on the data state as well as the visual design.
Scroll the table horizontally to see all columns.
| State | Example message | Primary action |
|---|---|---|
| First use | Your reading list is empty. Save an article you would like to read later. | Explore articles |
| Filtered result | No articles match these filters. | Clear filters |
| Loading failed | We could not load your list right now. | Try again |
| Access boundary | Sign in with the relevant account to view this list. | Switch account |
Offer an action that addresses the cause
Creating a first record and recovering from a failed request require different paths. Showing Contact us everywhere can create unnecessary support work. If clearing filters addresses the cause, offer that directly. When an action deletes data, say what it changes rather than using an ambiguous Clear label.
Design the transition to populated content
An empty state should not be an arbitrarily centered version of the populated screen. Keep search or creation available in a predictable place. Reduce an illustration if it pushes the useful action below a narrow viewport. Check with larger text that decorative characters do not crowd out the title, explanation or button.
Preserve expectations on return
After the first record is added, make the new item recognizable without requiring a search for success. If the action leads elsewhere, provide a working return path. Preserve filters and drafts during retries. An empty state that remains after successful creation is a separate interface defect.
An empty-state review card
- Cause: truly no records, filtering, restricted access or a failed load?
- Information: do the title and explanation accurately identify that cause?
- Action: can the person continue the current task?
- Transition: have loading and the arrival of first content both been tested?
These are illustrative examples. Before using the copy, verify the real data source, access boundary and action outcome. A useful empty state explains where the task stands; it does not fill blank space merely for decoration.