How to Design Helpful Empty States

This type of empty state is informational. It simply notifies users that there is currently no content to display. However, it's important to remember that even in this scenario, you can provide a hint or suggestion on what users can do next to continue their journey. For example, if it's an empty inbox, you might say, "Your inbox is empty. Start by composing a new message." Even without a CTA button, the text itself can guide users.

This type of empty state is more proactive. It not only informs users that there's no content but also encourages them to take a specific action. The CTA button in this case should align with the message in the text. For instance, if it's an empty shopping cart, the message might be, "Your cart is empty. Start shopping now!" with a prominent "Shop Now" button.

If you want to offer users additional options, like reading documentation, you can include a link in the copy. For example, in an empty settings page, you could say, "There are no settings configured yet. Click here to read the documentation on how to get started."

When designing empty state pages, it's crucial to communicate the reason behind the emptiness clearly. Rather than using generic phrases like "No tasks found," opt for something more descriptive and motivational. For instance, "You're all caught up! Add a new task to stay productive."

This not only informs users that they have no pending tasks but also guides them on what to do next. The goal is to blend clarity with encouragement, guiding users through an intuitive and positive interaction with your app or website.^[1]

When designing empty states, incorporate relevant illustrations to enhance user experience. For instance, in a weather app, if there are no search results, a simple sun behind clouds can communicate the absence of data effectively. This visual cue aligns with the app's purpose, providing instant clarity to users.

Relevant illustrations not only fill empty spaces but also convey information intuitively, making the interface more engaging and user-friendly. Remember to make sure your illustrations are consistent with your brand personality.^[2]

CTAs on empty state pages are essential in guiding user interactions. They transform potential user confusion into clear action steps. When crafting CTA labels, focus on clarity and conciseness. Use specific, action-oriented language that directly tells users what to do next, like "Add Your First Task" or "Explore Features."

It's also effective to add a touch of personality or encouragement. Phrases like "Let's Get Started" or "Create Your First Entry" can make CTAs more engaging and inviting. This approach balances informativeness with a friendly tone, enhancing user engagement.

Remember, CTAs on empty state pages are more than placeholders — they're vital tools for improving user experience. A well-crafted CTA not only fills the space but also directs users toward meaningful and productive interactions with your product.

In designing empty dashboards for new users, it's crucial to avoid information overload. The goal is to guide users without overwhelming them. Here are some go-to tips:

• Use clear microcopy: Opt for a concise, clear microcopy that directly assists users. This approach is often more effective than overloading the page with text.
• Incorporate minimalistic visuals: Employ subtle visual elements or minimal graphics. These should guide users subtly, complementing the microcopy rather than overwhelming it.
• Focus on user goals: Every element on the empty page should aim to nudge users towards their primary objectives in a user-friendly manner.

When presenting CTAs on an empty state page, it's crucial to differentiate between actions of varying importance to prevent user confusion.

Imagine you're working on a website-building platform. When users encounter an empty state, presenting them with two clear options can streamline their experience. The primary action, CTA 1: "Use a Template," stands out as the recommended, straightforward choice for quick website creation. On the other hand, the secondary action, CTA 2: "Create Custom Project," is presented as an alternative for those seeking a more tailored experience.

This method of prioritizing and distinguishing between primary and secondary actions helps users make more informed, stress-free decisions in their website-building journey.

A No Results page isn't exactly an empty page, as it often signifies an error or a lack of matches, but the approach to handling it is similar. When users land on such a page, it's important not to let them feel discouraged or at fault. Clearly explain what happened and suggest next steps.

Here’s how to optimize a No Results page:

• Encourage users to check their spelling.
• Offer helpful search tips.
• Suggest popular categories or items.
• List recent search requests for easy revisiting.

Ultimately, the No Results page should guide users towards alternative paths, ensuring they don't feel lost or inclined to leave.

Encountering a 404 error page, which indicates a non-existent page, is a common experience for users. To transform this potential frustration into a positive interaction:

• Add an engaging illustration to grab attention and soften the impact of the error.
• Use simple, jargon-free language to explain that the page cannot be found.
• Be concise yet informative, guiding users on what happened and what they can do next.
• Include easy navigation options, such as links to popular content or the homepage, encouraging users to continue their journey on your site.
• If it suits your brand, a touch of humor can make the experience more pleasant.

These strategies help in maintaining user engagement even in the face of errors, enhancing the overall experience on your website.