Are Empty States Holding Back Your UX? Here's How to Get Them Right

When users interact with your application, the experience shouldn't feel like they've hit a dead end. Yet, that's exactly what happens when empty states are overlooked or poorly designed. Empty states occur at pivotal moments throughout a user's journey, from their first interaction as a novice to their continued use as a seasoned expert. They appear when there's no data to display—like an untouched dashboard, an unpopulated list, or an empty search result.

In web applications and enterprise software, empty states are ubiquitous. They're present in entire views, such as a new user's homepage, and in individual components, like unfilled forms or filters returning no results. Essentially, any place where data is expected but absent becomes an empty state.

At their most basic, empty states reassure users that nothing is broken. As the design improves, they inform users and guide them toward meaningful actions. At their best, empty states delight users, turning what could be a moment of confusion into an engaging part of the experience.

The Building Blocks of Effective Empty States

A well-crafted empty state typically comprises three key elements:

1. Informative Text: Clear messaging that explains what should or could be in the space.
2. Engaging Visuals: Graphics, icons or illustrations that draw attention and reinforce the message.
3. Call to Action: A prompt that encourages users to take steps to fill the empty space or learn more.

Designing Empty States: Key Considerations

When enhancing the user experience with thoughtful empty states, consider the following:

1. Identify All Potential Empty States

• Map out all screens, flows, and components where empty states can occur.
• Ensure consistency across the application by using a standard pattern for empty states.

2. Understand the Context

• Differentiate between empty states that require user action and those that represent a completed task (like an empty inbox).
• Tailor the empty state design to suit its specific context and purpose.

3. Decide on the Necessity of Empty States

• During onboarding, consider whether to show empty states or to preload content that guides new users.
• Sometimes, it's beneficial to avoid empty states altogether by leading users through a setup process.

4. Utilize the Space for Learning

• Use empty states as educational moments to set expectations or provide tips.
• Include helpful content that prepares users for what's next once data is present.

5. Incorporate Brand Elements

• Leverage this opportunity to infuse your brand's personality through visuals and tone.
• Engaging graphics can make the empty state more memorable and enjoyable.

6. Keep Accessibility in Mind

• Design empty states that are accessible to all users.
• Use semantic HTML elements and provide text alternatives for images.
• Ensure interactive elements are operable via keyboard and screen readers.

Types of Empty States

Empty states aren't one-size-fits-all; they serve different functions depending on the user's situation.

Information-Focused Empty States

• Aim: Inform users why the space is empty.
• Purpose: Prevent users from thinking the application is malfunctioning.
• Features: Can include onboarding content or helpful explanations.

Action-Focused Empty States

• Aim: Encourage users to take specific actions to populate the space.
• Features: Provide clear calls to action, such as "Add New Item" or "Import Data."

Celebration-Focused Empty States

• Aim: Signify a positive achievement (e.g., completing all tasks).
• Features: Serve as success feedback, often with celebratory visuals or messages.

Empty State Patterns to Implement

The Basic Empty State

Description: Combines informative text, an engaging visual, and a clear call to action. Provides users with context and next steps.

Example: A project management tool displays an illustration of a person at a desk with the message "You have no current projects" and a button that says "Create New Project."

Code Example:

<section class="empty-state">
  <img src="images/no-projects.svg" alt="Person at a desk with no projects" />
  <h2>You have no current projects</h2>
  <p>Start a new project to collaborate with your team.</p>
  <button type="button" onclick="createNewProject()">Create New Project</button>
</section>

Starter Content Pattern

Description: Preloads content to help users understand how to interact with the application. Reduces the intimidation of starting from scratch.

Example: A design app opens with a sample project that users can explore and edit.

Code Example:

<section class="starter-content">
  <h2>Welcome to DesignApp</h2>
  <p>We've loaded a sample project to help you get started.</p>
  <a href="/projects/sample" class="button">Explore Sample Project</a>
</section>

No Search Results Pattern

Description: Occurs when a user's search yields no matches. Offers suggestions or alternative actions to prevent dead ends.

Example: An e-commerce site displays "No products found" with links to popular categories or a prompt to adjust filters.

Code Example:

<section class="no-results">
  <h2>No products found</h2>
  <p>We couldn't find any products matching your search.</p>
  <p>Try adjusting your filters or explore popular categories:</p>
  <ul>
    <li><a href="/categories/electronics">Electronics</a></li>
    <li><a href="/categories/books">Books</a></li>
    <li><a href="/categories/clothing">Clothing</a></li>
  </ul>
</section>

Clear All Pattern

Description: Appears after a user clears data or resets filters, confirming the action and guiding users on what to do next.

Example: After clearing all notifications, a message reads "You're all caught up!" with an option to explore settings.

Code Example:

<section class="clear-all">
  <img src="images/all-caught-up.svg" alt="Checkmark indicating completion" />
  <h2>You're all caught up!</h2>
  <p>No new notifications at this time.</p>
  <a href="/settings/notifications">Manage Notification Settings</a>
</section>

Inbox Zero Pattern

Description: Celebrates the completion of tasks or the absence of pending items. Reinforces positive user behavior with encouraging messages or visuals.

Example: An email app shows a serene landscape with the message "No new messages—enjoy your day!"

Code Example:

<section class="inbox-zero">
  <img src="images/inbox-zero.svg" alt="Serene landscape illustration" />
  <h2>No new messages—enjoy your day!</h2>
</section>

Final Thoughts

Neglecting empty states can leave users feeling lost or frustrated. By thoughtfully designing these moments and maintaining consistency in your code, you transform potential points of confusion into opportunities for engagement and satisfaction. Remember, an empty state isn't just a blank space—it's a canvas to communicate, guide, and even delight your users.

Think of empty states as the silent supporters of your application's user experience. They can either be awkward pauses or meaningful conversations. By designing them with intention, using consistent code practices, and considering accessibility, you ensure that users are never left staring at a void but are instead guided, informed, and even delighted at every turn.

Back To Top