Empty States

We use illustrations and instructional text to indicate an “empty” area—an area that will have content after the member takes some action. Where appropriate, we provide suggestions and actions for the member to take which will add content to the area.


Partial empty states

When only part of a screen is empty, we do the same as above and adjust the sizing of the illustration and length of the copy.


Loading states

When a number is loading use an em dash “—“ as a default rather than 0 so that if there is an error retrieving the number, users don’t confuse it as the real value.


Avoid blank empty states

Where possible use starter, educational, or a best match content.

 Empty state      

Empty state

 

 

 Partial empty state

Partial empty state