Empty states

Instead of leaving screens blank or with a generic “No data” message, thoughtful empty states help users understand why the screen is empty, what to expect once it’s filled, and how to move forward.

A poorly designed empty state creates confusion or the impression that something is broken. A good one reduces uncertainty and builds trust.

Guidelines for designing helpful, accessible empty states.

Explain the context

Tell users why the state is empty (for example: “You don’t have any saved items yet”). This reduces confusion.

References:

• Designing empty states in complex applications – Nielsen Norman Group

Guide users to the next step

Provide a clear action (for example: “Add your first task”). Turn a blank screen into a call-to-action.

References:

• Empty states – Google Material Design
• Empty state – Atlassian Design System

References:

• The role of empty states in user onboarding – Smashing Magazine

Use supportive visuals carefully

Illustrations or icons can make the state feel friendly, but they must not replace context or actions.

Keep tone empathetic and encouraging

Use positive, supportive language. Avoid blaming the user (“No results found” → “We couldn’t find anything — try adjusting filters”).

References:

• Empty states: examples & guidelines – UX Writing Hub

Frequent mistakes with empty states.

Showing only “No data” without explanation

Leaves users confused about what to do or whether something is broken.

Providing no actions

Without a clear next step, users can’t proceed.

Overloading with decorative visuals

Visuals that add no clarity distract from purpose and slow task completion.

Using a negative or blaming tone

Harsh phrasing damages trust and discourages engagement.

Key takeaways for empty states.

• Explain context so users understand why the screen is empty.
• Always provide a clear next action.
• Use previews and visuals to set expectations.
• Keep tone supportive and encouraging.
• Good empty states reduce uncertainty and promote engagement.