Empty State Design Patterns

An empty state is what a user sees when there's no content yet — an inbox with no messages, a dashboard with no data, a project with no tasks. It's easy to treat as an edge case not worth designing carefully, but it's often the very first meaningful screen a new user sees, before they've experienced any value from the product at all. Getting it wrong has a real cost: research suggests roughly 75% of users abandon a product within the first week when onboarding fails to guide them past that first empty-state moment.

Why empty states matter more than they look

A blank screen with no guidance forces the user to figure out what to do next entirely on their own. For an experienced user who already knows the product, that's a minor friction. For a first-time user, it's often the moment they decide whether the product is worth the effort to learn — and a confusing or unhelpful empty state reads as evidence the product itself is confusing, even if the rest of the UI is well designed.

The core anatomy of a good empty state

Most well-designed empty states share three components, though not every one needs all three:

1. A headline that names what's missing, in plain language — not a generic "No data" but something specific to the context ("No leads yet" rather than "No results found").
2. A supporting description that explains why it's empty and, critically, what to do about it — the difference between "You have no projects" and "Create your first project to start tracking tasks" is the difference between a dead end and a nudge forward.
3. A call-to-action — a button or link that takes the user directly to the action that would fill the empty state, rather than leaving them to hunt for the right menu item elsewhere in the UI.

An illustration is optional and mostly serves personality/brand purposes — it can make an empty screen feel less like an error and more like a normal, expected part of the product, but it's not load-bearing for usability the way the copy and CTA are.

Copy is doing more work than it looks like

UX writer Kinneret Yifrah's guidance on this is worth internalizing: empty-state copy has to be meaningful, not generic. "No items found" tells the user nothing about what to do. "Add your first client to start sending invoices" tells them exactly what action resolves the empty state and what value that action unlocks. The copy is effectively a micro-onboarding moment, and treating it as filler text (or worse, leaving the default framework-generated "No results" message) wastes one of the cheapest opportunities in the product to guide a confused user.

A newer pattern: routing questions that reshape empty states

A more advanced pattern gaining traction is asking a single routing question at signup — "What's your main goal here?" or similar — and using the answer to reshape every downstream empty state the user encounters. Instead of a generic "no data yet" screen, a user who indicated they're primarily interested in lead generation sees an empty state specifically nudging them toward setting up their first lead capture flow, while a user focused on support sees one nudging toward their first FAQ. This turns what's usually a single generic screen into a personalized onboarding path with very little extra design work — the routing question does the segmentation once, and every empty state downstream inherits it.

Accessibility is easy to miss here specifically

Empty states are disproportionately likely to get accessibility wrong, because they're often added late and treated as low-priority. WCAG 4.1.3 (Level AA) requires that status messages — which includes many dynamically-appearing empty states, like "no results for your search" — be programmatically determinable by assistive technologies without requiring focus to move to them. In practice, that means using proper ARIA live regions for empty states that appear dynamically (e.g., after a search or filter action) so screen reader users are actually informed the state changed, rather than silently seeing nothing and assuming the action failed.

Empty states are the actual primary onboarding surface, not tours

A reframe worth taking seriously from current 2026 onboarding research: users encounter empty states more often than they encounter any onboarding modal, tooltip, or guided product tour, which makes the empty state arguably the single most important onboarding surface in a product — not a secondary detail to polish after the "real" onboarding flow is built. That's a meaningful shift in priority from how empty states have traditionally been treated (as a fallback screen handled late in development), and it reframes the routing-question pattern described above as central rather than a nice-to-have enhancement. Notion's onboarding is a commonly cited example: one of the very first things it asks a new user is how they plan to use the product — work, personal, school — and that single two-second answer, which doesn't block access to the dashboard, silently reshapes template suggestions and empty-state guidance throughout the rest of the experience without ever feeling like a separate "setup" step.

The more advanced version of this pattern happening in 2026 goes further than a single routing question: adaptive activation systems capture behavioral signals within the first 90 seconds of product use, feed them into a model that predicts which kind of user this likely is — a power user, a casual evaluator, someone who's likely the wrong fit entirely — and then dynamically reshape not just the empty-state copy but the actual next-step checklist and CTAs based on that predicted path. Canva's approach illustrates a simpler, template-first version of the same underlying idea: rather than showing a blank canvas as the default empty state, it surfaces template categories within seconds of signup, and clicking any one drops the user directly into an editable, already-populated design — replacing the traditional "empty state explaining what to do" pattern with one that skips the explanation and puts the user directly into a populated starting point instead.

A practical checklist

• Audit every empty state in your product — not just the main dashboard, but every list, table, and search result that could plausibly be empty.
• Replace any generic "No data" or "No results" text with copy specific to that context and the action that resolves it.
• Add a direct CTA wherever a clear next action exists.
• Check that dynamically-appearing empty states (post-search, post-filter) are announced correctly to screen readers.
• If you already collect any signup or onboarding signal about user intent, consider whether it could reshape empty-state copy and CTAs specifically for that user segment.

Sources: Pencil & Paper — Empty State UX Examples & Best Practices, Toptal — Empty States: The Most Overlooked Aspect of UX, 72Technologies — Empty States as Onboarding: A Practical UX Playbook, Userpilot — Product Personalization for SaaS in 2026