Empty states

pattern charts tables

Why do we use empty states?

Empty states are useful to guide the user and generate engagement. With empty states we can provide basic information and help users to understand why no data is shown.

There is a template for empty entity views, empty list views and empty tables.

Empty list views

Empty list example

There can be different reasons why the list shows up empty, for example: A bookmarked filter list view where the filter does not apply to items anymore.

Empty list style

The empty state of a list contains of:

  • A headline
  • A small illustration
  • A description
Empty list style
Empty list style on mobile

Distances

x: 12px
y: 20px

Headline

font-family: Bernina Sans Light
font-size: 24px
line-height: 33px
color: $gray-700

Body

font-family: Bernina Sans Regular
font-size: 14px
line-height: 20px
color: $gray-700

Illustration

max-width: 124px
max-height: 168px
highlight color: theme color 500
secondary colors: $gray-600, $gray-300

Empty entity views

Empty view example

Apart from a general description of this view, empty views are divided multiple steps that should describe:

  • What users have to do in order to receive data
  • What benefits users get once they enable a feature (will most likely take up two steps)

Empty entity style (1380px-640px screen)

The empty states of entity views contain:

  • A headline
  • General description
  • Three small illustration
  • Three short descriptions
  • Buttons if further actions are required
Empty view style

On small screens (<640px), the elements in empty views will move below the other. The arrows will turn to face down.

Empty view style on mobile

Distances

x: 20px
y: 40px
z: 52px

Headline

font-family: Bernina Sans Light
font-size: 24px
line-height: 33px
color: $green-500

Body

font-family: Bernina Sans Regular
font-size: 14px
line-height: 20px
color: $gray-700

Illustration

max-width: 400px
max-height: 214px
min-width: 150px
min-height: 80px
highlight color: $green-500
secondary colors: $gray-600, $gray-300

Arrow

width: 10px
height: 16px
color: $gray-300

Empty entity views on big screens (>1380px)

The layout uses the whole available width of the view.

Empty view style on big screens

Body (if text width >400px)

alignment: centered

Illustration

alignment: centered in column

Distance

x: divide available space if screen is >1920px

Arrow

alignment: centered between columns