design-empty-states

name	design-empty-states
description	Use when designing screens that appear before content exists — first use, no-results, user-cleared state, or error — to orient users and guide the next action instead of showing a blank screen.
source	NNG "Empty States in Mobile UX" (Laubheimer, 2016); Google Material Design "Empty states" guidelines; IBM Carbon Design System "Empty states" documentation
tags	["empty-states","onboarding","ux","first-use","no-results","error-states","ui-patterns"]

Design Empty States

Write copy, add a single CTA, and use illustration or iconography to transform blank screens into helpful prompts that keep users oriented and moving forward.

Why This Is Best Practice

Adopted by: Google Material Design, Apple Human Interface Guidelines, IBM Carbon, Shopify Polaris, and Atlassian Design System all provide explicit empty state guidelines and components; Intercom, Slack, and Notion have each published case studies on how improved empty states increased feature activation rates Impact: NNG (2016) identifies empty states as among the top causes of user abandonment on first use — a blank screen with no context leaves users unsure whether the product is broken, the feature is loading, or action is required; Intercom reported a 17% increase in feature adoption after redesigning first-use empty states with action-oriented copy and a single CTA; Slack attributes part of its onboarding success to empty-state design that guides users to their first message Why best: A blank screen is an implicit error state — it gives users no information about what to do next; a loading spinner without completion feedback is equivalent; empty state design fills the information vacuum with the exact content users need at the moment of uncertainty

Sources: NNG "Empty States in Mobile UX" (Laubheimer, 2016); Google Material Design "Empty states" (material.io); Kleppmann "Designing for Empty States" (Intercom Design, 2017)

Steps

1. Classify the empty state type

Different types require different content:

Type	When it appears	User's mental state
First-use	Feature used for the first time; no data yet	Curious but uncertain what to do
User-cleared	User deleted all items or completed all tasks	Accomplished; needs next step
No-results	Search or filter returned nothing	Frustrated; needs to adjust or try again
Error	Load failed due to network or server issue	Frustrated or confused

Mismatching type to treatment is the most common empty state error — a first-use state that looks like an error increases anxiety; a no-results state that looks like first-use is confusing.

2. Write the headline (orientation copy)

One short sentence that tells the user exactly where they are and why it's empty.

First-use:    "No projects yet"
User-cleared: "All caught up!"
No-results:   "No results for 'invoic'"
Error:        "Couldn't load your projects"

Rules:

• State the entity name ("projects", "messages", "invoices") — not generic ("No content here")
• First-use and user-cleared: positive or neutral tone
• No-results: include the search term so users know the empty state is specific to their query
• Error: acknowledge the failure without blaming the user

3. Write the body copy (reason or instruction)

One sentence that explains why it's empty or what to do next.

First-use:    "Create a project to start tracking your team's work."
User-cleared: "Check back when new tasks are assigned."
No-results:   "Try a different spelling or check for typos."
Error:        "Check your connection and try again, or contact support."

For first-use states, body copy is the highest-value element — it answers the question users actually have ("what does this do and where do I start?").

4. Add one primary CTA (first-use and user-cleared only)

First-use and user-cleared empty states need a single, specific action button. Not two buttons; not a link buried in body text — one prominent CTA.

First-use:    [Create project]
User-cleared: [Browse new tasks] or just leave without a CTA if genuinely "done"

No-results and error states do not need a CTA to create — they need a CTA to recover:

No-results:   [Clear filters] or [Browse all]
Error:        [Try again] or [Go to dashboard]

Never use a generic "Get started" CTA — name the action ("Create your first project").

5. Add illustration or icon (optional but high-value for first-use)

Visual support makes the empty state scannable and less clinical.

• Icon: appropriate for compact or data-dense UIs (tables, sidebars)
• Illustration: appropriate for full-page first-use states; increases memorability
• No image: acceptable for inline no-results states within a search result list

Guidelines:

• Illustration should represent the content type, not a generic empty box
• Do not use sad faces, broken items, or error imagery for first-use states — they signal failure, not opportunity
• Keep illustrations small enough not to dominate the layout; empty state is a waypoint, not a landing page

6. Apply by state type — complete templates

First-use:

[Illustration of the content type]
[Entity name] — e.g., "Projects"
[Orientation] — e.g., "Organize your work into projects to track progress with your team."
[Primary CTA] — e.g., [Create project]

User-cleared:

[Optional celebratory icon]
[Positive headline] — e.g., "All done!"
[Next-step copy] — e.g., "New tasks will appear here when they're assigned."
[Optional CTA if genuinely relevant]

No-results:

[Search icon or neutral illustration]
[Specific headline] — e.g., "No results for 'invoic'"
[Recovery copy] — e.g., "Check for typos or try a different term."
[Recovery CTA] — e.g., [Clear search]

Error:

[Error icon — not a broken image]
[Honest headline] — e.g., "Couldn't load your projects"
[Cause + action] — e.g., "Check your connection and try again."
[Retry CTA] — e.g., [Try again]
[Secondary] — e.g., [Contact support]

7. Test with zero-state users

Before shipping, conduct a 5-user test with participants who have never seen the feature:

• Can they identify what the feature is for?
• Do they know what to do next?
• Does the state feel like an error or an invitation?

First-use empty states that users mistake for loading errors indicate orientation copy needs to be clearer.

Rules

• Every empty state must have at minimum: a specific headline (not "Nothing here") and body copy
• No-results empty states must include the search term or filter that caused them
• Error empty states must offer a recovery action — "Try again" or "Go back" — never just an explanation with no path forward
• Never use blank white space alone as an empty state — even a text explanation is better than silence
• Illustrations for first-use empty states should represent the content, not the emptiness (show what a project looks like, not an empty box)

Common Mistakes

• Generic copy: "No data to display" — fails to orient the user, name the entity, or suggest next action
• Error imagery on first-use: a sad face or broken icon on a first-time-user screen communicates that something is wrong, creating unnecessary anxiety
• Multiple CTAs: two or three buttons in an empty state dilute focus; pick one action that best unblocks the user
• No-results state that looks like first-use: if "No results for 'X'" looks identical to "No projects yet", users can't tell if the search worked or the feature is empty
• Empty state for authenticated-only features behind a paywall: don't show an empty first-use state for a feature the user cannot access; show a gate/upgrade prompt instead

When NOT to Use

• When the empty state is transient and resolves in < 1s — a brief loading flash that resolves immediately doesn't need empty state treatment; use a skeleton screen or spinner instead
• When the feature genuinely has no actionable next step from the empty state (e.g., an audit log with no events yet) — body copy explaining the condition is sufficient; don't fabricate a CTA