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.


3 Answers 3


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.


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.

  • I do not think the concept is well transferrable outside of games, and I think LinkedIn is a good example that shows that it does not work very well. The primary issue is that the user does not have a goal that they want to use the game for, the game defines the goal for the user. Therefore, a "training mission" with an "instructor" can work in a game and is indeed enjoyable - even during the second and third re-run. Outside of a gaming concept, however, users typically want to use a software or service to achieve a particular goal, and explanatory popups pointing into other direcitons ... Commented May 2, 2017 at 13:34
  • ... than toward that goal are usually rather annoying. Commented May 2, 2017 at 13:34

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.


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).

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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