Empty States

Empty states or zero-data state are a way to improve the user experience of your product, from onboarding to encouraging users to interact. Empty states are screens digital products that are not yet full of information, but which will eventually have content on them when the user populates them. Empty states can be used to guide users to action, teach them about the digital product or simply show a brand’s personality to provide an engaging user experience.

Content

The components of an empty state consist of a non-interactive image and a text tagline. Empty states can also include a call to action depending on the situation. We should remember to use content that follows a consistent styling.

Use an image that:

• Sets a pleasant scene and complements the situation
• Is consistent with your brand or existing states

Include a tagline that:

• Has a helpful message
• Is consistent with your brand or existing states
• Conveys the purpose of the screen

Example

Displaying an empty state

Empty states should look the same across both mobile and desktop

MobileTablet/Desktop

It's empty!

There are no items in your bag right now.

Start Shopping

<div id="emptyState" class="emptystate bag"> <div class="emptyStateImage"> <img src="https://www.freemans.com/Common/pix/emptystate/empty_bag.png" /> </div> <div class="header">It's empty!</div> <div class="text">There are no items in your bag right now.</div> <a href="#/"><button class="primary">Start Shopping</button></a> </div>

<div id="emptyState" class="emptystate bag">
  <div class="emptyStateImage">
    <img src="https://www.freemans.com/Common/pix/emptystate/empty_bag.png" />
  </div>
  <div class="header">It's empty!</div>
  <div class="text">There are no items in your bag right now.</div>
 <a href="#/"><button class="primary">Start Shopping</button></a>
</div> 

Copy Code

Remember

• Use existing empty states as a foundation for creating new ones.
• All empty states should look and behave consistently across the digital platform. The basic styling should not change.
• Follow the tips within the
  langauge princple
  when creating tag lines and call to actions.

Do

Use engaging content that conveys the purpose of the screen.

Use neutral images and colours that are consistent with your brand and other empty states.

Use language that is helpful and empathetic.

Use an encouraging call to action.

Don't

Don’t divert from the common styling and components of empty states.

Don’t use overly large or complex images.

Avoid taglines that express urgency.