Five killer ways to use onboarding

This article first appeared in issue 226 of .net magazine – the world's best-selling magazine for web designers and developers.

So you’ve convinced someone to sign up for your app or website. Now it’s time to figure out how to keep them engaged enough so that they come back for more and are able to see what the possibilities are.

Perhaps you need them to complete an address, or add friends and photos. Building this functionality may be somewhat trivial, but actually getting users to do this without feeling overwhelmed or bailing out is a challenge. One process for achieving this is called Onboarding.

Completionist

Onboarding is a way of gradually getting a user to complete tasks or give information over time through a series of steps. Videogames have been doing this for years by allowing you to learn how to play the game while actually playing the game.

With onboarding and the design of your website, it’s a good idea to focus on a few basic ideas. First, the design should set expectations by showing the user what to expect and when to expect it. One example of this is showing a list of grayed out social networks, indicating that these can be connected but aren’t yet.

Second, positively reinforce the user by congratulating them in some way (‘Woohoo, you uploaded your first photo!’). Finally, reveal the app’s complexity slowly. This relates to setting expectations early. If there is a task or feature that the user can’t use until they complete several other tasks first there’s no need to get into it at the start.

The experience for your user and the success of your website is only going to be as good as the data that’s put in by users. It’s important to make the process easy and rewarding.

Five examples to check out

1. Get Satisfaction The public community product discussion web app Get Satisfaction allows the utilisation of multiple social media profiles to complete a Get Satisfaction profile to help you get past the ‘cold start’ problem of getting you past the profile building step as quickly as possible.

2. Ancestry.com The family tree building website Ancestry.com allows you to begin entering in your information and get several steps into the process before asking you to set up an account.

3. Zerply The social networking site for professionals Zerply displays two very obvious boxes of information the first time you log in that prod you along to find your friends via Twitter and Facebook.

4. Dropbox The cloud based file saving app Dropbox uses a list of steps you need to work through to become an expert in using it.

5. Tumblr The first page the blogging platform Tumblr shows you after signup contains two simple arrows with labels pointed at the very next steps of either posting your first post or picking your blog’s theme.

Discover the 50 best free fonts for designers at Creative Bloq.