You know that feeling when you're interacting with a product or website, and all of a sudden you click on a link that takes you to an empty screen that leaves you doing this:

That screen that left you befuddled is a (poor) example of an empty state!

What Is an Empty State?

By definition, an empty state is a moment in a user's experience when interacting with a product where there is "nothing" to display. In other words, they are interface screens that have little to no content on them.

The thing about empty states, however, is that while they may seem bland, they can be defining moments in a user's experience. If you play your cards right with some quality design, these empty states can be the tipping point between a good user experience and a not-so-good one.

But before we discuss how to make the most out of these sneakily important screens, let's dive into some examples of different empty states.

Examples of Empty States

There are a variety of empty states that you've probably run into while browsing the internet or your favorite app. Here are some of the most common examples that you've likely encountered:

• Search results on a web page that can't find what you're looking for
• Empty checkout carts
• Empty folders on file storing apps
• 404 errors
• No new messages on a messaging app
• Empty email inboxes

There are still more examples that fall under the empty state's umbrella, but the main thing here is that these empty states are often left like their name suggests: empty. These sneakily important screens can be easily looked over by designers of all levels, so don't feel bad if you've been neglecting your own empty states.

Improving Your Empty States

Now that you know what empty states are, and that there are design solutions to making the most out of these screens, let's take a look at some of the ways you can liven them up and improve your entire user experience!

Empathize with your users

One big problem with poorly designed empty states is that they can leave users feeling lost (just like John Travolta in that gif). This is pretty dang frustrating, and certainly not the ideal experience you want for your users.

More than just annoying, this type of frustration can have pretty huge implications. When 88% of users won't return to a website due to one small bad experience, something as seemingly small as empty states become a whole lot more important.

So how do we fix this problem we keep mentioning? One simple and soothing solution to user frustration is filling these empty state screens with some delightful visuals using customizable illustrations.

Adding doodles to create a narrative and improve the design is key for connecting with users. Let's take this example of an empty state from TransferWise:

Since there have been no transactions made, this screen could totally be empty without any content whatsoever. However, the designer decided to add a bit of visual stimulation to not only create something that's pleasant to look at, but also helps explain to users what is happening on this page.

Again, this may seem slight, but think about this as a pivotal opportunity to make a great impression with a user, and keep them happily engaged with your product or website.

Guide Your Users to CTAs

It's worth repeating that a confused or lost user is probably an unhappy one, so it's a designer's job to give them something that'll add a bit of delight and direction to their experience.

Since people are making split-second decisions when navigating a website, when confronted with unclear situations, it's easier to leave the page than to take longer to search the empty state screen for a CTA.

A well-designed and smartly thought out empty state screen should motivate users to continue using the product by drawing their attention to clearly visible CTAs.

Check out this example below:

The illustrations on this empty state aren't just delighting the user visually, but also giving them directions on how they can enjoy the product even more. It seems basic, but visual queues can have a major impact on creating positive interactions.

Set a tone to your message

In addition to being visual guides for users, empty states are an opportunity for branding and conveying a company message.

To look at this another way, an empty state screen that has no actionable directions and no story to tell is just straight-up boring. Adding visuals to this otherwise empty canvas tells a micro-story about your brand and is a prime opportunity to reveal the personality of your product.

Think of it as the ideal moment to pump a little empathy into your design! The last thing you ever want your user to feel is frustrating, so remind them that you got their back at all points throughout their user journey.

Start Designing Your Empty States

If you want to let your users know that you are always thinking about them and have them at the top-of-mind, it's time to start putting some work into all aspects of your design. While empty states are often forgotten, you'll find that paying attention to these screens will end up having a tremendous impact on your entire product.

Have some questions about empty states? Or perhaps you've designed an awesome empty state you're proud of? Tweet us! We'd love to hear from you!