Why tutorials are important in UX Design and what we can learn from Super Mario creators
A well-designed tutorial allows you to efficiently introduce new users to even very complex processes. The problem is that designing this is not an easy task. In this article, I will present what we can learn from Japanese video game designers in this matter and how can we implement this in UX design.
From this article you will learn:
- What we can learn from Nintendo game designers in the matter of good tutorials.
- How a technique from Japanese literature works with design.
- How we can implement in digital products.
Why me:
- I’m a UX designer with over 4 years of experience, working every day with big clients from all around the world.
- For over 10 years I’m making video games reviews and I play videogames since my early childhood.
We learn every day
It is said that man learns all his life and it is undoubtedly true. We owe the whole history of the development of our civilization to science. The transience of our life on earth has developed in us the mechanisms of transferring knowledge to each other, as well as archiving it for future generations. We learn from birth — even innocent children’s games are a form of learning and exploring the world. As the only species on our planet, we have also developed information transfer systems, which are languages and writing.
The ability to learn new things allows us to stay up to date with the development of reality around us. If we do not know something, we can simply learn it or learn it through experiment. Because we live amid things created by other people, as important as our cognitive skills are the tips that others leave us. Just as a child assembling a new LEGO set uses the instructions prepared by the creators, so an adult prepares a meal according to the recipe or assembles furniture from IKEA.
This also applies to the digital world. It can even be said that the proper transmission of knowledge on how to navigate it is even more important than in the real world because it is governed by slightly different laws. The task of the user experience designer is to introduce users in such a way that they can easily achieve their goals with the help of a software or a website. A well-designed interface is compatible with the so-called Jacob Nielsen heuristics, which we discussed in more detail in the article describing how we carry out usability audits in 10 Clouds on the example of the HBO GO platform audit. In a nutshell — heuristics is a set of guidelines that, if followed, will create a user-friendly interface. One of the heuristics is to avoid mistakes and provide help and documentation. Although not all systems need fully described operating principles, good onboarding is the basis for the efficient introduction of new users into the use of new software or websites.
In a perfect world, users would go through the tutorials every time they use the new software. But we all know what it’s like in reality. Impatience and the desire to try everything on there lead to the fact that many of us simply do not read the tutorials. Often, they are also implemented badly. There is too much information to remember in one go or they lead the user by the hand so slowly that you can die of boredom. As a result, we turn off these tutorials, often without knowing about the various nuances of the system. So how do you design good onboarding and where should you look for inspiration? We don’t always have to model only on solutions from application software and websites — sometimes it is worth looking at video games, for example.
What can we learn from the creators of Super Mario?
Virtually everyone knows the mustached plumber Mario, even if they don’t play video games. What’s more, more or less everyone recognizes what he looks like and what the iconic first edition of his adventures consisted of. Of course, we’re talking about Super Mario Bros., a game released on the Famicom console in the US and Europe known as the Nintendo Entertainment System. The merit of the gigantic popularity of this title is undoubtedly based on simple mechanisms but very pleasant gameplay requiring the player dexterity, above all. Playing the role of a mustached hero, we jump over obstacles, jump on the heads of opponents and collect gold coins and Power Ups, such as special mushrooms.
All this seems obvious to anyone a bit familiar with games. The classic adventures of Mario have the advantage that it is very easy to start playing them, even if you sit in front of the console for the first time in your life. This is due to a well-thought-out tutorial, prepared according to specific Asian philosophy. Before you shout that I’m writing nonsense here that Super Mario Bros. doesn’t have tutorials, I will answer that it definitely has. The whole trick to it is that it’s not implemented in the way we see on software tutorials.
Learning by experimenting
To understand the whole issue, just look at the first dozen or so seconds of gameplay in Super Mario Bros. The first level of the game begins with a flat surface. The player can only move to the right. After a few seconds, we come across Goomba, i.e. the opponent. We lose if we don’t jump over it because, for example, we don’t know we should do it. The second time we know that you have to jump and depending on how we land we can eliminate or bypass the opponent. Knowing that we can jump, after a while we come across a pulsing square hanging in the air with an encouraging question mark. Hitting it releases a useful object, i.e. a magnifying mushroom. The player learned that the mushroom-like Goomba is an opponent and can try to bypass Power Up towards him, but the block sequence arranged by the creators does not allow him to jump over it. In this way, we discover that such mushrooms in the world of Mario are good.
Thanks to such simple solutions, a novice can quickly master the basics of gameplay. Of course, this game design is not completely without flaws — the game does not teach us, for example, that by pressing one of the buttons we can run faster. It is also possible to jump onto the platforms and not discover the auxiliary mushroom. It is also possible to jump onto the platforms and not discover the power-ups. It’s not always clear, but it’s fun to explore, and much better than tutorials nowadays. Imagine if you had tutorials in the style we are accustomed to daily in utility applications — the game would welcome us with a full-screen overlay with lots of information and an incentive to buy the premium option, and an arrow above the opponent “Jump here”. There would be no joy of experimenting.
Kishōtenketsu — from literature to the software development
In an interview for one of the gaming portals, the Japanese creator Koichi Hayashida working for Nintendo admitted that one of the tools used in the production of games from Mario is the so-called Kishōtenketsu. This term comes from Japanese literature and comics (and originally from Chinese poetry) and refers to the gradual pursuit of history to first familiarize and interest and then surprise the recipient. It consists of four stages:
Introduction (ki): introducing characters, timeline, and any important information for understanding the setting of the plot.
Development (shō): leads towards the twist in the story without any major changes.
Twist (ten): the plot turns toward an unexpected development and if there are many turns in the story, this is the biggest and most unexpected one.
Conclusion (ketsu): ends the story.
This idea has been brought to Nintendo by the legendary Mario creator Shigeru Miyamoto, who liked to draw comics when he was younger. On the example of the first level of Super Mario Bros, you can easily indicate its use — the player learns the jumping mechanics and various situations in which it should be used, and also discovers the differences between opponents and auxiliary mushrooms. What’s more, the game later adds elements introducing more twists — for example, turtles that hide into their shell when we jump on them.
An example of a similar approach in UX design
The Kishōtenketsu approach does not always have to be used deliberately. In tutorials for complex platforms such as template editors of online websites, we can sometimes see its elements. As an example, we can point to the tutorial of the GoDaddy service, praised on the Internet for accessibility and quick giving the user control. Let’s see if it can be seen in the approach that I described above.
After registering the account, the service immediately takes the user to the website editor. It starts with a query about the subject of the website. Then a preview of the proposed template appears on the left. The user then discovers that the changes can be viewed in real-time. So we can say that it is Introduction. Then the user is asked to enter the title of his new page. It immediately appears in the template preview. So here we are dealing with Development (shō).
Clicking “Continue” transfers to the second, a more advanced form page. In the right column, there are links to other wells that allow you to set “Theme”, “Pages & sections” and “Settings”. This is a kind of Twist (the one) of the mechanics of action presented earlier, but its foundations are still preserved, i.e. the presentation of the effects of changes in the template on the left.
How can I use Kishōtenketsu to design tutorials?
The Kishōtenketsu philosophy does not give specific guidelines and that’s why you should just keep it in mind by designing tutorials in more complex digital products. For example, it can be used for online banking. Instead of overwhelming the user with overloaded modal screens, let him act step by step. Let’s top up his account with a small amount showing the history of received transfers. Next, let’s show him the mechanics of performing payment transactions, for example, through the process of sending funds to a charitable foundation. In the future, we can also introduce Twist, encouraging the user to set up an automatic recurring transfer if the system detects that the same transfers are performed regularly.
The most important convey Kishōtenketsu approach is to give the user control and allow him to learn by experimenting and consolidating the mechanisms learned. After all, a child is slumbering in every adult.
Looking to create a new digital product? We can help. Just contact our friendly team on hello@10clouds.com and we’ll get back to you as soon as possible.
