Onboarding 101: Lessons from Game Design

Recently I have been interested in game design, especially on how games teach players the mechanics of a game.

If, like me, you are not a gamer, I’d recommend to stop and watch these two videos. There is a lot we can learn as product designers from game design.

Edmund McMillen on Teaching through Game Design and Mechanics (from the movie Indie Game)
An in-depth analysis of Mega Man Classic vs. Mega Man X game mechanics and the use of “Show don’t tell”.

Why Bother with Onboarding?

As humans, we are wired to make quick judgements during first impressions. This also affects software: making sure the user understands the value and capabilities of your product right away is essential if you want to retain them. Ignore their frustration and you will make sure they leave to never come back.

When Microsoft asked their users what they wanted added to Office, they found 90% of the requested features were already there.

Onboarding the user and making sure they adopt the product’s features is as important as coming with the product. What’s the goal of building something if nobody is using it?

Onboarding in Product Design

We can use multiple tools when creating our Onboarding experience. From walkthroughs to action based tutorials.

Pocket: Walkthrough Example

Walkthrough (passive)
This passive approach to tutorials is widely adopted in mobile apps. We highlight some features and expect the user to digest the information.

TeuxDeux: Hands-On Example

A more active approach is to let the user learn how to use the app by themselves, making the app as intuitive as possible. By learning to use each feature in the right context, the value is communicated more clear.

Mailbox: Mix (Walkthrough + HandsOn) Example

Mix (Walkthought + Hands-On)
This combines both a Walkthought and a Hands-On approach. This approach is better than a simple walkthought but doesn’t deliver as much value as a full Hands-On onboarding.

Learning by Doing

Hands-On Learning is the process of learning through experience. This approach demands the user interest and desire to learn, and has been shown to be most effective than passive learning like reading or listening.

Experiential Learning is more efficient than passive learning like reading or listening

By asking users to use your app, you are making sure they understand what they can do and how these features work, allowing the users to use them right away. In game design, this type of in-game tutorial is called “Justified Tutorial”.

Creating a Hands-On Onboarding

Think about Onboarding from the Start

You should think how are you going to teach users to use a particular feature while you are designing it. Making it intuitive should always be your goal.

Manage Frustrations

Be aware of possible users frustrations and anticipate user errors when crafting your tutorial.

Instructional Scaffolding (Progressive Onboarding)

You should progressively teach the user new things, by building on previous experiences and knowledge, paying attention to the order and the context of each piece of information.

Be Mindful of Empty States

Empty states screens are a great moment to teach users the goal of the screen and invite them to complete an action. Empty states should always tell why they are empty and invite the user to do something about it.

User Test your Onboarding

Watch your users go through your onboarding process, see if their expectations are being met or if they are getting frustrated and when.

Onboarding is Never Finished

As you release new features, you also need to teach users how to use them. The best moment to teach a user to use a new feature is when is valuable for them. Sending an email explaining a new feature has no contextual value to the user. But showing that they can “undo” the deletion of a message right after they delete it does.

Onboarding is Underrated

The concepts mentioned here are not new and I believe most designers can come up with great ways of teaching their users how to use their product.

Onboarding in most cases is considered as an after-though, which results in poor tutorials that damage the overall user experience. Crafting a good onboarding experience is the first step in making sure your users fall in love with your product.