Internet Explorer is not supported by Design Library

The last version of Internet Explorer, version 11, was released on October 17, 2013. This is a very long time ago when taking into account the rapid development of web technologies. These days it is often difficult and time consuming to get modern technologies to work well in this old browser. More and more frameworks are dropping support, and even Microsoft themselves has announced that they will fully drop support for IE in their own services in 2021.

Consequently, we have decided to not include support for IE in the Design Library website.

Luckily, there are modern options in active development. Please use Firefox, Edge or Chrome instead.

Empty states

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

Guidelines

Short description

An empty state happens when there’s nothing to show in a particular context. 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 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. The most common types of empty states are:

  • First use
  • No result
  • User cleared
  • Error

Empty states can be added in different locations depending on their purpose, such as in a page, modal, card (container for widgets, related blocks etc.) and content /tables, graphs, lists etc.) The empty state should look different depending on the reason why it is shown.

Behaviour

The empty state contains four items:

  • Icon (optional)
  • Header (optional)
  • Description (mandatory)
  • Call to action with a button or link (optional)

Depending on the reason why the empty state is being shown a combination of the items should be used to achieve the best experience for the user. In some cases we want the user to take action other times a simple description is preferred to let the user know the reason the empty state is shown.

For wider viewports such as in tablet and desktop, the pictogram should be 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.

An empty state in a mobile/hybrid context is vertically centered in the viewport.

Do's and don'ts

  • Keep message brief
  • Be contextual, personal and helpful
  • Add a call to action if needed
  • Use on-brand pictograms
Specification

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
Examples

Examples for hybrid, mobile and native

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

Below: Empty page - with and without icon

Below: Empty modal

Below: Empty modal - with and without icon

Examples for desktop

Below: Empty state with higher attention

Below: Empty state with low attention

Subsections

Page last updated

Feedback

Was this page helpful?