Empty states occur when an item’s content can’t be shown.
A list that doesn’t contain any items, or a search that doesn’t display any results, are examples of empty states. Although these states aren’t typical, they should be designed to prevent user confusion.
For content that cannot be displayed because of a system failure, see app errors.
Alternatives to empty states
Content for empty states
Displaying empty states
The most basic empty state displays a non-interactive image and a text tagline.
Use an image that:
Is subtle and neutral with respect to the background
Conveys the purpose and potential of the app in a lively way, such as your app's icon
Include a tagline that:
Has a positive tone
Is consistent with your brand
Conveys the purpose of the app without appearing to be actionable
Avoiding completely empty states
There are several situations in which you can provide users with alternatives to truly empty states.
The most compelling way for new users to learn and get excited about your app is by using it. Consider providing starter content that will allow users to explore your app right away.
Use content that has broad appeal and demonstrates primary features.
Give users the ability to delete and replace this content.
If possible, provide content that's personalized.
If the purpose of the screen isn't easily conveyed through an image and a tagline, consider showing educational content instead.
Help users understand what they'll be able to do on this screen once it has content.
Make it possible to dismiss or skip this content.
Keep it brief.
If nothing exactly matches the user's query, are there any results for a query spelled slightly differently? If so, then show the results, as they may help a user find what they're after.
With this approach, clearly convey in a heading above the results that this content shouldn't be mistaken for a match to actual query results.