guidelines

Empty States

Moments in a user's experience where there is no content or data to display.

Empty states provide us with the opportunity to improve the user's experience by helping to avoid confusion and keep them engaged. A useful empty state should provide the user with information about what is happening, why it's happening and what they should do about it.

When should empty states be utilized?

1. First-time use of app/feature

It is helpful to provide information to help users understand what the application/tool/feature is and what value it provides. Users should then be provided with instructions and/or actions to get them started.

2. An action is required to populate content

Sometimes a user must complete an action in order to populate data and/or content within a section of the application. It is helpful to provide content that makes them aware of this, as well as instructions on what they need to do to populate it.

3. An action cleared the content

Sometimes a user action can clear data and/or content that was there previously. It is helpful to let the user know that it is okay that there is nothing there. In some cases it may be helpful to tell the user what action cleared the section or even give them the option to undo that action.

4. There are no results to display

Sometimes a user will complete an action that does not yield any results. It is helpful to prompt the user, letting them know their action did not return anything and to perform it again with modifications.