Blog

Getting your game’s tutorial right is not easy. You’re trying to communicate to players quickly, clearly, and efficiently how to play your game and understand your game’s interface. This is a big challenge particularly for mobile games, where players’ patience and attention spans are much shorter. You have a tiny window of time before the player becomes frustrated and leaves the app. This is especially true when they’re just getting started with your game. 

To avoid this player churn, it’s super important to consider how the player is perceiving and engaging with your tutorial. We call this a player first approach, and it’s all about putting the focus on the player’s perspective and how they’ll experience your game. 

Let’s dive into how to use this approach when designing your game’s tutorial UI. 

Understanding player expectations 

Expectations are subjective and influenced by our prior knowledge and experiences - and your knowledge and experiences as a developer are very different to those of the average mobile gamer. Therefore, what you might expect the player to immediately understand in your tutorial could be confusing and frustrating to them.

So how can you get to know your audience’s expectations? 

First, start by asking yourself these important questions: 

  • Who is my target audience for this project? 
  • What platform do they usually play on? 
  • Which visuals, audio, and symbols are they accustomed to? 

These questions are a good starting point. But while putting yourself in the shoes of your target audience can help you anticipate some of what they expect, the best way is to ask them directly. 

Invite players from your target audience to play early versions of your game and then survey them to fill some of the gaps between your expectations and theirs. For example, ask players to describe what they believe the icons in your game are for and what functionality they believe they represent. 

Adapting your focus to the players’ expectations when designing your tutorial is key to offering a satisfying user experience, ensuring that what you intended is what the player will ultimately experience. 

How to avoid tutorial UI mistakes 

Although learning how to play a game happens throughout the player’s gaming experience, the foundational elements are learned during the tutorial. 

Follow these general guidelines to avoid tutorial UI mistakes that can distract players and divide their attention:

  • Don’t fill the tutorial UI with too much information at once
  • Don’t make the tutorial difficult or challenging
  • Don’t give players new information while they're still busy learning a new mechanic
  • Don’t use text that’s too small to easily read or buttons that are too small to easily tap
  • Don’t use unusual shapes that aren’t immediately recognizable 

With the mistakes out of the way, let’s get into some of the best practices.

Player-first tutorial UI best practices

To ensure your tutorial is effective and uses a player-first approach, it’s important to make every element purposeful and attention grabbing, but simple enough to understand at a glance.

One really great way to do this is through the use of contrasting elements in your design. 

Contrast, at its most basic, is how different shades of color stand out against each other. Using contrast can help the player differentiate buttons from the background and direct the player’s focus. It’s also a great way to insert more excitement and fun into your tutorial. 

Take a look at this example below from a Supersonic game, Screw Master. Notice how in the screenshots, contrast helps the buttons stand out from the background so what players need to do is immediately visible. 

Your art style can also play an important role in your tutorial’s effectiveness. Each mobile game genre has its own unique art style. For the player, a game’s art style can be a useful shortcut to communicate what kind of gameplay experience they can expect. You can use these expectations to your benefit, quickly communicating what your game’s core genre and mechanics are by keeping the art style consistent with other titles in the genre. 

Here are some examples of typical genre art styles from Supersonic games:

Similar to your art style, another place it’s important to keep your game consistent with players’ expectations is your controls. When we talk about controls we’re referring to any way the player can interact with the game, including gameplay, menu navigation, and even settings. Keeping these elements consistent with other games of the same genre helps to facilitate a smooth onboarding for players already familiar with the genre.  

Be warned, if your game isn’t consistent with other games it might lead to unnecessary frustration for players and eventually them quitting the game. If two games are similar in genre and mechanics, players will expect them to have similar functions. 

To stay on top of trends in controls and art style it’s important to know what your competitors are doing and how they’re solving the different challenges in your genre. 

Consistency also applies to your own game’s internal world and rules. For example, if some types of doors can be interacted with, they should have a different visual cue to avoid confusion with other doors that players won’t be able to interact with. Once a rule is learned, players will likely assume they can apply the same rule everywhere in your game. 

There’s still room to be creative!

While rules and standardized design processes help us to increase efficiency, sticking too strictly to the rules can also be a bad thing. The rules offered here are useful to help you use a player-first approach in your tutorials, but that doesn’t mean you should be afraid of thinking creatively - it’s key to making a mobile game UI that stands out and a game that entertains players in a new way!

Let's put these tips to good use

Publish your game with Supersonic