How to Create Empty States That Are Full of Value

Take advantage of the most overlooked real estate in UX to move users through your funnel.

Jonathan Anderson
-
minutes reading time

How to Create Empty States That Are Full of Value

Take advantage of the most overlooked real estate in UX to move users through your funnel.

Try this template
Jonathan Anderson
-
minutes reading time

Success Data

Maybe we’re dating ourselves here, but we remember our first Myspace friend like it was yesterday. It was Tom, of course… because everyone’s first Myspace friend was Tom. Instead of showing new users an empty rectangle where their friends should be (because, god, that’s depressing!), Myspace helpfully populated the field with Tom. Even back in the early aughts, the social network knew the value of filling an empty state.

What is an empty state?

An empty state is simply a moment in your user experience when there is nothing to display. Imagine a dashboard with no data, a search with no results, an inbox with no emails, or — in Myspace’s case — a friend list with no friends. 

Empty states are some of the most overlooked real estate in UX design, yet they’re rife with opportunity for acquiring, onboarding, and converting users. The trick is recognizing that an empty state should never feel empty. 

Instead, SaaS products can take advantage of their empty states to perform a few key functions:

  • Showcase a product’s personality 
  • Delight users
  • Communicate product benefits
  • Advance the user journey

Let’s look at five common types of empty states and how to make the most of them.

1. First use

What a user sees when they first log in makes up their first impression of your product, and an empty dashboard staring back at them isn’t a great one. This is your chance to show off your product’s value and to prompt users to action, and there are three good ways to do it.

With a CTA

A clear call to action is perhaps the simplest way to help new users get started. Webflow’s clever design focuses first-time users on the CTA so they know exactly what to do to begin filling that empty dashboard, deriving value from Webflow from the start.

[via Empty States]

With a product tour

While most SaaS products have the CTA down, far fewer offer guided product tours at first use. Step-by-step tours are a powerful tool for getting users acquainted with your product so they’re less likely to churn. They work particularly well for more complex products. Vynod’s tour, for example, guides new users through creating their first video, ensuring that they understand the product well enough to stick with it.


[via Appcues]

With starter content

Providing starter content for your users to play around with goes one step further, giving them a feel for exactly how they’ll be interacting with your product. This starter content could be a sample data set, preloaded media, or pre-selected contacts. 

Trello, for instance, fills what would be an empty dashboard with cards that users can move around to experience the task management system for themselves. Once they have a feel for the product, they can then delete this sample Trello board and create their own.

[via Inner Trends]

2. User cleared

Once users are deep into your product, another empty state presents itself: Perhaps they’ve completed a list of tasks or cleared their inbox of emails. Either way, there’s nothing to show.

Completing an important task is cause for celebration, so any user-cleared action is an opportunity to give users a pat on the back and create an emotional connection with them. WriteUpp does this with a simple congratulatory message and a call to action that urges users to continue on with the app. This empty state not only makes users feel good; it answers the question, “What next?”

[via Smashing Magazine]

3. Errors

With any Saas product, somewhere along the way, something is bound to go wrong. It could be a server outage or something as innocuous as a page that’s been removed. Either way, your error messages are another empty state that should be chock-full of personality and helpful resources.

Want an example of what not to do? Here’s a totally unhelpful (and unfriendly) error message from Windows 10. Don’t be like Windows 10.

[via Microsoft Community]

At least Worrydream’s 404 error message is clever. In fact, it’s positively delightful, but it’s still missing resources that could help users find what they’re looking for.

[via Hover Blog]

Here we go! Dropbox for the win! A cheery illustration plus helpful options for what to do next takes full advantage of the empty state. They even use it as an opportunity to sign up new users and upgrade old ones.

4. No results

Much like an error message, a search that yields no results presents you with an opportunity to help users find what they need. Plenty of products squander that opportunity with a simple “Go Back” button. 

This sample UX, however, shows how products can display a “best match” instead of a blank page when a query yields no results. This helps users find some value even if they can’t find exactly what they’re looking for.

[vis Material Design]

Meanwhile, Ebay lets users save searches and sign up for email notifications that will alert them when a product with no search results becomes available. This approach not only provides value to users; it provides a fail-proof reason for non-registered users to create an account.


[via Material Design]

5. Access denied

Finally, the freemium model that’s so common to many SaaS products lends itself to one more type of empty state — the access denied page. This empty state occurs when a user tries to access content that’s gated off for higher-level subscribers. 

Instead of simply sending users back to where they came from, this is the perfect moment for an upsell. Let basic users know what they could access with a pro account; then link to your pricing page with a clear CTA to upgrade.

Spotify couldn’t be smoother in handling this type of upsell. Notice the early warning that appears when a user is nearing their limit of six song skips. Add to that the positive language of having “discovered” something, and the prompt to pay stings a little bit less.

Making the most of empty states

With the right design and messaging, empty states can bring value to your users while moving them along your funnel. Candu can help with templates that let anyone leverage empty states without code so your developers can focus on the rest of the product. 

Want to learn more? Schedule a demo or try it for free

MAKE IT YOUR OWN

Select the template used on this article and customize it based on your users needs.

Try this template

Want to get all of Candu’s news first?

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Related Posts

Get inspired

See what other companies have made with Candu.

How Candu Built Its Customer Dashboard
Learn More
Using Candu Builder to Get Featured Content Noticed
Learn More

Go your own way

Pick a template, or build from scratch. We’ve got you covered!

Get Started for Free
Or Schedule a Demo