Empty states (hybrid)

Empty states occur when there is no content to be shown.

Short description

A useful empty state will let the user know what’s happening, why it’s happening, and what to do about it. An empty state is an opportunity to engage or educate the user and even to delight them.

When and how to use it

Use an empty state to convey that something is missing/not available and if needed what the user can do about it.

Empty states can be added in different locations depending on their purpose, such as in a page, modals, cards (Containers for widgets, related blocks, etc) and content (tables, graphs, lists, etc).

Behaviour

The message within the empty state is divided into four items;

  • Icon
  • Header
  • Description
  • Call to action with a button or link

We recommend to preferably use a combination of the four items to achieve a suitable message to a user. Although, a description is minimum of what can be shown in an empty state.

The items making up an empty state should be stacking vertically, unless there is horizontal space to do otherwise. In a narrow viewport such as in a mobile/hybrid, it’s only natural to adapt to that behaviour.

For wider viewports such as in tablet and desktop, the icon should placed to the left making sure the actual message is brought up closer to the beginning of the empty state container. The whole message is aligned to top left.

A empty state in a mobile/hybrid context is top aligned unless it is shown in a whole page. In that case it should vertically centered in the viewport.

Do's and don'ts

Do
  • Keep the message brief
  • Be contextual, personal and helpful
  • Add a call to action if needed
Don’t
  • Use icons that are not aligned to the brand

 

Examples for hybrid, mobile and native

Empty page for "page not found", "no connection"

Empty page - with and without icon

Empty modal

Empty modal - with and without icon

 

Specification

Empty page with the option of 64x64 px icon or 128x128 px icon

Empty modal with the option of 64x64 px icon or 128x128 px icon

States

There are multiple ways to inform the user that something is missing or what the next step might be.

Usage examples:

  • First use
  • Error
  • No results
  • User cleared results