Skip to content
UI Component

Empty State

Also known as: Placeholder screen, Zero state, Blank state, No data screen
CRISP I - IntelligentCRISP C - Contextual

What is Empty State?

An empty state is the UI shown when a section, list, or dashboard has no content to display. In SaaS products, this most commonly appears during onboarding (when a user has just signed up and has no data), after a search with no results, or after a user completes a task and clears a list.

Empty states are one of the most neglected design problems in SaaS. A blank screen with no guidance is a dead end - it raises questions ("Is something broken? Did I do something wrong?") and kills activation. A well-designed empty state turns an absence of data into an invitation to act.

There are four distinct types of empty states, each requiring a different design response: first-time use (onboarding), no results found (search/filter), post-completion (inbox zero), and error-caused empty states.

Why it matters for SaaS

Product activation - the point at which a new user completes their first meaningful action - is one of the highest-leverage metrics in SaaS. Poor empty states are a leading cause of failed activation. When a user signs up and is greeted by a blank dashboard with no guidance, many will churn before they ever experience the product's value.

Strong empty states guide users to their "aha moment" faster, reduce support ticket volume, and improve the day-one retention metric that drives long-term growth.

Key characteristics

  • A clear explanation of why the state is empty (not just "No data")
  • A visual element - illustration, icon, or graphic - that sets the tone
  • A primary CTA that gives users an obvious next action
  • Copy that is specific to the context (not generic across the whole app)
  • An appropriate tone - delightful for post-completion states, helpful for onboarding states
  • Optionally, a secondary link to help docs or a walkthrough

When to use Empty State

First-time onboarding

When a new user accesses a section of the app for the first time and has created no data yet. The empty state should explain the feature and prompt the first action.

Search or filter yields no results

When a user searches or applies filters and gets zero results. Explain why and offer a path forward (clear filters, try a different query).

Post-completion (inbox zero)

When a user has completed all tasks in a list. A delightful empty state rewards the completion rather than just showing a blank screen.

Best practices

1

Never show a blank screen

An empty screen with no guidance is always a design failure. Even a simple one-line prompt ("Create your first project to get started") is better than nothing.

2

Make the CTA match the empty state type

An onboarding empty state CTA should create the first item. A "no results" empty state CTA should clear the filters. Match the action to the context.

3

Use illustrations sparingly but well

Custom illustrations in empty states signal product polish. Generic stock icons or clipart look cheap. If you can't afford custom illustration, a well-styled icon with good copy beats a mediocre illustration.

4

Match the tone to the context

A post-completion empty state can be warm and celebratory. An error-caused empty state should be calm and reassuring. Onboarding states should be welcoming and motivating.

How CRISP scores this

I Intelligent

Empty state design is a core test of Intelligent UX. A product that anticipates the zero-data state and guides users through it demonstrates smart design thinking.

C Contextual

Contextual empty states explain what the section does and what the user should do next. Generic empty states fail the contextual test.

See how SaasCrisp scores real SaaS websites on all five CRISP dimensions. Learn about the CRISP framework →

Frequently asked questions

Should every empty state have a CTA?

Almost always yes. The one exception is informational completion states like "You're all caught up!" where no action is needed. In all other cases, a CTA is essential.

What's the best copy for a no-results empty state?

Be specific: "No results for '[query]'" is better than "No results found". Then offer a specific action: "Try clearing your filters" or "Search for something else". Avoid vague copy like "Nothing here yet."

How do empty states affect activation rates?

Significantly. Products with well-designed onboarding empty states typically see 15-30% better day-1 activation compared to products with blank or generic zero states. Every product has onboarding empty states - few invest in making them good.