Portal 2 Taught Me Everything I Know About Onboarding
I haven’t been a particularly skilled gamer since GoldenEye 007 (yes, it was capitalized that way) circa 1997, but that doesn’t stop me from fumbling through at least a few hours of most every AAA and well-reviewed indie game. Too kinetically incompetent to reach any kind of mastery, I like to think of my video game playing as research. Game UX and UI is rich with lessons on building engaging consumer products.
In games, onboarding—the process of easing a player into the game’s world and teaching its interfaces and rules—is light years ahead of where we are on most mobile products.
Portal 2 is a game that sets the gold standard. If an app had an onboarding half as well-crafted, I’d probably keep it on my phone forever.
Onboarding is a singular opportunity to tell the story of how and why someone should use what you’ve built. Most mobile products make the mistake of telling that story from the developer’s perspective, not the user’s. Games inherently are created from the player’s perspective first as finely tuned entertainment products. But even the most utilitarian things are best sold with narrative!
If you’ve never played Portal 2 or it’s been a while, here’s a walkthrough of the early game to give you a taste:
Portal is a game about elaborately manipulating and navigating environments that are airplane-hangar-sized, cyberpunk-lab-themed Rube-Goldberg machines using a gun that shoots, well, portals. The essential mechanics of it are simple, yet the puzzles quickly become complex and must be solved through joyful and occasionally maddening trial and error.
The first segment of the game is a playable non-level introduction sequence followed by six levels of graduating complexity. Only at the end of this sequence, which takes 20–30 minutes, do you have all the major tools to play the game, namely, a fully-functional portal gun. Portal’s learning process is methodical, humorous, and incremental well below the point of being tedious. Fall in the sludge, you come right back to life with a gentle nudge in the right direction, not set back an entire level. This suits the game, which is contemplative but requires skill, tricky but cognitively itch-scratching.
So what makes Portal’s onboarding so good? What should we be cribbing from it for our own products?
Introduce a new element, reward its use. Rinse and repeat.
Portal’s prologue scene teaches you the most basic necessary commands with on-screen prompts: head and foot movement and activating items in your environment. There is no danger at first, absolutely no possibility of failure. You can take as long as you want to complete each command with no negative feedback, just ever more humorous voiceover prodding.
Once you’ve mastered these essentials, the rails slowly begin to come off: the cozy room you’re in literally loses its walls, craned through some sort of massive cavern of twisted metal. When it finally comes to rest, you use the minimal skills you’ve learned to start out somewhat on your own, but you also gain a robotic orb sidekick who suggests the right path. Following some plot development, you discover the next game mechanic, the portal gun, on your own, activate it using the activate command you learned two minutes earlier, and off you go to the first proper level.
The levels that follow each introduce a single new element. At first, portals are created for you. You learn to shoot your own blue portal in the second level, orange portals don’t even come until the sixth. Manipulatable elements of the environment, like cubes and buttons, that will eventually number dozens to a level, start out as singletons so you can get comfortable with them. By the third level, single elements begin to combine in more complex, but still rapidly solved, puzzles.
… But don’t go too slowly or patronize
By the time you’re done with the first set of levels, you’re confident in the boundaries of the game. You know what can be manipulated. You know how different wall materials interact with portals and objects. You can scout a level quickly for ideas about how to conquer it. Yet — beyond the prologue where the five basic keys are shown — there are no text or audio explanations that have told you “Press here to release a box” or “This button will open the door.” No overlay that says “white walls are bouncy.”
A show-don’t-tell approach is rare in mobile apps, even though they have far less complexity to teach than games. Condescending explanatory text or too gradual a learning process tells the user you think they can’t be trusted.
As you learn to successfully combine different elements in Portal, the rewards are tied to the game not to the interface elements themselves. You are not rewarded with a “good job!” for figuring out that a cube held on a button opens a door. You are rewarded by beating the level. The difference is subtle but crucial: it is the difference between Clippy popping up to congratulate someone on tapping the “Post a photo” button and letting them bask in the excitement of having posted a photo by actually seeing it in its posted state.
Invest no less in onboarding than you would a core feature
The first scene in the Portal 2 is one that you spend less than two minutes of a 24-hour-plus game in. However, its creation involved coding an extremely complex physics simulation beyond what is used in standard parts of the game. The dialogue of this first section also underwent significant revisions, cutting plot elements that the developers felt might have led to confusion.
In games, this level of attention to onboarding is the standard. If a player just spent $60 on a game, the first few minutes has to not only teach the core mechanics, it has to be a fucking thrill.
Building for mobile, where the likelihood that a user will return to your app more than once is often a single-digit percentage, onboarding deserves even greater investment. Onboarding sets the emotional and technical tenor for the whole product; skimping on it means a user won’t understand what you’ve made and will have no emotional drive to figure that out.
Have a (strong) personality
Sardonic robots are your only companions/enemies in Portal 2, and they come out of the gate with a lot of wit. Even the initial scene where you are learning simple keyboard commands drips with the style of humor that defines the entire game.
When Wheatley, your sidekick robot asks you “Do you understand what I’ve told you? Just say ‘yes,’” the on-screen instructions tell you to tap [Space] to speak. [Space] is the jump button, so, helplessly, you jump instead of speaking. In this way you’ve learned the jump button, and also learned that gentle mocking is the personality of the game.
Too often, introduction copy feels stiff and pedantic. Good products have minimum viable personality, which should be turned up to 11 in onboarding.
Give us something to believe in that’s bigger than the product itself
The first 30 minutes of Portal 2 are a subtle manifesto about what video games should be. The onboarding itself makes a persuasive argument for a contrarian view: Gaming is about cunning and persistence, reflexes and reflection in equal measure, and is accessible to anyone. It is not about purposeless ultraviolence. Plot and dialogue matter.
Cliches from other games leak in but are subverted. A “big boss” style foe appears, but you run away from her. You have a sidekick, but he’s mischievous and fairly incompetent, not a minion providing you covering fire. You have a gun, but it only shoots wormholes.
Portal’s onboarding makes playing the game a polemic act and gives the player something to talk about far beyond the game itself. The best products of all kinds do this: they assert that the world should be different and paint a picture of that different world from the first tap.
Introduce your design language early
Rather than overload the player with prompts and instructions, Portal uses hilarious Isotype drawings to hint at what elements of the environment do and how they might be used. These pictograms can be looked at when the physics of an object are forgotten, and are present throughout the game. You see these pictograms in onboarding before you have even solved your first puzzle.
Other elements of the beautifully honed design language of the game are slowly but steadily introduced: dotted lines that connect buttons to the elements they affect, colors used to reflect state, etc.
Make the line between onboarding and the product itself invisible
Portal succeeds so well in blending the learning process with the game itself that I had to arbitrarily define the boundaries of “onboarding” as its first six levels for the purposes of this article. Ask a player 30 minutes into playing the game for the first time “When did the tutorial end?” and they will probably respond, “What tutorial?”
No one downloaded your app to go through your totally fun onboarding. Let them feel like they’re playing the game or using the tool from moment one, even if you are carefully controlling the interface for the first few screens. If your product doesn’t consist of lots of pages filled with text that must be swiped through, ditch the didactic, swipe-through-these-directions onboarding and do the hard work of figuring out how to gently ease users into the real product.
Don’t go downloading Beme if you’re looking for a masterful application of these principles. In our first version (still a beta!) we bungled almost every aspect of the onboarding, badly. As students of Portal 2, we are currently completely revamping and will have a dramatically improved version soon.
Onboarding is not a simple thing to build well, and Portal sets the bar damn high.
If you liked this article, why not subscribe to my newsletter and get my unfiltered commentary and a handful of links for product makers in your email every week?
