Onboarding: A Sidebar in “Designing Social Interfaces”

Last May I was given the great privilege to write a sidebar in Christian Crumlish and Erin Malone‘s fabulous new book, Designing Social Interfaces. The topic I was asked to write about is “onboarding” — designing welcoming experiences for new users by easing them in. You might have seen a couple blog posts that I’ve previously written about how Plurk and Yahoo! Shine handled the onboarding process.

The authors have given me the permission to republish the sidebar here in full. I hope you enjoy it and find it valuable. I would love to hear your thoughts in the comments.

When you’re done reading, do yourself a favor and buy a copy of Designing Social Interfaces. It’s a must-have for anyone involved in designing and developing social products and services.

Erin and Christian, thank you so much for allowing me to be a small part of your tremendous project. I’m certain the book will be a bestseller, and the patterns will likely spawn a whole line of useful products for practitioners. Best of luck to you both!

Onboarding

What is onboarding, and why is it important?

Most companies think that getting people to sign up is the ultimate challenge, but what about getting them oriented to your site and actually using it? That process of helping people get started is called onboarding, and it’s crucial that you give it the attention it deserves.

When left to their own devices in a new space without any sense of direction or purpose, many users can feel lost, overwhelmed, and confused about what they’re supposed to be doing there. The user might have arrived at your site from a link in an article, an organic search result, or on the recommendation of a friend. In essence, the user is taking a leap of faith that she will be able to achieve something on your site, and it’s your responsibility to shake her hand and show her the ropes when she gets there.

They say you don’t get a second chance to make a first impression, and on the Web it’s truer than ever. If you don’t capture the attention of new visitors from the moment they arrive and guide them on their initial journey through the site, they won’t learn that the benefit you provide outweighs the cost—their time and effort to participate—and as a result, won’t stick around very long. Worse, they’ll tell their friends not to bother visiting, either.

Onboarding is the process by which you can help users overcome the cold-start problem—a blank profile, an unfamiliar interface, a general feeling of “what the heck do I do next?” Many websites force users to start from square one and build up content (and value) over time. Social apps in particular are prone to this because so much of their usefulness is derived from person-to-person interaction and user-generated content.

The term onboarding comes from the field of human resources and the common practice of new hire orientation. In that context, the steps in the process are often referred to as accommodate, assimilate, and accelerate—all of which apply quite nicely to how new users ought to be treated in order to bring them into the fold.

Accommodating your users means giving them the tools they want and need to use your site to their benefit. Assimilating means helping the user to absorb the culture of the site and, in a sense, come to resemble the existing users. And accelerating generally applies to delivering on the value proposition better and faster.

Oftentimes, the true value of your product or service becomes apparent only after significant use—perhaps because the user needs a sizable social network to really reap the benefits, or because continued activity on the site ultimately leads to something, like better recommendations. But don’t make the mistake of assuming that your users will stick with you that long. You need to help them get there as quickly and painlessly as possible in order to make your case.

Designing the onboarding process for your site is most commonly limited to a first-time use scenario: from the moment just after a user has signed up until the end of his first session. There are certainly extended approaches you can take to consider the user’s needs during subsequent visits until he is exhibiting a desired behavior on the site, but exert caution, lest you be seen as too heavy-handed or pushy. Typically, once a user understands the lay of the land, he wants to be left alone to explore.

A prime example of great onboarding

One of the best and most often-cited examples of an onboarding process is on Tumblr.com. Tumblr proudly calls itself the easiest way to blog and goes to great lengths to prove its point. The sign-up process itself is dead simple—just a single form to provide an email address, password, and desired URL. Once the user confirms her credentials by logging in, she is presented with the main interface and blogging tool, but most of the page is dimly lit. Her attention is directed to the toolbar, and a large bubble tells her exactly what to do next: “Create your first post!“. In actuality, there are a dozen things she could do from here, but the guide is making a decision for her. By limiting the user’s focus, Tumblr ensures that she is significantly less overwhelmed by the options at this point, while simultaneously being trained on the primary purpose of the product—to create content.

As the user mouses over each of the post options, only the subtitle changes: “try writing about something you did today”; “try linking to a cool website you like.” The language is clear and concise, the value inherent to the directive, and the user begins to conceptualize the variety of things she can achieve with the product despite the very simple interaction that is required.

At any point in the process the user can “x-out”—close the large bubble and exit to the main interface—without further interruption, but the copy and visualizations are compelling enough to urge her forward.

Once the user posts something, the next step in the onboarding process is to customize the blog. Now everything on the screen is dim except for the location of the Customize link. Not only is the user being taught about the ability to customize, she’s also learning where to access the functionality later on when she needs it again. Now that the user knows how to post content and customize her blog, the last step in the onboarding process is to “Follow some cool people!”. One of the biggest differentiators for Tumblr is its highly active community, but until a new user is connected to several other bloggers, she might not truly comprehend its magnitude. Tumblr overcomes this by encouraging users to find their friends early on, in a variety of methods. A user can scan for contacts in an existing email address book, or follow people under Staff Picks, Music, or Art and Artists. By observing the usage patterns of these popular and highly active users, new users will most quickly understand how to use Tumblr to their advantage, nearly guaranteeing more frequent use of the site.

Other variations on onboarding

Onboarding can sidestep the sign-up process entirely. TripIt, a travel itinerary and planner site, allows users to simply forward the site a recent travel confirmation email and TripIt takes care of the rest. By sucking in all of this content automatically, TripIt removes any effort new users have to put into the first-time experience and can almost immediately present the site’s value. They do have a sign-up process (just an email and password), but it is not required to see their tools in action. This strikingly reduces the barrier to entry and is still rare enough to make a user sit up and take notice.

When it originally launched last year, Yahoo!’s Shine, a website for women, had an interesting take on first-time use. Though it is no longer live, Shine’s onboarding process wasn’t directed at recent registrants, but instead was directed at first-time visitors to the site to help orient them to its variety of features. On a user’s first visit, a “Welcome to Shine” layer appeared in the center of the page. It said, “Shine features the best writers and bloggers in women’s publishing. Plus, connect with likeminded women, share stories and more. Take a ten-second tour to see more.”

By clicking the single call to action, a Continue button, the user was moved all around the page, with the browser auto-scrolling accordingly. It was a three-step process that also used the familiar bubble pointing at the functionality on the page with a short description of its purpose. It highlighted access to Yahoo! Mail in the sidebar, a recent activity stream of user-submitted content, and a quick-access headline list at the very bottom of the page. In the last bubble was a Get Started link that ended the onboarding process and scrolled the user all the way back up to the top of the page.

Suffice it to say, there are a variety of ways to handle a new user orientation. The user’s mindset and the site’s business goals, brand identity, and value proposition must all be taken into account. After all, this is the first impression, and you know what they say about those.

—Whitney Hess, https://whitneyhess.com/blog/

Related Posts:

• Yahoo!’s Shine March 31, 2008 | 12 comments
• Plurk You June 20, 2008 | 10 comments
• A Proactive Apology from Plancast January 30, 2011 | 2 comments
• Facebook helps users “clean up” their profiles January 17, 2008 | 0 comments
• UX Bookshelf July 19, 2008 | 11 comments