Empty State
Fill spaces when no content has been added yet, or is temporarily empty due to the nature of the feature and should be designed to prevent confusion.
Empty State Design Framework
When designed thoughtfully, empty states become an essential part of a smooth user experience, providing enough context to keep users working in a productive way. There are several approaches to explore that will match the needs a developer in different situations:
- Blank Slate - Basic empty state for first run experience
- Informational - Alternative for first use empty state, including in-line CTAs and supplemental documentation links
- Educational - Launch a contextual onboarding flow to gain deeper understanding about that area of the app
- Guide - Starter content that allows users to interact with data and learn the system by tinkering or setting up their environment
Title
A message conveying the state of the product.
Show code Hide code
Blank Slate
The most basic empty state should convey the state of the view.
Title
A message conveying the state of the product.
Show code Hide code
Informational
Help users by clearly explaining the benefit and utility of a product or feature, with a call to action and link to more information to help users progress.
Default to showing rather than telling the value of a feature. Certain entry points to a product may call for a unique empty state and a call to upgrade. Informational empty states will include a call to action.
Title
This should detail the actions you can take on this screen, as well as why it's valuable.