Post Image

UX Best Practices: Designing the Overlooked Empty States

Zack Rutherford
By Zack Rutherford on 13th April, 2016 Updated on 1st February, 2017

A blank canvas is both exciting and intimidating. As the famous renaissance artist Michelangelo once said:

“Every block of stone has a statue inside it and it is the task of the sculptor to discover it.”

In other words, within an “empty state,” there is infinite potential. All that stands in the way is the task of design.

Empty States and Inattentive Design

Empty states represent a pivotal point in the user journey. Each is an opportunity to build rapport, drive engagement, educate, entertain, or delight the user.

There are three primary empty states that we encounter in UX:

  1. First use. The user begins to interact with the application/site.
  2. User cleared. The user has just completed a task or cleared all content associated with the app or site.
  3. Error state. The user has encountered a roadblock during the interaction.

Despite the fact that empty states can engage users, they’re often overlooked or given short shrift during design and development. Designers can become more focused on the interactive aspects of their work, and not think incorporating them, while developers may occasionally build empty states by default.

You Only Get One Chance to Make a First Impression

Every app has to start its users somewhere—and that means taking a blank canvas and painting something useful on it.

image04 image07

Image credit: Emptystat.es

Examine the install screen of Facebook Messenger. There’s a lot going on within this relatively small space:

  • It lets you know that you can take pictures or record video in-app
  • It exerts a little social pressure by telling you how many of your Facebook friends are using the app
  • It gives you the opportunity to look up additional information about the app before installing
  • It even has an adorable little graphic to boost engagement

The user may have just arrived at this screen expecting to touch install and be done with it. However, once they arrived, they were met with encouragement and education.

While the screen may have started empty, it became a vehicle for increasing adoption.

Mission Accomplished!

There may come a point within the use of a design where there’s no task or content available to the user. This is the “user cleared” empty state. It’s a fantastic opportunity to prompt users toward new interactions or congratulate them on a job well done.

Within a design, one of the most important components is feedback. Feedback acts as both a placeholder and a reward. It aids in the forming of habits and builds appreciation for the completion of a user task. These “user cleared” empty states are therefore very important.

After a user has finished a task, it’s essential to do three things:

  • Step 1: Inform them that their tasks are complete/that they’ve run out of data
  • Step 2: Reward them for accomplishing their task
  • Step 3: Offer them a next step.

image03

Image Credit: Emptystat.es

In our example above (taken from the WritekUpp app for iOS), clearing your task list is certainly a positive achievement, so it’s no surprise that the screen offers a congratulatory “Well done.” This is a much needed bit of positive reinforcement.

In contrast, the following example from the mobile Gmail app only notifies users that tasks are complete or that they’ve run out of data, skipping the other two steps.

image00

Image credit: usertesting.com

I don’t know about you, but if my inbox ever reached zero, I’d be in a celebratory mood. This truly empty state misses out on a chance to capitalize on the delight of the user, and offers no next steps to keep them engaged. Rather than feeling elated and productive, looking at this screen makes you feel bored and perhaps a little lonely that no one has anything to say to you.

image06

Messages should celebrate achievements.

In the above mid-fidelity UXPin prototype, I created a congratulatory message with a twist. Not only does it compliment people on reaching inbox zero, but it also gives them the chance to Tweet about their accomplishment.

Best of all, it’s unexpected.

Mistakes Were Made…

Just as a congratulatory response is significant in the user cleared empty state, reassurance can be absolutely vital when dealing with an erroneous empty state.

Errors are inevitable and can happen on both ends (the user and the app/site). What’s important is letting the user know what went wrong, and why.

image01

Image Credit: Emptystat.es

This example, taken from the App Store, illustrates the concept. Users arrived at an empty page when they were expecting a fun new app. Unfortunately, the user ran into a roadblock when said app wasn’t available in their area, and was then immediately informed of the reason.

This is a minimalist example, and none too delightful. The user isn’t given any consolation prize, nor are they offered a next step. They are, in all likelihood, left frustrated by the missing app—despite being armed with the knowledge of why it’s missing.

Injecting a bit of personality in this empty state could make all the difference. Take a look at this example from Piccsy.

image05

Image Credit: Piccsy

A little humor can go a long way in helping the user feel better about their misstep. This page reassures and consoles. It lets the user know they’re a bit off track; offers a look at some attractive illustration; and offers a way back to the site. Basically, everything a user might require if they’ve committed an error.

404 pages are another example of turning an error into a positive user experience.

These pages are usually dismal, boring, and inconsequential to the overall appeal of a design. However, some sites/apps take the time to include engaging content within their 404 pages.

IMDb has a particularly clever method of dealing with 404 pages in which they display cleverly altered movie quotes to their users:

image02

Image credit: IMDb.com

The lesson here is nothing in your design has to be boring or completely blank. Even errors are opportunities to score extra points with your users.

Conclusion

You empty state should never feel empty.

Whether a user stumbles across the blank state due to first-use, accomplishment, or error, your product needs to guide them along to the next logical step. Think of an empty state as a slight pause rather than a full stop.

Orient the user, offer some tips to get them back in the flow, then get out of the way.

For more practical UX advice, check out the free e-book Interaction Design Best Practices: Mastering the Tangibles.

Still hungry for the design?

UXPin is a product design platform used by the best designers on the planet. Let your team easily design, collaborate, and present from low-fidelity wireframes to fully-interactive prototypes.

Start your free trial

These e-Books might interest you