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?
December 14, 2009 at 8:52 pm
Metroid rocks!
December 14, 2009 at 9:27 pm
The new default home page in 3.7 should give us some of these opportunities. It’d be cool to sit down and talk about what we may want to teach.
December 14, 2009 at 10:05 pm
So I thought about your question a bit – I think you’re asking the wrong question. In the case of Metroid, the aim of the “tutorial” was to teach the user: “explore in all directions” (and then some) – but your question “How can we make a tutorial for the internet?” is like asking “How can we make a tutorial for Metroid?” – it doesn’t explain what we should be tutoring, so to speak.
In other words, what would you want the tutorial to teach people? Click links? Use bookmarks? Use the awesomebar? Distinguish phishing pages from their real bank page?
All of these need different kinds of tutorials (and for some goals, tutorials are easier to create than others).
It’s really quite an interesting question – what bits should users know in order to be able to use the web at a level where we no longer cringe and want to do it for them?
December 14, 2009 at 10:14 pm
You know, I’ve played Metroid many times, and I recognize that the area to the left forces you to use the item you just got to escape (as do many such areas in Metroid games, and Zelda too) but it never crossed my mind that they put the morph tunnel immediately to the right to force you to learn that you can go left.
December 14, 2009 at 10:22 pm
Another interesting read is how the first level of Super Mario Bros works as a tutorial. Also, game designer Dan Cook’s talk about Princess-Rescuing Applications.
Personally, I think it would be quite difficult to design a gamelike “self-guided discovery” into an application, if only because when somebody sits down to play a game, they’re implicitly accepting that they want to be challenged, and presented with arbitrary tasks that have little to no relevance to their (non-gaming) life. On the other hand, if Firefox asked me to Collect the Four Elemental Crystals or Star Pieces or whatever before I could search for a bookmark, I’d be pretty annoyed.
December 14, 2009 at 10:53 pm
Gijs wrote:
All four of those are excellent candidates for tutorials. I’d add: doing searches in the search bar; using tabs; finding add-ons you want; subscribing to an RSS feed; signing up for web-based email; leaving a comment on a blog… etc.
December 14, 2009 at 11:29 pm
If the first-run-/what’s-new-page was spread over multiple tabs (e.g. have both a “what’s new” and a “getting started” page) the user would have seen tabs.
December 14, 2009 at 11:34 pm
This page is sort of like a tutorial to install NoScript:
http://home.comcast.net/~wolfand/ (WARNING: Very annoying. Recommend Chrome for viewing since it can stop the annoyance.)
December 15, 2009 at 12:31 am
You’d have to give people tasks you hope they would want to do (which is a given in a game), and then guide them how to accomplish. That works for things *on* a web page like a login box, but not so well for the chrome *around* a page.
You could make a treasure hunt to get things off pages on the web. I can’t think what the things are, maybe just words you fill in a box.
* Ctrl-F and type some word to find a special rollover that takes you to the next page.
* Web search to find some other unique page (which would immediately be hijacked by spammers unless the user appended “site:mozilla.org”)
* Use the back button to return to the original page and enter the “magic words” you found.
* Ummmm…
But for things like quicksearch terms ( http://en.wikipedia.org/wiki/%s is my life!!) or opening links in tabs that make using a browser more efficient and pleasant, I can’t see a better way then bite-sized tutorial pieces. Note that mozilla.org doesn’t show up in searches for “learn Firefox” or “Firefox tutorial”!!). What’s missing is a watcher that notices “You seem to keep clicking on the tab one over, did you know pressing Ctrl+Tab is a keyboard shortcut for that?” or “You seem to keep going back to getmesomeporno.com and using its search box, did you know you can make a quicksearch for it?” That watcher is Clippy redux and has a bad smell, and as the second example shows, sometimes people don’t want to feel their software is watching them.
mozilla.org should have a firefox tutorial that uses simple client-side storage to remember which bite-sized tutorial pieces you’ve gone through. Get all 6 red coins and 50 gold coins and it plays a happy tune and shows a video.
December 15, 2009 at 3:07 am
I came here to post about the exact presentation that Lost Garden linked: Princess-Rescuing Applications. It’s a very well done presentation that talks exactly about the ideas you pointed here. He even compares the experience in Nintendo games to some websites.
December 16, 2009 at 1:59 am
I think that the software UX equivalent of a Metroid “tutorial” is animations in the UI that teaches the user 1) what a feature does and 2) how to use it.
A Firefox example could be the following: upon clicking a link _for the first time_ that would normally open a new window, the link could flash/blink, followed by a slow, smooth tab opening in the tab strip, prominently indicating #1 and #2 above.
The initial animation could be slower than the normal animation speed, but I also think that animations in general help users understand the connection between UI and functionality. By sliding a tab open rather than just instantly showing it, it becomes much more obvious to a user what’s going on. We currently do no such things in our UI aside from how the notification bar appears.
December 16, 2009 at 8:56 pm
The entire first half of the game Portal (what, initially, appears to be the entire game) is a craftily-setup method to teach you the skills you need to beat the second half, that you didn’t even know there was going to be.
Be like that. But as, y’know, a browser. 😉
December 16, 2009 at 10:25 pm
[…] main Mario en deux écrans seulement et on jouait. Quel éditeur de jeu aujourd’hui oserait commencer comme Metroid en forçant le joueur à trouver la marche à suivre tout seul ? Michel Valdrighi | 23:25 | […]
December 26, 2009 at 1:45 pm
I’m with David here. Animations are key to let people understand what’s going on. Apple does it all the time, with Expose, the doc, spaces, minimized windows etc. and especially on the iPhone. Everything on the iPhone just flows, the UI feels so liquid. And that’s completely in line with our everyday experiences. The real world doesn’t jump, changes are always gradual.
January 13, 2010 at 5:17 pm
Metroid was a great game, very playable compaered to what was available then. Thanks for the trip down memory lane, great posts
February 18, 2010 at 3:19 am
[…] there was ever something like a video-game tutorial level for the Internet, then reading URLs surely ought to be one of the skills that the “player” needs to […]
February 19, 2010 at 8:13 pm
[…] there was ever something like a video-game tutorial level for the Internet, then reading URLs surely ought to be one of the skills that the “player” needs to master […]
March 2, 2010 at 5:33 pm
[…] as a follow-up to the “Facebook login Quandry“. Also by the same author: A tutorial level for the internet. He uses Metroid as an example, so I am bound by law to link to it. (Via Shawn […]
September 3, 2011 at 12:49 pm
Nice attempt
You could make a treasure hunt to get things off pages on the web. I can’t think what the things are, maybe just words you fill in a box.