How can I build a tutorial for my web site that is as good as a video games tutorial?

Question

I was just playing "Restaurant Empire 2" and it has a pretty complex interface for a video game in which you are basically running a restaurant with tons of sub-menus and complex controls. That video game is more complex than 99% of websites I've seen and used and is probably as complex as most of the software a person running a real restaurant might use (the stakes are obviously lower than a real business). But they have an amazing tutorial video that you walk through as you play through the game's first few stages that teaches you how to use the interface with videos and a hand holding tutorial.

What software packages and examples can I follow to build a tutorial as good as that for my web application? I've made a lot of tutorial videos which are a good start, but the problem with a tutorial video is that the video doesn't keep track of the user as he follows along with the video to check if the user is clicking on the right buttons. So I want a tutorial for my website that uses html/css/jquery that is as good as the tutorials for any complex video game. I want to use snippets of video walking people through an action, but then I want to show the actual web application to the user and have them follow along the tutorial and perform a simple action along with the tutorial.

---

Edit:

I'm not talking about just making a screencast video (making a good screencast is an art form itself.) I want to build an interactive learning game tutorial for my website using html/css/jquery where the user follows along with a video to use the actual website.

Answer 1

The example you can follow is, actually, games. But even there, a lot of them don't do all that well. Still, playing a lot of them, especially the demos, for a little while will probably teach you a fair bit, especially if you're not a gamer. The important thing to pick up might be the feeling of being a novice.

I suppose the main thing I notice about any good learning system is that it feeds you things piece by piece[1], in small quantities. Open up a bit of functionality, give the user a chance to practice it and get used to it, and then introduce the next bit.

[1]: I'm already lying; this works for things where I'm not very familiar with the general concepts. I'm not sure at all that the Emacs tutorial works this way, but I loved it, being an experienced user of vi and knowing all the wonderful and powerful things an editor should do.

Answer 2

If your web app needs a tutorial you need to re-work your UI. Start with Don't Make Me Think. Most video games need to take the same advice.

Answer 3

It seems like, if you use javascript, HTML, and CSS on top of your application, you would bloat your code. You might need to have a separate tutorial interface.

If I was doing this I would copy the application interface into a Flash application. Flash handles timelines for you, so you can have the video play between interactive sections. You can start with a screenshot of your application and put hotspots on the areas the user is supposed to click in each part of the turorial, and show appropriate hints. You can also have a single file that is smaller in filesize than a video by animating a cursor image over a static background, instead of having a full-motion video (even though it would be compressed).

You can also look into Silverlight. I have looked at it in Visual Studio, and not with Expression Builder. It doesn't seem to have timelines in the same way. (Has storyboards, but I don't know much about them, so I can't really comment)

Answer 4

37Signals has written a fair amount about the "Blank Slate" (at this point, I can only include that one link) -- but going further with a real interactive intro is a great idea.

I assume you're using some dynamic application where you can associate data with user accounts. You can associate a boolean variable with each user that will indicate if they are in the walkthrough or not. Then you can add more granular data about what tasks have been completed (stored in a cookie, the database, wherever makes sense).

You can develop a new set of jquery methods for each page in the walkthrough. They might include an initial popup with instructions, hooks that check the database to see if an action has been completed, actions after submit buttons have been clicked, and functions to set parts of the tutorial as completed.

To be clear, these wouldn't be separate tutorial pages -- instead, your system would include the tutorial scripts on the normal application pages based on the status of the tutorials on/off and progress variables. So the user would be interacting with the application, and the help would appear in the real context.

For example, in a basic blogging application, the first task after logging in might be to "Start a new article". On the first page, the user would see a highlighted jquery-generated popup next to the "New article" button with relevant help text. Once jquery detected that the button was pressed, the first help box would fade out, an entry would be changed in the database to indicate the task was complete, and a new context-dependent help box would appear next to the title field ... and so on.

Each action would happen in addition to the normal functioning of the application, so user data would be stored. That way, the user will have examples to look back on once the tutorial is complete ("Oh, that's how I did that!")

Actions could trigger a new movie to load, or the current video to play/pause (perhaps through a Flash trigger)

If the user leaves the page and returns or refreshes, the script would check the database to see what stages were complete, and would resume at the correct point (if that's appropriate for the context)

It's important to allow the user to end the tutorial at any point, or to review past instructions. Also, in tutorials, it's nice to assume that users won't remember everything -- so add reminders of previous information if it becomes relevant again ("Remember, you set the last entry to be a draft. That means it..."), and add an option to revisit any topic at any time.

Answer 5

I think you're just going to have to roll your own.

Answer 6

A Word of caution

I admire your intentions. Some questions to consider:

• If you create an actual video, with sound, will you have to re-record/edit it every time you make a change to the site?
• Will it cause users with slower connections to wait, thereby making them feel frustrated instead of empowered?
• Will it be easy to skip for people who want to? If so, is your application simple enough to figure out without a tutorial?

Answer 7

I like the way this interactive Ruby tutorial works (type help to start). It responds quickly to your actions, and offers humorous encouragement at each step.

Update 9-9-2009: The linked tutorial was made by why the lucky stiff, and was taken down at the same time as the rest of his web presence. Sadness. :(

Answer 8

I just read this presentation (PDF Warning), and it opened my eyes a bit:

Mixing Games and Applications

The gist of it is that maybe instead of focusing on one tutorial or a help file that no one reads, we should all be building exploratory learning into our apps. The cool thing is that Stack Overflow is actually an example of this (take a look at the badge system).

Answer 9

I think that the best way to imitate videogames in this case is to emulate the skill/level progression and the abilities of the RPG games.

If you have a site with some basic functionality and a lot of advanced features, you should only show the more basic actions at the first time. When the user has used this basic functionality you can show him another more complex possible actions, as if he had learnt a new skill or ability. You can also organize the functionalities in "levels" or "technological progress trees", and increase the number of activated actions when the user has practised enough with the more basic actions.

Think that this should be also the natural way of implement a tutorial system. Imagine a site where you can upload, organize and edit your photos. What are some possible actions?

• Upload photo
• Remove photo
• Create collection
• Remove collection
• Share collection
• Add photo to collection
• Fix saturation
• Some other advanced feature

Does it make sense to saturate the user with the most advanced features if he doesn't know how to upload a photo? So what should we show to a very novice user? Only the most basic feature.

• Upload photo.

An this is not only the most basic, it's also the most required because you have to upload photos to do something with them. The others options should't appear at all, don't think in grey them out. When the user is an expert uploading photos he has reached level 2! You can show him some other options, highlight them if you want. In this case, you can offer the user, for example:

• Remove photo
• Create collection

Once the user has created a collection, he can:

• Add photo to collection

When he have uploaded some other photos you can give him the "ability" to:

• Fix saturation
• Some other advanced feature

And if he have played for a while with collections, you can show him that he can do more things with them as:

• Remove collection
• Share collection

At the end you will have a nice learning curve as RPG games should have, only using the logical progression of skills and giving the user time enough to play with each new discovered feature.

Answer 10

I'd look into using some business process management library such as Jboss' JBPM. This is what I'm planning to use for exactly this sort of thing on my site.

A tutorial is essentially a process definition with a number of nodes for each tutorial step. Once the user completes the action at the current node, the process instance for that user is progressed to the next node until they have finished the tutorial and the process is ended.

You can also also persist the process details to a db so that the user doesn't need to complete the tutorial in one sitting.

If you want to know more about this, let me know and I'll post some examples.

Answer 11

I must agree with the other posters that you shouldn't necessarily be looking for some "software package" that would allow you to build a tutorial, but instead build that tutorial into the web site itself.

Shae's Mixing Games and Applications (PDF) link is great. In that you can see over and over again that the user is presented with a goal, and some metric giving him feedback on how close he is to the goal. Notice the failure of Yahoo Mail... The user's goal is to actually use the application, while clicking the next button as fast as possible gets him to his goal as fast as possible.

Matt's 37Signals Blank Slate link is great as well. In that you can see that the "tutorial," for that particular part of the website, is simply an arrow pointing to the list of tools with a wee bit of text. And naturally, that "tutorial" is only going to appear when a new page is created. And look at the subtle way that the goal is implied... The text says "Use these links to fill your page." Right there, the implication is that your page is empty, giving you ownership of your own experience, and telling you that you are 0% complete. And then, the web site points you to the tools to accomplish your goal. It doesn't tell you how to accomplish it, just points you to potential next steps.

The best game intro tutorial I have ever seen to date is in Braid (XBox 360). You start up the game (from the XBox 360 Arcade), and when the game loads, there's no menu, no start button, no intro video... The game itself has actually already started. As you progess, there are subtle promptings about what you are supposed to do. Throughout the entire game, the creator never assumed you to be stupid, but gave you the minimal information you would need to take the next step. And part of why that information can be minimal is that the game has unlimited undo. Infinitely small step, unlimited undo. Check out the video in the link above if you've never played the game.

So I don't mean to discourage you from creating this fantastic tutorial video, or Flash / Silverlight walkthrough of your entire site, but I hope I added to the conversation. I've never played Restaurant Empire 2, but I've played plenty of other games, and I think we developers do have a lot to learn from games -- those developers eat or starve based on whether the application is enjoyable to learn and experience and win.

Answer 12

Take a look at this site. It gives instructions using HTML/CSS like you asked and also continues the tour by going to subsequent pages.

Answer 13

You can make an interactive tour on the real site, it can be possible with jquery queue, by defining a floating div with a mouse cursor image in it and animating it on your site by triggering events on necessary fields when hovering (eventually showing tooltips for explanation).

Like this guys did on lmgtfy.com, they have used this approach for a funny use case but you can achieve a nice tutorial with this.