A tutorial level for the Internet?

Since Firefox is at something like 25% worldwide market share, and that already includes a lot of the world’s most tech-savvy people, our future growth is going to have to come more and more from the ranks of computer novices and first-time Internet users.

In a recent post I talked about the problems of teaching total beginners the basic concepts they’ll need in order to become capable users of the Web.

This reminded me of something from an old video game… (Nearly everything reminds me of something from an old video game.)

This is the first screen of the classic Nintendo game Metroid. At the time, most video games were either single-screen affairs, or they were long tedious marches in a single direction (usually to the right, as in Super Mario Bros.). One of Metroid’s many innovations was that it allowed the player to explore in every possible direction (and completing the game required an obsessive dedication to exploring every nook and cranny). This innovation worked so well that it is now taken for granted as a basic principle of almost every game.

Developing Metroid must have been like developing any software based around a brilliant new idea. You, the developer, know this feature is hot stuff and can potentially change the way people interact with software. But the problem is that your users don’t know this feature exists, and if they did know, they wouldn’t know why it’s something they would want, or how to make best use of it. What do you do?

The first-time player of Metroid will most likely begin by doing what most video games have taught them to do: force their way rightward by any means they can. After going through a few doors, they will come to the screen above.

The tiny tunnel on this screen is too small to enter, but it obviously goes somewhere. It is a conundrum. It taunts you.

The only solution is to go back to the start and this time, walk to the left. If you do so, you are immediately rewarded with the discovery of this glowing ball (for trivia buffs: it was called the “Morph Ball” in later games, but here it was called the “Maru Mari”.)

When you pick it up, you can then have Samus (your character) curl into a pillbug-like ball and roll along the floor, which lets you get through tiny tunnels like the one that stopped you before. You can now proceed with the next phase of the game.

This whole side-trip is a sort of in-game tutorial. It’s quite ingenious, actually. Without using any words at all, the game designers have taught you several of the key skills you’ll need to play effectively, and they’ve ensured that you understand these skills before you proceed on to the main part of the game. There are several subtle things that they did exactly right.

First, they made the side-trip very easy. All you have to do is go left: there’s no traps or enemies in the way. Asking people to break their always-walk-right habits is quite enough without adding extra frustration on top of that.

Next, notice that the screen where you get the Maru Mari is ingeniously designed so that you can get in by jumping, but you can only get out by rolling into a ball. In other words, the game designers aren’t letting you go anywhere until you’ve proven you understand the meaning of the item you just found. It’s like asking a student a question to make sure they understood what you just told them.

By going left to get the Maru Mari, the player has actually learned four things. They learn that this is a game where they can move any direction. They’ve learned that they will be rewarded for exploring unexpected places. They’ve learned that items found scattered around the cave give their character new abilities. And they’ve learned that these abilities open up access to new areas. The player has been equipped with a lot more than just a gadget that lets them roll up: they’ve been equipped with the mindset that they’ll need to face the challenges ahead.

The game designers could have put a line in the instruction booklet that said “By the way, you’ll need to explore in every direction, not just march to the right”. In fact, maybe they did put this in. I wouldn’t know. Who reads instruction booklets? Even if they did read it, seeing the text wouldn’t have had one tenth of the impact of figuring out the principles for yourself. People learn best by doing.

Nintendo seems to love this technique, and uses it in game after game. For instance, a few years and two games later, in Super Metroid, there’s a bit where you fall down a very deep shaft. At first, there seems to be no way out; you’re stuck. But if you pay attention, you’ll see some tiny alien creatures climbing up the shaft by bouncing back and forth between the walls:

“I wish I could do that”, says the player. And if they’re smart, they give it a try… and discover, to their surprise, that they can. Wall jumping is essentially an undocumented feature. It’s an ability that Samus has always had, since the beginning of the game, but the player doesn’t know about it because they’ve never had cause to try it before. It most likely takes a few tries before the reach the top of the shaft and escape. But when they do, they get the thrill of achievement, and they’ve mastered the Wall Jump technique, which will serve them well in the rest of the game. The aliens are there to teach you by example.

So, to bring this back to the original topic: Samus is like your web browser. She can do a lot of cool tricks, some of which you don’t even know about, and she can find upgrades (add-ons?) that let her do a lot more. The caves of planet Zebes are like the Internet: a vast interconnected labyrinth full of wonders and dangers where you can get lost for days. Samus’ abilities, or the features of your web browser, are the tools you use to navigate this labyrinth.

So the question is: What’s the web browser equivalent of the Maru Mari side quest, or the wall-jumping aliens? Could there be something like a tutorial level for the Internet? A site where we trap you, and don’t let you leave until you’ve mastered the use of the History menu? Have cute fox creatures running around on the page to teach you by example?

Careful – cute foxes teaching you by example sounds dangerously close to the universally despised “Clippy” from Microsoft Word. We must be careful: naive attempts to implement tutorials can turn out really, really awful. But maybe the key is that Clippy sucks because it tries to tell you what to do, while the Metroid examples work because they make you learn by doing it yourself. Is there something analogous we could do in Firefox?