User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It only takes a minute to sign up.
Sign up to join this community
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).
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.
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
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.
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.
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.
This allows you present contextual help. So users will get the information where they need it.
If your product is web-based and you want to allow potential customers to try at will your product.
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.
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.
'Traditional' webpages follow the transactional model.
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
Guided tours are great for 2 things:
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!
