Empty States

Users encounter empty states the first time they use our products or a new feature. It’s our opportunity to educate and delight our customers, as well as alleviate their fears and anxieties.

A good empty state will inform people what this page is, why they should care, and what their next step should be. Linking to educational content, such as Knowledge Base articles and blog posts, is a great way to make our customers successful. Finally, a good empty state should also have an illustrated graphic to visually explain what the feature does, and save the screen from being just text.

A poor empty state, on the other hand, is one that is just blank, or simply tells the user there is no data.

Good Example

Good example of an empty state.

The empty Campaigns screen welcomes people to Optimizely Personalization with an illustration, briefly explains what a campaign is, and provides a call-to-action to create a campaign.


Example of a sidebar empty state.

Sidebars should also have an empty state that explains what the feature does, what the user's next step is, and an illustration.

Bad Example

Bad example of an empty state.

The empty state of the Uploaded Lists feature is poor for many reasons. First, it simply states that the user has 0 lists and is using 0 bytes of space. This is dry and not helpful. Second, it states, “No uploaded lists match your filters. Try clearing them to see all of your uploaded lists.” This statement is incorrect and confusing because the user isn’t filtering anything — there simply aren't any lists uploaded yet. The sidebar tells people to select a list, but there aren’t any lists to select. Finally, there’s a missed opportunity to educate users about what this feature is, how to use it, and why they should use it.

Resources