Five killer ways to use onboarding
Get your users to complete tasks and fill in information by using good design, says Gene Crawford
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.
Get top Black Friday deals sent straight to your inbox: Sign up now!
We curate the best offers on creative kit and give our expert recommendations to save you time this Black Friday. Upgrade your setup for less with Creative Bloq.
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.
Thank you for reading 5 articles this month* Join now for unlimited access
Enjoy your first month for just £1 / $1 / €1
*Read 5 free articles per month without a subscription
Join now for unlimited access
Try first month for just £1 / $1 / €1
The Creative Bloq team is made up of a group of design fans, and has changed and evolved since Creative Bloq began back in 2012. The current website team consists of eight full-time members of staff: Editor Georgia Coggan, Deputy Editor Rosie Hilder, Ecommerce Editor Beren Neale, Senior News Editor Daniel Piper, Editor, Digital Art and 3D Ian Dean, Tech Reviews Editor Erlingur Einarsson and Ecommerce Writer Beth Nicholls and Staff Writer Natalie Fear, as well as a roster of freelancers from around the world. The 3D World and ImagineFX magazine teams also pitch in, ensuring that content from 3D World and ImagineFX is represented on Creative Bloq.