Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

What UX Designers Can Learn from Game Onboarding

Sandro Cantante

November 24, 2023

Min Read
What UX Designers Can Learn from Game Onboarding
blue arrow to the left
Imaginary Cloud logo

Walkthrough (passive)

Of all the listed approaches, the walkthrough is the most informative, but also the most intrusive. It pauses the user experience to provide large amounts of information concerning new mechanics that the player should get familiar with.

Bloodborne

   

Bloodborne takes the most of this approach to describe a few of the game's items during loading screens. It's a clever way of saving time during a screen that, typically, has the opposite effect. Each item's description is also available in-game, but if the player already got familiar with them, there's no need to check it again later.

   

Metal Gear Solid

Hideo Kojima's masterpiece, Metal Gear Solid, on the contrary, provides a bad example of a walkthrough process. The codec calls are famous segments in the series, and while most of them are as interesting as they are important for the narrative, there were definitely better options to walk the player through something as intuitive as climbing stairs.

Upsides of the walkthrough approach:

  • Can provide large amounts of information;
  • Takes the best of transitional screens.

Downsides of the walkthrough approach:

  • Pausing the experience too often is annoying;
  • There's no guarantee that the user understands how to perform the action that was explained.

This approach is commonly used by apps as tutorials and can be valuable as such. Finding additional features in screens such as a login page may be a pleasant surprise, but it's risky to walk users through key features from the very beginning of their journey.

Users are eager to take the most of products on the first usage, and if the first minutes are spent reading through how everything works, they might not even start using it at all. Walkthroughs are best used when describing lengthy or complicated processes that consist of various steps. However, most of the times, it's more efficient when combined with a hands-on approach, since it'll provide a better learning experience to the user.

blue arrow to the left
Imaginary Cloud logo

Hands-on (active)

The hands-on approach assumes that the user is able to understand how a mechanic works by providing a situation in which it isn't possible to advance without taking advantage of it. It's less intrusive than the walkthrough, as there's very little impact on the actual gameplay, but relies exclusively on the user's intuition.

   

In the very beginning of Resident Evil, there's no tutorial as the player explores the first few rooms of a mansion. However, as soon as the character approaches the first resident, through a short and memorable clip, the user gets a very clear understanding of how that enemy works and now they can act on it. As the game moves forward, it becomes progressively more difficult to deal with enemies and it’s expected that the player will improve at the same rate.

Contra: Hard Corps (Probotector in Europe and Australia) is a completely different story. The game starts with the player rushing through hordes of enemies, literally jumping right into action. There are a few seconds to test what the character can do and that's about it for the learning experience. Contra is often named as one of the hardest series ever made, but it wouldn't lose any of its essence by giving away a few mechanics that would make it easier to get started.

Upsides of the hands-on approach:

  • Doesn't break the flow of the gameplay;
  • Learning by experience is the most efficient way for the player to get used and remember how different mechanics work.

Downsides of the hands-on approach:

  • Some mechanics may not be intuitive enough;
  • It can come up as an unnecessary obstacle in earlier stages.

It's not usual to have a pure hands-on onboarding, as product development teams often fear that users won't understand how the product works. However, it's just a question of understanding the users that are being addressed and providing a good experience according to their needs.

An intuitive experience doesn't need any further explanation and chances are that the ideal user has already used similar products before. Keeping it to a minimum is the key to a smoother experience that will help users meet their goals quicker. Lengthy information or tips about specific features that help taking the best of the product can be left for later stages, when the user is already comfortable with it.

blue arrow to the left
Imaginary Cloud logo

Mixed approach (walkthrough + hands-on)

As the name suggests, the mixed approach provides both a walkthrough and a hands-on experience by explaining a concept and having the player experience it immediately after. It's usually less vague than the hands-on experience and less intrusive than the walkthrough, aiming to take the best of both approaches.

   

God of War

A good example of a successful mixed approach comes from God of War. As players take the first steps in the game, a few messages discretely pop in the screen. They're not mandatory steps that the player must do, just tips about mechanics that will be helpful in the current situation, providing useful information that isn't obvious, without forcing the player to stop the gameplay.

   

Final Fantasy XIII

On the other hand, we have Final Fantasy XIII, which is often used as the bad example when it comes to onboarding examples. Throughout more than half of the game, several tutorial segments break the action to explain new mechanics, followed by a hands-on experience. Sometimes it's helpful, most of the times it isn't. Even with the possibility to skip tutorials, just having to go through them so often is an unnecessary burden.

Upsides of the mixed approach:

  • Can explain less intuitive concepts without breaking the flow;
  • Assures that the user understands the message correctly.

Downsides of the mixed approach:

  • Sometimes it doesn't add anything to a pure hands-on experience;
  • Isn't tailored for more extensive tutorials.

By now, we're used to seeing this type of onboarding on web products. It can be a great approach to guide the user through the first product usage, without taking much time to get either checked or closed. However, it should be used with moderation, as they can make the user lose focus by popping up too often.

There's not a formula to calculate the level of complexity of each feature, but a mixed approach is better suited for features that are introduced after the first use of a product. Contrarily, this approach isn't so well suited for key features, which should be more intuitive on the first product use, or more in-depth tutorials, which require more than just a helpful complementary tip.

blue arrow to the left
Imaginary Cloud logo

Conclusion

People don't buy products; they buy better versions of themselves. (Samuel Hulick, @UserOnboard)

Any of the approaches provided here is useful in its own way and a product can even go through all of them in different stages. A hands-on experience is better for the most intuitive elements and features, the mixed approach is best suited for features that present a slightly higher level of complexity and are not as intuitive, while the walkthrough experience is more appropriate for specific or new concepts that the product may introduce at a later stage.

Working it all together is the challenge that UX design teams have to face. If users can’t understand how the product works, they won’t be able to achieve anything with it. On the other hand, constantly reminding all the features they’re missing out isn’t appealing either.

It’s not just about games or web products either, a successful onboarding process is crucial to let users take the most out of something in which they already invested some effort in. As it's been repeated countless times now, remember that there isn't a second chance to make a great first impression. Take the most of it.

Ready for a UX Audit? Book a free call

Found this article useful? You might like these ones too!

blue arrow to the left
Imaginary Cloud logo
blue arrow to the left
Imaginary Cloud logo
blue arrow to the left
Imaginary Cloud logo
blue arrow to the left
Imaginary Cloud logo
blue arrow to the left
Imaginary Cloud logo
blue arrow to the left
Imaginary Cloud logo
blue arrow to the left
Imaginary Cloud logo
Sandro Cantante
Sandro Cantante

Content manager, text editor, and presenter of strategic ideas, along with being an avid fan of the cinematic arts and visual storytelling.

Read more posts by this author

People who read this post, also found these interesting:

arrow left
arrow to the right
Dropdown caret icon