What Empty States Are

Screens shown when there’s no data.

New user with no content.

Filtered view with no results.

Deleted last item scenario.

Why They Matter

First impression for new users.

Determine if they’ll stick around.

Opportunity to educate and guide.

Not just “no data” message.

Elements of Great Empty States

Clear illustration or icon.

Explanation of what should be here.

Action user should take next.

Optional: example or template.

First-Time User Empty State

Different from returning user.

Focus on setup completion.

Show product’s potential value.

Reduce activation friction.

No Results Empty State

User searched or filtered and found nothing.

Show what was searched clearly.

Suggest alternatives: broaden search, remove filters.

Educational: how search works here.

Zero State Illustrations

Custom > stock.

Match brand style.

Show product value visually.

Simple, not overwhelming.

Copy Best Practices

Encouraging not scolding.

“Start by…” not “You haven’t…”

Clear next action.

Personality where fits brand.

Action-Oriented Design

Primary CTA prominent.

Common paths shown.

Templates or examples for quick start.

Reduce blank page paralysis.

Common Mistakes

Just a message: no illustration or action.

Generic: same for every empty state.

No context: doesn’t explain why empty.

Preachy: makes user feel bad.

A/B Testing Ideas

With/without illustration.

Different CTA copy.

Single action vs multiple options.

Video demo vs static explainer.

Mobile Considerations

Vertical layout naturally.

Illustration size adjusted.

Touch-friendly action buttons.

Consider keyboard accommodations.

Empty State Progression

First visit: onboarding focused.

After first action: guide to next.

Returning user: quick access to common tasks.

Empty states evolve as user matures.

Based on Real Projects

This guide is based on our work with:

• Podd
• ProperFlow

Further Reading

If this guide helped you, you might also want to read our comprehensive guide on UI/UX Design.