Tutorial Mode
mario September 23rd, 2011
Cheryl Platz (writer of the excellent blog twenty-sided woman which you should all be reading on a regular basis WHY DON’T YOU GET ON THAT) wrote a post today describing the antiquated state of iconography in user interfaces that got me into a UX sort of mindset. She describes how Windows is moving away from such abstracts, preferring more straightforward tiles containing text descriptions. But I started thinking about another source of iconographic inspiration that I think she and the rest of you might find interesting…
Even in the most modern of word processors and spreadsheet editors, most of the button interaction is represented by vague analog metaphors. The last time I interacted with a floppy disk, I was using them as coasters for a Hackers-themed movie night! (long story short, you missed out) And as Cheryl mentioned, clipboards aren’t an obvious analogy for applying duplicated information, so why did it become the standard for something as frequently evoked as “Paste”? Microsoft’s solution, as outlined in their previews for Windows 8’s Metro UI, is to replace those tiny icons with large, touchable rectangles detailing the contents of each application and service. Go ahead and watch the video:
https://youtu.be/p92QfWOw88I
Not too shabby! Metro looks very touch control-friendly and the icons clearly communicate their purpose. But I want to take another brief look at the tiny icons that have served us in the pre-post-PC world and think of another way to utilize them:
A video game-style tutorial mode.
Video games have been trying to deal with relating digital actions to real world analogs for at least as long as productivity applications. In fact, games have it a lot tougher: while you may perform tasks somewhat resembling saving and cut/copy/pasting in everyday life, you’re far less likely to find yourself, say, controlling the actions of a hapless family of avatars as they seek out lives and careers.
A game has to get the player familiar with a wholly alien interface in a very short period of time if it wants to keep said player engaged. As technology advances and games increase their capabilities, control schemes necessarily become more complex. Soon a large portion of the screen is devoted to complicated button layouts, and there isn’t always space for textual descriptions explaining the functions. Let’s look at this screenshot from The Sims 2 (click to enlarge):
See that dial on the bottom-left corner? It’s loaded to the brim with icons attempting to communicate functionality with simple pictographs. And you know what? It’s not always succeeding. From my past experiences with other user interfaces and societal conventions, I can probably figure out a few of these buttons; the plus/minus and curved arrow look like they could be related to camera controls, the sun/leaf/snowflake/tulip pictures presumably correspond to the seasons. Random clicking will probably yield more information about the other controls.
But what if I’m not the type of game player that wants to take risks by random clicking? Or going back to the original point, what if I’ve just finished typing up my very first Microsoft Word document, and I don’t inherently know that a picture of thirty year-old data storage technology that most computers don’t even support anymore represents the action of saving my work? Am I expected to click wantonly until the desired result is obtained?
How, then, do video games overcome this problem? Since their inception, most games come with instruction manuals detailing how to perform all the actions you need to get started, but who in the Word or Sims scenarios really reads a manual? No, the real way for a game to instruct on these behaviors is with a guided, in-game tutorial. Almost every modern game has the ubiquitous “tutorial mode”, handholding the player as it painstakingly describes each essential button and refusing to proceed until we apply their instructions and repeat the stated actions. The game teaches you what a mouse click does, then patiently waits for you to click that mouse button.
What would users think if Microsoft Word 2012 came with a tutorial mode? Before you write your Great American Novel, out comes Clippy with a mandatory walkthrough describing the functions of all the most commonly-used buttons on the toolbar. Users would painstakingly be guided through the concepts of copying and pasting, of right-justification, of embedding hyperlinks. Every person that ever used Word would have this shared educational experience (unskippable, of course), giving all users a much-improved baseline of knowledge and self-sufficiency.
At this point, it wouldn’t matter what we put on the icons. The floppy disk becomes no more useful a graphical representation than a National Geographic photo of a panda chewing on bamboo. It would be a wonderful opportunity to immediately phase out all this outmoded imagery and replace it with more interesting and timeless abstractions. Since everyone did the tutorial, the panda button would be a self-evident representation of saving our work. Clippy said so in the walkthrough. By applying a button’s function within the context of the action, we effectively remove the abstractness from the abstraction.
It should be noted that this is actually a terrible idea. But if some up-and-coming developer implemented something like this in his indie word processor, I’d certainly give the tutorial level a go.
Tutorials are great. Mandatory tutorials are not. I’m the type of person who enjoys resetting their save file every now and again, and on games with long and boring intro sections, this just becomes work and kills my interest in continuing.
I can imagine the same annoyance with a Word Processor. You’ve tried the tutorial once, learned the controls, and all is merry for a few months. Then you get a new computer, or reformat the hard drive, or just go to your grandmother’s house where she has clearly never opened Word. Now you have to sit through the mandatory tutorial again, instead of starting on that paper you put off working on until an hour before the due date.