Empty State UI Examples and First-Use UX Patterns
An empty state explains why there is nothing to show and what the person can do next. It is not a generic illustration pasted into every blank screen. Try the original collection demo below: add an item, remove it and reset the shelf.
UI Discovery editorial · Updated
Try the original UI example
Field notes · Collection preview
Your reading shelf
A little room for inspiration
Add a title to see how the shelf changes when it has content.
The shelf is empty. No titles are stored or sent.
How to use this guide
First use needs a useful next action
A new account has no history to display. Explain the purpose of the collection and offer the smallest action that creates value. Keep the action close to the explanation, and avoid demanding unrelated setup before the user understands why it is necessary.
No matches should preserve the search context
A filtered result with zero matches is different from an empty account. Keep the entered query and active filters visible, then offer a clear-filter or edit-query action. Do not tell an existing user to create their first item when their items are merely hidden by a filter.
An error is not an empty collection
When loading fails, say that the content could not be retrieved. Preserve known data when possible and offer retry. Announce state changes to assistive technology without unexpectedly moving focus; a polite status message is often enough for a local list update.
Review checklist
- The message explains the actual reason content is absent.
- The next action addresses that reason and is keyboard reachable.
- Adding or removing the last item updates the state and announces the result.
Continue with real references
- Original UI examples →
The collection interaction is an original UI Discovery example.
- Dashboard prompt →
Include all four states in the implementation brief.
Common questions
Do these examples prove a design will convert better?
No. References and original demos explain design decisions; they do not establish conversion, performance or accessibility outcomes for your product. Test the implementation with your own users and data.
What should I check before publishing?
The message explains the actual reason content is absent. The next action addresses that reason and is keyboard reachable. Adding or removing the last item updates the state and announces the result.