Patterns of User Onboarding and the Empty State

DZone 's Guide to

Patterns of User Onboarding and the Empty State

This is the first post of a series examining interaction patterns. Beginning at the beginning, I'm looking at why one onboarding process, Tumblr's, works as well as it does.

· Web Dev Zone ·
Free Resource

As the New York Times reported earlier this year, attention span has fallen from 12 seconds in the year 2000 to 8.5 seconds today, representing a low beneath that of a goldfish.

Rick Pastoor writes in A List Apart, user onboarding is "a risky business." It’s the moment that your value proposition and design come together to engage a user for the first time.

Given that so much rides on the first few seconds of an interaction, what are the crucial elements to include, which are the ones to leave out, and what should inform your interpretation of the former and latter?

Minimalism First: Lean Onboarding

In 1956, psychologist and cognitive researcher George A. Miller first asserted that working memory capacity amounts to “7 ± 2” chunks. Further research has problematized and refined this number along predictable lines—what kinds of chunks, encoded how, with which kinds of prior experience and reinforcement, in which situations?—but it’s generally accepted that presenting users with a greater number of choices inhibits task completion.

Successful Patterns and Informative Empty States

I’ve chosen the app Tumblr because it’s well-known and possesses an onboarding process that is among the most streamlined in the industry today.

Bare Necessities

Image titleTumblr begins onboarding with the fewest possible elements, right? 

Two concrete, easy-to-understand sentences invite the user to complete the form.

Email, Password, and Username Fields

Beyond the self-evident nature of these fields, there's nothing else on the page—and, most importantly, nothing that would cause the reader to confuse the call to action with anything else. 

Each of these fields, however, handles its own task with some subtlety:

  • Simple feedback appears beneath the field, but doesn't rise to obscure it or cause the reader alarm with icons or alerts. Image title

  • Recognition rather than recall aids the user during password input; rather than listing a series of requirements, Tumblr's onboarding provides feedback in the field, with an easily-understood strength meter. 
    An empty state of TumblrThis changes the posture of one of the more onerous burdens of onboarding, password generation, from generation to validation. 

  • User assistance that fits tone and style makes username generation, increasingly difficult and kind of funny. This is good not only for alignment with a greater content strategy, but is also suggestive of the kinds of content that Tumblr wants its users to traffic in.
    Image title

The Empty State

Even after onboarding is complete, one of the greatest challenges remains: the initial, or empty space.

This problem has plagued everyone from designers to writers: it's variously known as the problem of the blank document, the tyranny of the empty room, a zero-data state, or simply empty state. 

A zero-data world is a cold place. When first-time users look at your app and all it does is show a blank slate without any guidance then you’re probably missing out on an opportunity.


In each case, Tumblr takes the opportunity to fill the empty space. The choice of what to include, or exclude, from the initial state is a difficult one: should you choose a "Welcome Screen", a tour or wizard, or simply populate the empty state with sample data?

Two of Tumblr's empty states, below, are evidence of lessons learned from years of building interfaces. And, while they may appear simple, there's more going on than just an absence of user content.

Google's design guidelines make it clear why this works: both images suggest actions while not appearing as part of the foreground. 

That is, it's clear what may appear in the space by the muted presentation of the empty state. The purpose of the screen is conveyed without causing the user to believe that a) data already exists or b) that the background is, itself, a conduit to populating the screen, rather than a sign post.

An empty state on Tumblr

Address book empty state

Closing Questions

  • What information is absolutely essential to move through onboarding?
  • What sorts of affordances can be streamlined?
  • Which kind of content does the user need to find easily?
Tumblr Screenshot Credits: emptystat.es, a collection of user-submitted screen grabs of well-designed empty states.

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}