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.
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.
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.
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?”
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.
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.
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.
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.
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!
.png)
