Empty States

Empty states occur when the regular content of a view can’t be shown. It might be a list which has no items, or a search which returned no results. Although these states aren’t typical, they are important opportunities for good design to avoid user disappointment or confusion.

Basic Empty State

The most basic empty state displays a non-interactive icon and a text tagline.

Use an icon that conveys the purpose and potential of the application, such as the application’s icon

Include a tagline that:

Has a positive tone
Is consistent with the CMS brand
Conveys the purpose of the application without appearing to be actionable

Actionable Empty State

An actionable empty state displays an interactive icon and a text tagline.

Use actionable empty state when:

Only one action is needed to fill the content
The action involves showing pop-up, overlay, or new tab/window

Do NOT use actionable empty state when:

There are multiple possible actions that can be performed to fill the content
The original action requires interaction with other than buttons (e.g. search bar)
The action redirects the user to the different section in the same page

Use an Icon that Conveys the purpose of the action

There are multiple possible actions that can be performed to fill the content
The original action requires interaction with other than buttons (e.g. search bar)
The action redirects the user to the different section in the same page

Include a tagline that:

has a positive tone
Is consistent with the CMS brand
Directly conveys the purpose of the action using active verb and imperative sentence.

Avoiding Completely Empty State

The most basic empty state displays a non-interactive icon and a text tagline.

Make the users get excited about the content and learn by using the app by themselves. Consider providing starter content that will allow users to explore the application right away.

Recommendations:

Use content that has broad appeal and usage and demonstrates primary features.
Give users the ability to delete and replace this content with clear guidelines how to do so.
If possible, provide content that’s personalized for the user.