11

Background

My company is starting to do some long overdue work on our online help/tutorial system, and the goal is to make it more lively, integrated, and interactive. We have a large database of medical information, with complex forms and tools for data collection, sharing, and aggregation, and there are a lot things that need explaining. I understand that the best design doesn't need explaining, but unfortunately in our case, there's enough complexity that many things need illustration.

Our current system is a bunch of long-form videos (2-10 minutes each) that explain our tools and forms with basic screen capture videos (mouse movement, clicks, occasional zoom in/out) with a narrator describing what he/she is doing over the top. We've had complaints - not surprisingly - that these longer videos are too long and too bland, and no one wants to sit through them, so that's why there's interest in making the tutorials/help system more interactive and lively.

The proposal

The current proposal is to replace these longer videos with a series of punchy little narrated animations (built with Flash) that describe a single feature in 10-30 seconds. Short, sweet, and hopefully more digestible and interesting. When the user is finished viewing help for one feature, they can either watch the next snippet, or return to working with the tool/form.

It should be noted that budget is a concern here, so keeping this project as simple as possible is a concern. In fact, that's one of the reasons for the "shorter animations" proposal: as site features are tweaked and change over the months and years, we won't need to spend as many resources re-recording full 10-minute videos with updated information/graphics; we can simply update the small animations pertinent to features that have changed.

The question

A few questions have arisen - Are we going in the right direction? Is using Flash to make tutorial animations wise? What DIY video screen capture tools are available for easily building software tutorials on a budget? What about interactive help/tips that are built right into the webpage? - but none of those are particularly appropriate for UX StackExchange.

But I think this question is:

What are some examples of beautiful, well-designed, usable help/tutorials systems that you've seen around the web?

Basically, I'm looking for "help system inspiration". I'm trying to find some examples of both video/animation help integration, and interactive help that's built right into the page - in the latter case, I'm thinking of some of little helper tips that I've seen in a number of places, e.g., Facebook and Gmail have both used little tips to explain new features. I'd love to find an article showcasing a variety of great help/tutorial user experience design options, but I'm open to absolutely anything.

|improve this question
2

This isn't a full answer, rather just a couple tips:

  1. Using flash for tutorial videos is only a good idea if you're absolutely sure the content of each video does not need to be updated periodically, i.e. almost never. Flash is cumbersome to regularly update, and will end up costing you more as you send myriad update requests to your flash programmers. Unfortunately I don't have a good alternative for making animated tutorial content. Rather I would suggest looking into how to make the most of the tools built into learning platforms.

  2. One free open-source learning platform that is worth evaluating is Moodle. It is built like a content management system, so there are user-contributed plugins and tools to do a variety of things. In general it is not super attractive or flashy, though in principle the theming system should allow you to fully customize the appearance. If you take the time to learn how to use its features, you can build a full-featured learning system that is stable, easily updatable, and scalable.

|improve this answer
0

We use Help Console

It's pretty good, and is very easy to edit. We let most users update the documentation, which may sound risky but actually results in clearer, better manuals.

You can also have little tooltips etc in place in the apps, or links to the relevant pages.

|improve this answer
1

What's your UI written with?

One idea I've toyed with a couple of times is using automation (available with WPF and Silverlight for example) to drive the actual UI in tutorial mode. This would either be the actual UI or a "snippet" (for want of a better term) in the help system.

This solves the problem of the tutorial getting out of date if the look and feel of the UI changes, but does mean you have to keep the automation up to date - which should be a less onerous task.

Unfortunately I can't show you any example of this as management decided to go down different routes in each case.

|improve this answer
1

To answer your specific question, Software Smitten has a blog post with a few examples of help systems that are well-designed, with discussions of what works in these systems and what can be done better.

Full disclosure: I'm the author of Software Smitten.

|improve this answer
2

We are just beginning to explore this arena as well for help in our web application. We are looking in to an interesting web-based help system called Klaviyo - it allows you to set up help bubbles contextual to page elements and much more. It looks promising for many reasons, not only in it's usability and features, but also in other side benefits such as not requiring additional browser extensions (e.g. Flash) and working in IE6 (which, depending on your web application requirements, may be a necessary evil). Their homepage starts you off with an example of the "help" tour.

|improve this answer

Not the answer you're looking for? Browse other questions tagged or ask your own question.