Product Onboarding and Video Games

You’ve spent months building out a sick app. It’s got a neat premise and looks really pretty. All the animations are snappy, the user flows are coherent and your app feels super responsive as you navigate through it. You’re really proud of what you’ve built and know everyone’s going to love it. And then you watch someone else try to use it. “No!” you scream, “You’re holding it wrong!” You want to show them the right way to use it. If they just understood how to use your app, they’d understand. Because right now, they just look confused. And so you start really thinking about product onboarding, or the ability for the app to teach its users how to use it.

There are plenty of great discussions and learnings out in the wild about what makes a good or bad product onboarding experience, but I want to try and explore how to make an effective onboarding experience from a slightly different angle. Specifically, by exploring how video games onboard new users, and how some of the discussions and design considerations that game designers makes could translate into lessons about creating a valuable product onboarding experince.

These may not seem like very analogous situations, but in both cases you’re trying to achieve roughly the same goals:

1. Understanding the “point” of the product/game — How does the product fit in the users life? Why should the user stick around or open your app in the future? What should the gamer be trying to achieve? What does the win condition look like?
2. Understanding the “mechanics” of the product — How does the user perform various actions? What can you click on? What does tapping, swiping, shaking your phone do? How do you jump, move or shoot? What are the special mechanics of this game world and how do they function?

There are of course a few key differences:

1. The games I will talk about are linear. There is an end state or a win condition. Products mostly do not.
2. Gameplay evolves over time and designers push the limits of the gamers competence and understanding of the game mechanics. Products mostly do not.

That being said, the initial education isn’t really all that different. You’re trying to get a user up and running as quickly as possible.

Rules for Game Tutorials

This piece was largely motivated by the following video by Extra Credits. While watching it, try pretending they’re talking about product onboarding instead of video game tutorials.

Let’s go through each one of the rules provided in the video and see how they might apply to product onboarding:

1. Less Text

How many times have you been presented screens or flyouts with a bunch of text and a “next” or an “Ok, I got it” button? How many times did you actually read the text on that screen? When you give someone a new product and say, “Oh but first, read this,” you can pretty safely assume that the majority of your users don’t know any of the information you provided them in those early screens. Education should be interactive, and while designing a product onboarding flow, you have the opportunity to teach by doing. Let people learn by pressing buttons and discovering what they do. The information will stick better, and it’ll be far less boring.

2. No Front Loading

You don’t need to introduce every feature your product from the very beginning. It’s a good exercise to isolate what are the core mechanics required to perform the most basic and important tasks and only start by teaching those. Show people how to post a simple photo with a filter on Instagram. They don’t need to know how to tweak saturation and white balance, and pushing a super complex creation flow for a first time user can be daunting. Once you have a basic user, you can start leveling them into a power user by introducing new concepts in a digestible manner.

Magic!

A great example of this is Paper, which had a knack for teaching users various features at the very moment they needed it and no earlier. With a ton of new mechanics and gestures, they could’ve overloaded users with information, but by placing these snippets in context, you learned how to use the app at your own pace, and never found yourself stuck.

3. Make it Fun

I’m going to slightly change the wording here. If the goal of a game is to be fun, the goal of a product is to be functional. So make your onboarding functional. What are the first set of tasks your user will accomplish that will help them gain mastery over your app? Ensure completion of those tasks actually provide the user some utility. The quicker you provide tangible utility, the better off you are. Counter examples include recommendation apps that have you fill out forms on forms before you do anything else or apps that force you to produce some initial content before you have a chance to understand the value proposition.

4. Reinforce Learning through Play

Actually… this one doesn’t really apply. Hopefully, every moment using the app reinforces the mechanics the user has learned. You’re making an app that’s functional, not a game with narrative. Mechanics are all your app should be.

5. Listen to your Players

You can basically take this section word for word from the video. When you’ve been using your app for a while, you become blind to interactions that are just plain confusing and the best way to combat that is through “play testing” or in other words, UX research. Sit in a room and watch people go through the onboarding experience. What did they learn? What do they still don’t understand? Don’t explain anything. Unless you’re willing to walk into the homes and explain your app to the millions of people you hope will use your product. Ask them about their expectations throughout the process. Ask them what they think is about to happen before they take each action in the onboarding flow. Look out for moments of surprise, joy, frustration and understanding. Dig into why the user experienced those emotions.

Examples of Success

There are a bunch of products with great onboarding flows you can study from gmail to okcupid, but you can also learn a few things great video game tutorials. In the interest of space, I’m just going to talk about Super Mario Bros. World 1–1, and how it could relate to user onboarding. Let’s go!

For those unfamiliar, here’s the first screen of Super Mario Bros. It doesn’t look like a lot is happening, but the layout here is pretty crucial. Super Mario Bros. is an incredibly old game and couldn’t rely on gamers past experiences of side-scrolling platformers. So what does this screen do? Firstly it gives the user a safe space to experiment. There are no threats, nothing overwhelming, nothing that requires the user to react intelligently. They have the space to play around with the controls and feel comfortable. One of the worst first experiences I have with products is when it asks me to do something that makes me nervous. Where I don’t know if what I’m about to do is going to be potentially embarrassing or permanent.

If you’re the designer here, you can safely assume that I haven’t read any other screen in this carousel (which explains all the core mechanics quite well) and instead tapped on the giant obvious blue button.

For example, if I don’t swipe through the carousel on the first page of Tinder and instead press the really obvious, loud call to action, I only learn that I can “like” people on the app. I sign in and the first thing I get is a picture of some girl. I swipe right and the app says “Dragging a picture to the right indicates you liked Sarah.” Ahhh, what does that mean? Will she be notified? That’s super awkward! No no no, I don’t feel safe experimenting with this at all. I have no idea what’s going to happen if I confirm a right swipe.

The second thing the screen does is teach the player what the goal is by facing Mario towards the right and providing a ton of negative space. He’s going to be traveling right this game. The use of negative space is a pretty basic tool to guide people’s attention, and you already see it in countless opening screens that push people’s attention to the single call to action (sign up). This can be used in other ways to guide people’s attention. Instead of badging or nudging people to navigate to a new screen, why not increase tension by utilizing negative space. Snapchat introduces you to where you can find your snaps and messages by badging that side but leave discovery of the stories and discovery page to you. What if they peeked the right screen by keeping it just slightly open the first time you’re on the stories page? It creates tension that needs to be resolved by swiping right to reveal the discovery page. It’s not loud, or in your face, and if done right can make the user feel like they discovered that page on their own.

Back to the game! As you move slightly to right, you’re met with two new items to digest. A flashing box and a goomba that’s moving towards you with its angry eyebrows. The game is teaching you about jumping and enemies. As a player, you quickly discover what new visual input you need to deal with first: the thing that’s about to make a head on collision with you. The flashing box is just chilling there so you know you can deal with that later. This is something I see a ton of products get wrong. The first time a user finds themselves in your product, you should make it as obvious as possible what they should be doing next. Multiple competing call to actions with no clear understanding of whether you can “go back” to complete the rest is another huge source of anxiety for me when I’m using a new product for the first time. Figure out the new user flow, and make it really obvious where I should be going next. You have a great deal of control over how I make my way through your app for the first time.

Secondly, you cannot progress past this point in the game until you learn the mechanic the game wants to teach you. Namely, jumping. It’s physically impossible to get any further in this game without jumping. Games do this a lot: halt progression until the gamer has demonstrated an understanding of the concept being taught. I can’t actually think of any products that do this, and it can be pretty heavy-handed. But if there’s a particularly novel and crucial mechanic that your app introduces, I could see how you could utilize this technique to ensure users learned what they needed to. For example, I could see an Ableton first time user guide that forces you to save or bounce a simple track before you start getting too deep into the software.

I could definitely go on, but I should probably wrap this up. Designers teach people how to do things all the time across many industries. It pays to take notice of the techniques others have learned and try to understand how they may apply to your problem space. Not everything will translate, but every once in a while, you may find a lesson worth pulling from.