Empty States Design for Website Pages
We design empty states for websites and web applications: from analyzing all possible contexts to ready-made components with illustrations and microtext. A well-crafted empty state doesn't leave the user in the dark — it explains why it's empty and suggests what to do next. Our experience shows: well-designed empty states reduce support tickets by 30% — data from a recent B2B dashboard project for reports. In this article, we'll break down types, structure, illustrations, and the design process.
An empty state is not a broken place, but a stage of the user journey. Wrong design equals lost conversion. Good design guides, retains, and informs. We distinguish four main types.
First-run — for new users with zero data, requires onboarding text. User-generated — when the user cleared a section, short call to action. Search/filter — query with no results, suggest changing filters. Error — loading failure, retry button.
Proper empty state design directly impacts metrics: time to first action, bounce rate, number of tickets. Companies investing in this element get up to 40% reduction in support load and increased user satisfaction.
Types of Empty States
Not all empty states are the same. Four main contexts:
First-run empty state — user just registered, no data yet. Task: explain the section's value and give the first step. For example, "My Projects" section — illustration + "Create your first project" + button.
User-generated empty state — user deleted everything or cleared the list. Tone is shorter, no explanation, just a call to action.
Search/filter empty state — query with no results. Confirm the query, suggest changing filters.
Error empty state — data didn't load. Needs a retry button and, if possible, an explanation of the cause.
How to Differentiate First-run from Error Empty State?
First-run is welcoming, error is apologetic. First-run contains onboarding text and a start button. Error shows a failure icon and "Retry". In the first case, the user didn't expect data; in the second, they did. These states should not conflict visually, but their functions are fundamentally different.
Empty State Component Structure
Typical block — vertically centered in the container:
- Icon or illustration (48–120px)
- Heading: 4–8 words, specific to the situation
- Description: 1–2 sentences, what to do
- CTA: button or link to a specific action
For tables and lists, the empty state occupies the space where rows would be — not full-screen.
Why Do Illustrations Reduce Anxiety?
Illustrations create context and soften the feeling of emptiness. For first-run, a large illustration works better than an icon: it shows how the section will look after filling. For error, an icon is enough — it doesn't distract from the message. If the design system already has illustrations, we use them; if not, we develop a minimal set: "no data", "no results", "no access", "loading error", "task completed". All illustrations are neutral, vector, in the common style.
Case Study
For a B2B dashboard with a "Reports" section, we designed three empty state variants:
- First visit: chart illustration + "Your reports will be here" + "Create report" button
- After filtering with no results: filter icon + "No reports for the selected period" + "Change filters"
- Loading error: exclamation icon + "Failed to load data" + "Retry" button
This differentiation reduced questions like "why is the section empty" by 30% compared to a single "No data" state.
Comparison: Empty Screen with CTA vs. Without CTA
| Parameter | With CTA | Without CTA |
|---|---|---|
| Time to action | < 2 sec | > 10 sec |
| Percentage of users leaving page | 15% | 45% |
| Support tickets | 5% | 20% |
Our clients note: well-designed empty states guide users to the target action twice as fast.
What's Included
- Audit of all empty states in the project
- Creation of prototypes and scenario variants
- Illustration development (up to 6) or adaptation of existing ones
- Component code in chosen framework (React, Vue, Angular)
- Usage guide for the design system
- Documentation and team training
Process
- Analytics — inventory of all screens where empty states can occur.
- Design — scenarios for each type, texts, CTAs.
- Design — illustrations, adaptation to styles.
- Implementation — component with configuration.
- Testing — usability tests on real users.
- Deployment — implementation with backward compatibility guarantee.
Timeline
Design of a set of empty states (6–10 states for one product) — from 2 to 4 days. Cost is calculated individually based on illustration complexity and number of states. To get an accurate estimate, contact us — we will analyze your project and offer an optimal solution.
Our team's experience — 10+ years in web development and 50+ projects with custom interfaces. We guarantee quality: all components undergo code review and testing.
Contact us to discuss your task.