What is an Empty State?

An empty state refers to a user interface screen displayed when there is no data available to show. It often serves as a placeholder to inform users that their request has yielded no results.

When to use an Empty State?

An empty state should be used in scenarios where data is expected but currently unavailable, such as when a user first accesses a section of an app or when filters applied yield no results. It helps manage user expectations and provides a clear indication of the current state of the application.

When not to use an Empty State?

Avoid using an empty state in situations where data is loading or when the user has not yet interacted with the application. Instead, a loading indicator or a prompt to take action (like creating new data) is more appropriate in those cases.

What is the anatomy of an Empty State?

An effective empty state typically includes a clear message explaining the lack of data, visually appealing graphics or illustrations to engage users, and actionable buttons or links that guide users on what to do next, such as creating new content or adjusting filters.