EmptyState

Sometimes users will perform an action and expect to see something, but you have nothing to show them. This happens when a search has no results, when they haven’t entered data yet, and other similar cases. Help them get out of this situation by providing guidance in an empty state.

Remember that an empty state is not a desired outcome, so try to encourage users to continue with helpful language and a positive illustration. Guide them to the next step to take to get to their desired goal.

Component status

Content structure

Guidelines           

Guide users out

Empty states can feel nicer when they have illustrations and friendly messages. But don’t forget that they’re not an end goal in themselves.

Help users get out of an empty state into a place they can actually do something. Highlight the actions a user can take to move forward in their desired path.

Focus on simple actions to take to achieve a goal.

Use humor carefully

Empty states can be stressful for users because they want to get something done and can’t. Maybe they want to find a connection, book a trip, or start a new project, but all they have is an empty state.

While humor can lighten the mood, remember that we keep our tone more serious in stressful situations. Especially stay away from anything that might look like blaming the user for the empty state or making it seem impossible to get out of.

Make nonvisual info clear

Illustrations in empty states are just for decoration. This means they don’t need to have alternative text embedded in the image.

Instead, focus on making the title and any other text clear on their own so the message of how to get out of the empty state is accessible to everyone.

Related components

Illustration

See how to use illustrations on their own.