Designing interactive online tutorials

It is hard to find models of tutorials that enable the user to learn actively, or better still, interactively. I suspect that marvellous tutorials exist, but are hidden away on university intranets.

With new technology like Flash, the tutorial now has exciting options for interactivity—but beware! A search for good examples revealed many tutorials that just didn't work. Fields that didn't appear. Checkboxes that didn't check. Flash that didn't flash.

Take a look at how other educators are taking advantage of the glories of the Web. Note that tutorials are not the preserve of universities: they're appropriate content for many a commercial site.

top of page

Classic simplicity
Mulder's stylesheets tutorial for Webmonkey is deceptively simple. Interactivity is limited to navigation, which is oh so easy. Instruction is clear, and the tone is friendly and relaxed. This is the tutorial you consult as you work with stylesheets in another window. An excellent low-tech model, and harder to emulate than it looks.

http://hotwired.lycos.com/webmonkey/authoring/stylesheets/tutorials/tutorial1.html

top of page

Demonstrations
Scientific topics seem dominate the truly interactive tutorials on view right now. (It figures.)

My favourite: the simple, fast and clear tutorials of the International Sports Science Association. Example: pictures of leg muscles front and side. Click on a term (say, Gluteus Maximus) and that item is labelled and coloured. Click on Quiz Yourself, and you're told, "When a muscle name comes up, click on the correct muscle." And so forth. Truly interactive, and not desperately complex.

www.issaonline.com/courses/cft/interactive_tutorial/interactive_tutorial.cfm

I found some more interactive tutorials online... but a few months later, they had been moved or removed.

top of page

http://www.davesite.com/webstation/html/chap02.shtml

Demo by movie
Here's a cute trick. Miraz Jordan supplements her short and snappy Mac tips with little movies. Check them out if you have a Mac.

http://www.firstbite.co.nz/movies/

top of page

http://www.unn.ac.uk/~egkh1/mchoice/Introduction%20to%20regulation/mcquestions.htm

top of page

Just trying harder
You get bored to sobs with Power Point templates, right? Andrew Smith has simply tried harder with "slides", creating an original and successful tutorial. The topic is APT: Accelerated Planning Technique for business planning made simple. The tutorial keeps you involved with visual variety, steady progress through the argument, information presented in digestible morsels.

http://www.apt.co.nz/intro/010_~Pre.htm

top of page

Three cheers for eye candy
When the University of Illinois Extension made the Great Plant Escape tutorial for kids, they made it cute and colourful. (Realistically, the assignments don't happen online: grow a lettuce, make a salad, do a print-out crossword.)

http://www.urbanext.uiuc.edu/gpe/gpe.html

Useful content and never mind the look
Maybe this is the university way. In the Tutorial on Evaluating Web Pages from the University of California, Berkeley, the design is klunky, and the printout sheet is fiddly and hard to follow. Why must it be this way?

http://www.lib.berkeley.edu/TeachingLib/Guides/Internet/Evaluate.html

top of page

"Interactive"? Don't tell fibs
The "interactive" tutorials from Colorado State University Writing Center are text, nothing but text. Paper handouts that strayed to the Web. OK, they have their place, but the only activity required is clicking on next topic. That's the equivalent of turning the page.

http://writing.colostate.edu/tutorial.htm

San Dieguito Art Guild is similarly presumptuous when they call their tutorial on encaustics "interactive". The claim seems to be based on the fact that you can send them an email from that page. Hm.

http://artplaces.com/sdag2/tut-encaustics.php