1

Nowadays many great technologies exist for creating a 'live' tutorial or tour in a website or any other application (Example). You can practically walk the user through the application.

What guidelines or recommendations actually exist for these tours? Specifically, I am looking for guidelines related to the tour / tutorial itself. Not guidelines related to when to show the tour.

I know this question is very generic, but surprisingly it is hard to find anything about it (at least on Stack UX).

  • The main guideline is to avoid them at all costs. For if you need a video tutorial to explain your UI, perhaps your UI need some rethinking. – DA01 Mar 1 '14 at 15:57
3

I think you have several options depending on what your website/application is and does. Depending on your web application, you can implement sandboxing or a tutorial.

Sandbox

If your application is intended for users to fiddle around, then probably the best way to teach users how to use your application is by creating a safe environment that they can play, experiment and try stuff without losing data. Below are a list of applications that let you do this:

Balsamiq, jsfiddle, repl.it, regexpal

Benefits

There are several benefits in implementing a sandbox. You won't need do list all your product features in your website, since it will be easier for users to test your application instead of reading about it. Since you are creating a safe environment, you are creating opportunities for learning.

Drawbacks

Since this is basically an exploratory process, you might need additional effort to ensure that users really learn what you intended, instead of wasting time just exploring.

Tutorial

There are several ways to implement a tutorial. Nowadays at least for mobile apps there seem to be two different patterns (walk though, coach marks). Although different in implementation, these patterns follow the same principle.

When the user enters the application for the first time, or when a specific even occurs (like using a feature for the first time), instructions are displayed in context.

Benefits

This allows you present contextual help. So users will get the information where they need it.

When To Use

If your product is web-based and you want to allow potential customers to try at will your product.

Drawbacks

Users might want to explore instead of learn, so they might dismiss the tutorial. At a later time they might need to get that information, but will not be able to trigger it.

When to Use

If you have an application that is complex enough, that it takes some instructions for users to learn how to use it. Don't add a tutorial to your application just because it looks nice. If you feel that you need to add a tutorial, blame yourself for not being able to develop an easy to use application, and you needed to add a tutorial to teach your users how to use the application.

1

'Traditional' webpages follow the transactional model.

  • searching for cheese
  • buying a book
  • booking a hotel room

As web technologies have advanced, experiences are being created where the users transaction is very broad (e.g. tutorial on learning how to use a website) and they move towards the imersive model.

Some principles to follow:

Visibility of system status

So they always understand what their current task is in relation to, and don't feel 'stuck' in your system. This is often implemented as a breadcrumb (e.g. amazons shoping cart: stage 2/4). Let your user know they're making progress through your tutorial.

User control and freedom

The user shouldn't feel restrained by the steps in your tutorial and could go back, skip forward, or most importantly exit.

Reduce uncertainty, Error prevention, & Help and documentation

If you're creating a tutorial for a website, it's important the user knows what thy're doing is in a bubble environment, and not the actual site itself. Give them clear information so that they know what to do and how to use the tutorial.

Limit data-driven tasks

You want the user to learn the system, not use it. If you have forms or anything similar, just have a basic selection or minimal entry example - you want them to learn the system not use it at this stage.

Ref: Nielsen, J. (1994). Heuristic evaluation. In Nielsen, J., and Mack, R.L. (Eds.), Usability Inspection Methods, John Wiley & Sons, New York, NY

  • Are you essentially saying that the tour or tutorial should be on some kind of demo environment? – Sebazzz Jan 30 '14 at 11:05
  • 1
    As the user's learning, then a sandbox environment wouldn't be a bad idea, depends what they're learning. More important is the information/feedback they receive so they know they are or aren't in a demo environment. – S.. Jan 30 '14 at 11:08
1

Guided tours are great for 2 things:

  • Introducing/Celebrating new features
  • Temporarily assisting users with a difficult task until the UX can be repaired

That in mind...

Don't sit on the fence with the presentation.

Go BIG and go BOLD. Don't worry about disrupting users, this feature is come one come all! If your tour is just subtle enough not to "annoy" non-interested users, it will be missed by the users who may find it valuable.

Measure success

Define and measure success of a task or feature before the tour is launched. This will help you better better shape the UX with the next release.

Make aborting easy

Don't expect users to know they can click outside the tour area to close it. Use explicit instructions near an icon that supports the close action. Most users will go through a few steps and want to exit before the tour is over.

Hope this was helpful!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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