Tutorials done right

If I may first ask who likes tutorials? Yeeeeey… And who reads tutorials? Yeeeeey…

I’d rather stop with my clumsy attempts to be ironic and try to reason why tutorials as a concept are flawed, elaborate with a few examples of tutorials done wrong and finish by giving my tips on how to design a tutorial as if there were no tutorial at all.

The human brain is a bizarre entity with a vast number of chemical reactions going on. Already as toddlers we are educated into distinguishing between right and wrong. We are actually being told and educated. As we are quite fresh into the world, we accept this as it seems impossible to reason against it. But later on an interesting hormonal event takes place – a period notoriously known as teenage. Then we go to the opposite side, the dark side of the force. We reject any piece of advice and always do the opposite of what we are told or expected to do. In the end once the hormone levels are more or less in balance again we are somewhere in between drifting one way or the other from time to time. But how does this relate to tutorials you may ask? Simply the concept of a tutorial is by origin telling the user what to do and how to do it. And very often the case is that users don’t want to be told what to do, they don’t need guidance, they don’t want to feel lost, helpless clueless. They just want to get the right piece of information only when they need it. A piece of information that does not resolve the problem but gets them out of the place they were stuck at in order to discover this solution on their own. Do you think that tutorials are presently done that way? My own experience as a user whispers in my ear “NO” (actually it screams it because I have seen more than I wish existed). Let’s look into a few examples!

So what’s wrong with these two samples?

The one on the left is a brainstorming tool. You may think that the one on the left is fine because it presents you with the interface without wasting your time. I thought so as well and tried to interact with the huge white surface as it seemed to be inviting me to write, that is what you do when you brainstorm right? Wrong - this screen is actually showing a list of all your “projects”. Well, opening the app for the first time I obviously have no projects so rather than showing a list of nothing why don’t you simply invite me to create my first project? Then at least I would have a list of one project and will be able to understand at least that it is a list rather than a drawing canvas. And one last thing: when I launched the app there was this animated finger pointing at the help section. It reminded me of the good old clippy fella.

The right example is a slightly better implementation of a tutorial. You are presented with a four-option menu, where only one of the options is tappable (will hold my urge to comment this as I am only talking about tutorials). When you tap it you are presented with a pool table with the cue ball and another ball and are being instructed how to aim and choose the power that you hit the cue with. Not bad and it takes less than a minute but why is this extracted from the game itself. Is it so dangerous if I mess up my first shot in a pool game because I misunderstood the controls? And why do I need to be told to move my finger to aim first and then drag the power meter to select the force I put in the shot. Such simple interactions are the first thing that most of the people are likely to try and succeed. So why is there this separate tutorial at all?

Do you know what the benchmark is for a successful tutorial is? The answer to one simple question: So how did you like the tutorial? And you know you did your job well not when you get a yes, but when you are asked in return: WHAT TUTORIAL? Because well designed tutorials are such a seamless part of the overall user experience that people are unable to distinguish or recognize them as such. Luckily there are many more tutorials like that lately and this gives my UX focused brain some peace. And if you want to know in more detail what effort goes into the design of a brilliant tutorial, I would kindly ask you to google for “How I Got My Mom to Play Through Plants vs. Zombies”. You didn’t know that there was one in the game? This further supports my claim. Take a look at the video and discover how a tutorial can be blended to become a part of the whole game.