Empty states design: best practices

An empty state is what a screen shows when there is no content yet, no search results, or something went wrong. A good empty state explains the situation and offers the next step instead of leaving a blank area.

What a good one includes

The essentials:

  • First use: explain what will appear and offer the action that creates it
  • No results: show what was searched and how to broaden it
  • Error: say what happened and how to retry
  • One primary action, not a list of options

Design it with Fleck

Describe your product and Fleck generates the empty states as part of a connected project, using your requirements, user flows and one shared design system, then audits it for UX issues.

How to design it

  1. List every empty case

    First use, cleared, filtered to nothing, offline and error.

  2. Write the message

    One sentence on what belongs here and why it is empty.

  3. Add the next action

    The single most useful thing the user can do now.

Common mistakes

  • A blank area with no explanation
  • Same message for first use and no results
  • Decorative illustration with no action

Domande frequenti

Do empty states need illustrations?

No. A clear message and action matter more. An illustration can help tone but should not push the action below the fold.