Patterns
Empty States
How to design screens with no data
Empty states occur when a view has no content to display. They are an opportunity to guide, educate, and prompt the user to take action.
Anatomy of an Empty State
An effective empty state should inform the user why the view is empty and tell them what to do next.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Types of Empty States
- First Use: The user has just started using the feature. This should educate and encourage the first action.
- User Cleared: The user has completed all tasks (e.g., inbox zero). This should celebrate the achievement.
- No Results: A search or filter returned no matches. This should suggest modifying the query.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Best Practices
- Use an illustration or icon to make the state visually interesting.
- Keep the copy concise and friendly.
- Always provide a clear Call to Action (CTA) button to help the user move forward.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.