<  Onboarding UX Patterns

Empty States

"Empty states" or "blank states" are in-app containers (spaces on pages, templates, or dashboards) that would usually be overflowing with content and activity... but aren't, because it's the user's very first time in the app.

Empty states are a major onboarding opportunity. They're blank canvases that you can use to educate, nudge, or show off a little personality.

Three ways to fill up an empty state

It's inevitable that new users will encounter empty states in their first run with your product, they're literally a part of your app! That's why they're worth paying attention to.

But it's also why they're tricky -- if the user hits an empty state expecting information or direction, an empty state that's actually empty is a dead end. If empty states aren't adding to your onboarding, they're taking away.

So how do you fill an empty state until the information that it was built to contain exists?

There are three (widely covered) ways. Fill them up with:

  1. Educative material

    Or "starter content" -- instructions on how to use the product, what the space might look like to a power user (this can be tremendously motivational), or what the benefits of a key feature or two are.

    Like Invision's starter screens:

    Screenshot showing Invision's panacea of premade templates

  2. A call to action

    It's an established practice to nudge users towards the parts of the app where they can generate some of the information the empty state needs to contain. Like a ‘click this button to start adding new photos to your photo timeline' for example.

    Pocket is a great example:

    Screenshot showing Pocket's panacea of premade templates

  3. Brand building personality

    To boost the budding relationship you're building with the user and make them feel at home in a new space. Cat memes or brand illustrations -- as long as it creates a little delight, right?

You don't need to look too far for empty state fillers, in other words.

The more interesting question is how to evaluate your options and choose one. If the user is hunting for a next step and your blank state just shows a cute cat illustration, it's endearing, but a dead end all the same.

The real question we should be asking ourselves is…

How do you design an empty state that's useful?

Designing a useful empty state is done in the same way that you design everything else to be useful in user onboarding: thinking in terms of situations and flows.

Effective onboarding is about organizing user actions so they lead to value. How does the empty state you're designing -- in a space that the user literally signed up to operate -- fit in?

Well-designed onboarding flows suffer by underusing empty states in critical parts of the product. And well-designed empty states suffer by showing up at the wrong moments in an onboarding flow.

If empty states are the product, why not think of them as legitimate opportunities to guide users to value instead of blank spaces you "have to" fill with a CTA or a cat meme?

Take Vimeo's "upload a video" blank state from a few years ago, for example.

Screenshot of Vimeo's 'upload a video' empty state

It ticks all the "how to fill it up" boxes -- well designed, helpful copy, and a clear call to action.

But where was this critical, reason-why-people-signed-up CTA placed, flow-wise? Off to a corner.

Vimeo ended its onboarding by leaving users in a dashboard/feed that was filled with so much information that it was difficult to even find the "upload a video" button:

Vimeo screenshot featuring complications

How many more videos might have been uploaded if they ended on their "upload a video" empty state instead?

Screenshot of Vimeo's 'upload a video' empty state again

Remember, the timing of when an empty state shows up is entirely in your control.

If the "when" is in your control, then the "what's next" is as well. And the "what's next" gives you all the information you need to design empty states that make users successful.

You end up solving two problems at once: you know exactly what to fill up an empty state with to make users successful. And empty states in critical parts of the product are now critical parts of onboarding instead of app-UI equivalents of a 404 page -- a nicety to play around with "if you have time" later on.

Another example: Basecamp could have taken new users through the details of managing a project before it introduced them to the dashboard (because there are no projects as yet, duh!).

But the dashboard is critical to success with Basecamp -- it's the first thing you see when you log in. What's wonderful is it's also the first thing you see when you're getting started.

The empty state is effortlessly a part of the onboarding experience. And I imagine the accompanying copy was easy to write because Basecamp knew exactly what it needed to say:

Screenshot of Basecamp naming their template correctly ('Explore Basecamp!')

How to nail empty states

If you're treating empty states as more an afterthought, you're well on your way to nailing them already. But let's talk about a few design pointers:

  • Tamara Olson, who has designed a boatload of empty states over the course of her career, has a great rule of thumb to keep in mind: two parts instruction, one part delight.
  • A little personality is great, but not at the cost of clarity. This is a good guideline for any copy that makes it into your empty state.
  • Remember what the flow calls for. You don't have to be funny and educative and pop a CTA in there. What does your onboarding flow call for?

Further Reading

For your consideration

  • Basecamp pre-loads its project dashboard with one they'd like all new users to focus on: exploring what Basecamp can do for them.
  • Dropbox drives home their value prop by pre-loading your account with a PDF you can access from any device. It also happens to be a handy 'getting started' guide.
  • Duolingo held off on showing their dashboard until after you've finished a lesson (and therefore know exactly where to go next).
  • Evernote has their very first note act as an introduction to how Notes work
  • Gmail kicks your inbox into gear with email, another great example of using the product to demonstrate what value looks like.
  • IFTTT debunks the idea that empty states have to be complex or visual. Sometimes all you need is a helpful line or two to get you to the next step.
  • InVision tells you what kind of projects are possible with the app and then pre-loads those projects for you, almost like they're priming new users for templates rather than permissions.
  • Pocket has simple and efficient microcopy, and tells new users how to get started by easing any anxieties they might have about the process all at once.
  • Skype doesn't leave its People page empty just because the primary action seems 'obvious', and the results make for a pleasant user experience.
  • Trello showcases the app's capabilities in consummate detail (they demonstrate everything from team members to activity history)... using a trello board.