Why Your Empty States Are Losing You Users (and How to Design Them)

01The Moment Nobody Designs For

Picture this: a user signs up for your app, completes onboarding, and arrives at their dashboard for the very first time. They are motivated and ready to engage. Then they see it — a blank screen with a small grey icon and the words "No data yet."

Empty states are the screens users see when there is no content to display. A new account with no activity. A search that returns no results. An inbox with no messages. A feed with no posts. These moments happen constantly across every digital product, yet they are often treated as an afterthought — something to slap a placeholder on and ship.

That is a mistake. An empty state can look completely fine on a Figma artboard, throw no errors, and still give a new user no reason to stay. Nobody complains; they just leave quietly, which is the hardest kind of drop-off to diagnose.

02Why Empty States Matter More Than You Think

When people meet something empty or undefined, uncertainty kicks in. They do not know what to do. They do not know if they are in the right place. They start to question whether the product is broken, whether they set it up wrong, or whether it is even worth continuing.

For a first-time user, an empty state is often their very first experience with the actual core of your product — after the marketing pages and onboarding flow. For everyone who has signed up and not done anything yet, the empty state is the product. If that moment feels cold, confusing, or unhelpful, the trust you built during onboarding can evaporate.

An empty state is not a design problem. It is a conversation. And right now, most products are responding to their users with silence.

Empty states sit directly on the path to the user's first "aha moment". They are either a bridge that guides the user forward, or a wall that stops them cold.

03The Three Types of Empty States You Need to Know

1. First-Use Empty States

This is the most important category. The user has never interacted with this part of the product before. The screen is empty because they have not created anything yet. This is your best opportunity to show value, set expectations, and guide action.

A great first-use empty state should do three things:

• Explain what this space is for in plain, friendly language
• Show a visual hint of what it will look like when populated
• Provide a clear, single call-to-action that gets them started

2. User-Cleared Empty States

The user had content, and now they do not — they finished their to-do list, read all their messages, or cleared their cart. This is actually a positive moment and should be treated as such. Celebrate the accomplishment. Reinforce the value they just received. This is not a failure state; it is a success state.

The tone should be different from a first-use empty state. One is an invitation; the other is a neutral (or happy) acknowledgment. Someone who deleted everything back to zero should not be treated like they have never used the product before.

3. No Results Empty States

A search returned nothing. A filter has no matches. This is where frustration tends to peak. Users feel like they hit a dead end. Your design job here is to keep them moving — suggest alternatives, offer to broaden the search, or acknowledge the issue with empathy and helpful next steps.

04What Bad Empty States Look Like

Before getting to solutions, here are the patterns that fail users:

• The ghost icon: A faded illustration of the feature with zero context or direction
• The developer placeholder: Literally the words "No items found" in default system font
• The table shell: Column headers with zero rows underneath, plus a pagination line announcing "Showing 0–0 of 0 results"
• The premature upsell: Using the empty state to push a premium plan before the user has experienced any value
• The wall of text: A paragraph explaining the feature in detail with no visual hierarchy and no clear next step
• The broken-looking screen: An empty state so bare that users genuinely cannot tell if something went wrong

05A Worked Example: The Empty Reports Dashboard

Say a B2B SaaS tool drops new users onto a dashboard right after onboarding. They have just set up their account, confirmed their email and filled out a short profile. Then they land here:

• A page title: "Your Reports"
• A table with five column headers: Date, Type, Status, Created By, Actions
• Zero rows in the table body
• A small pagination footer showing "Showing 0–0 of 0 results"
• A "+ New Report" button in the top-right corner of the page header

The button exists, technically. But it sits in the corner of a page full of empty columns and a pagination line that cheerfully announces "0 of 0 results." The message the UI sends is: nothing is here yet, and this is where nothing lives. The button doesn't register as a call to action. It registers as part of the furniture.

Why it fails

1. It explains nothing. "Your Reports" doesn't tell a new user what a report is, what it contains, or why they'd want one.
2. It emphasizes the void. Column headers with zero rows, plus a "0 of 0" count, make the emptiness feel like a state of failure rather than a state of readiness.
3. The CTA is positionally isolated. A button in the top-right corner of a page is a power-user affordance. Someone who already knows what they're doing uses that button. A confused new user's eyes are in the center of the page, looking at blank space.
4. There's no reassurance. New users have just committed to trying something new. An empty screen with no guidance reads as: "You're on your own."

Note that nothing here is a technical bug. The query correctly returns zero rows because the user hasn't created anything yet. The problem is entirely in what gets rendered when that result comes back empty.

The redesign

Replace the empty table entirely when the row count is zero, and render an empty state component with five parts:

1. A purposeful illustration. Not stock art, not a generic icon. A small custom SVG — say, a simplified document with a plus symbol — that matches the design system's stroke weight and color palette, centered with generous padding above and below. The goal is to make the page feel designed, not empty by accident.
2. A headline that reframes the situation. "Create your first report to get started." It names the action, positions this as a beginning rather than a gap, and sets an expectation: there is a next step, and it's obvious.
3. A two-sentence description. For example: "Reports let you summarize shipment activity by date range, route, or carrier. You can export them as PDF or share a live link with your team." This answers the "wait, what even is this?" question new users have but rarely ask out loud, and it doubles as a mini pitch for the feature.
4. A large, centered primary CTA. Same "+ New Report" action, but now in the center of the screen, inside the empty state, styled as a full primary button — not a ghost button, not an icon-only affordance. Solid background, high contrast, generous padding.
5. A secondary helper link. A small text link below the button — "See how reports work" — that opens a short walkthrough, for users who need more confidence before acting.

Drop the pagination footer from the zero-state render too. There's no reason to tell someone "0 of 0 results" when you're already showing them a dedicated empty state. The number just undermines the message.

The conditional rendering

On the implementation side, the logic is straightforward if the row count is already part of the existing query. Check the count before deciding what to output:

<?php if ($totalReports === 0 && $isFirstSession): ?>
  <div class="empty-state">
    <?php include 'partials/empty-report.php'; ?>
  </div>
<?php else: ?>
  <table class="report-table">
    <!-- normal table render -->
  </table>
<?php endif; ?>

Here $isFirstSession is set in the session on first login and cleared after 48 hours or after the user creates their first report, whichever comes first. That way, returning users who deleted everything back to zero see a different empty state that doesn't treat them like newcomers.

06A Framework for Designing Empty States That Actually Work

A useful mental model: an empty state is a landing page for a feature. It needs to sell the feature, guide the user into it, and make the next action feel achievable rather than arbitrary. If you've ever written a decent product landing page, you already have the instincts for this.

Lead with empathy, not function

Write copy that acknowledges where the user is. Instead of "You have no projects", try "This is where your projects will live. Let us build something great." The difference is subtle but the emotional impact is real. Users respond to feeling understood.

Name the action, not just the state

"No reports yet" is worse than "Create your first report." One describes; the other directs.

Use illustration to set expectations

A simple, lightweight illustration showing what the populated state looks like does two things: it makes the emptiness feel temporary and intentional, and it gives the user a mental model of what they are working toward. Keep illustrations minimal and consistent with your overall design language.

One action, maximum

Do not overwhelm an empty state with multiple options. Identify the single most important action you want the user to take and make that the clear, prominent call-to-action. Every additional option makes it less likely they take any action at all.

Put the CTA where attention already is

Center the CTA in the empty state, not in the page chrome. On a blank screen, the user's attention is in the middle.

Never render a table shell with zero rows

If there's no data, remove the table entirely. The header columns are meaningless without content to explain them.

Make the copy feel human

Empty state copy is often written last by someone who is tired and rushing to ship. It shows. Write it like you are talking to a real person who is slightly confused and needs a friendly nudge. Read it out loud. If it sounds robotic, rewrite it. And write the short description even if it feels redundant: power users will skip it, new users need it.

Contextual help without overwhelming

Consider adding a small secondary link to documentation, a tutorial, or a walkthrough — but keep it secondary. The primary CTA should always dominate. Think of the help link as a safety net, not the main path.

07Real-World Examples to Learn From

Some products consistently nail their empty states. Notion shows template suggestions the moment a page is empty, turning the blank canvas into an invitation. Slack uses warm, personality-filled copy in empty channels that feels like a team member talking, not a system message. Linear celebrates when your issue queue is empty with a positive message that makes users feel productive rather than lost.

These are not accidents. They are deliberate design decisions made by teams that understand the full user journey — including the quiet, empty moments in between.

08Adding Empty States to Your Design Process

The practical problem is that empty states are easy to forget during the design phase. You design with real data, real content, real activity — because that is what makes mockups look good. The empty state only reveals itself at the edges of your prototype, and it is tempting to kick it down the road.

Here is how to fix that process:

• Add empty state design as a required deliverable for every new feature screen
• Create a shared component in your design system specifically for empty state patterns
• Include empty state review in your design critiques and QA checklist
• Work with your copywriter on empty state text the same way you would for onboarding flows

This problem also compounds with other UX gaps. If your onboarding doesn't quite land (there's a separate post on onboarding and progressive disclosure), the empty state becomes the last chance to recover a confused user. That's a lot of weight to put on one screen.

09The Bigger Picture

Good UX is not just about the happy path. It is about designing for every state of the user's journey — including the quiet, uncertain, empty moments. Fixing an empty state is rarely technically hard: no new feature, no database change, no major refactor. It is a decision to treat the zero-data state as a designed experience rather than an absence of one.

The next time you open a design file, ask yourself: what does this screen look like when it is completely empty? Better still, open an incognito window, sign up fresh, and look at what your new users actually see. If the answer is "I have not designed that yet," you have just found your next priority.

10Frequently asked questions

What should an empty state always include at minimum?

At minimum, an empty state needs to explain why it's empty, what the user can do next, and a direct action to take — ideally a primary CTA button. Without all three, users often assume something is broken or that the product doesn't work yet.

Is it worth designing custom empty states for every section of an app?

Yes, especially for high-traffic screens like dashboards, activity feeds, and data tables. A generic "No data found" message works as a fallback, but section-specific empty states reduce confusion and make it more likely a user takes the right next action.

How do I know if my empty state is hurting retention?

Look at drop-off right after sign-up or after users complete a key flow. If users land on an empty dashboard and don't come back within a day or two, that's often a sign the empty state gave them no reason to return. Session recordings, in tools like Hotjar, can show whether users sit still on that screen and then leave.