What is the best practice for an interactive tutorial?

Question

I am working on implementing an interactive tutorial that shows users how to use different products on a website. Many users of the site do not have advanced computer or internet skills, so the tutorial will be as basic as "Step 1: Click here to XYZ".

First I am considering how users will be able to find the tutorial on each page/product of the site, so they can always open it if they've not used the product for some time. I will obviously include a function that starts the tutorial if it's the first time they have viewed the product/page, as well as include a skip or close button should they want to try and figure it out themselves.

Should the modals of the tutorial be fixed or move around to be next to where the user has to click, or should I just make the button they have to click glow or something like that to grab their attention?

Is there a naming convention that is universally understood, apart from "help" for the button to launch the tutorial at any time?

Any advice would be appreciated.

Answer 1

Many computer games teach the player and provide seamless tutorials to show the user how to play the game. For example, in many games you will initially be shown how to perform certain tasks, like:

• what keys to press and in what sequence, where the game will show the result if you get it right
• flashing on an icon or menu, which then animates to reveal the sub menu, to show you how to interact with it

These tutorial mechanism are part of the onboarding game mechanic.

http://www.igamify.com/category/toolkit-gamification-game-mechanics-onboarding-design-game-mechanics

We’re going to talk about Onboarding and the game mechanic called Onboarding. What is it? How the player acquires the necessary skills, knowledge, and behaviors to become effective.

This can be in the form of tutorials, orientation, or a help section, but it’s more than that. Think of how you’re actually navigating users through your entire experience and how you’re providing them help when they need it, how they need it, in bite-size chunks. Because we all know, nobody’s going to read the help menu or the workbook that goes with the program, they’re going to just start pulling stuff out and start playing with your website.

Translating what the gaming industry has been doing for many decades, to other types of software can be challenging, yet you see more and more non-gaming software making very good seamless onboarding concepts. As an example, check out how LinkedIn brings users up to speed without showing a tutorial that they need to watch and read.

Onboarding game mechanics can be expensive, time consuming and challenging to build and get right, but when you get it right, your users will be delighted.

Answer 2

In our product we use a plugin called Hopskotch. They use the phrase 'Tour', which feels appropriate, as it is more focused on showing you around and seeing the sights, which has more positive connotations than 'Tutorial', which feels more like a chore that you need to get done.

We auto-launch the tour on first visit, which you can then follow or dismiss. there is a nice big button fixed to the bottom right of the screen, called 'Tour', with a little signpost icon, should users wish to pick up where they left off at a time of their choosing.

Getting the steps of the tour right is a bit of an art, but testing with users can help refine this. Also, you need to consider if the tour is going to be pointing to elements that are hidden, etc.

Hope that helps.

Answer 3

I would recommend a tutorial which will display a window with an arrow next to a specific element and describe what it does. This will make it easier for the user to find the option they are looking for.

In terms of the button for launching the tutorial, you can simply name it View tutorial and place it in a visible place (but not in the main menu).