Guided tour advice

Use these tips to help you create effective guided tours.

Note: The Guided Tour Designer is only available in UI16. The designer is not compatible with UI15. For more information, see Activate UI16.

Planning the guided tour

Before you begin outlining the details of a guided tour, answer the following questions.
  • What is the purpose of the tour? Do you want to show the features of a UI page with descriptive callouts? Or do you want the user to learn how to perform a task? It is important to be clear before you begin to outline so you can properly break down the steps.
  • What assumptions are you making regarding what the user already knows about the page or task? Do all users who can take the tour have the same level of understanding? Use this information to decide how much description to provide at the beginning so that any user who takes the tour understands the content.
  • If the purpose of the tour is to perform a task, how can you personalize the instructions so that each user who takes it creates a different record? For example, if the tour walks the user through creating a group called Facilities, the first user creates the record and the subsequent users get a duplicate name error.

Selecting triggers

If the purpose of the tour is to describe the features of a page, such as a custom dashboard, then the appropriate trigger is the Next button. If the purpose is to accomplish a task, such as creating a record, keep the following considerations in mind.
  • To populate a field with a lookup element, such as a reference field or a date field, do not use a trigger that opens the lookup window. The tour ends when the lookup window opens. Use one of the following triggers.
    • Next button: The user can type the value or look it up and select it, and then click Next.
    • Change Element Value trigger: After the user selects the value and clicks outside the field, the trigger moves to the next step.
  • For some UI elements, the Right click the Element trigger is available. Typically, the right-click action is used to open a menu, however, you cannot place a callout on a right-click menu option. You can use this trigger in a descriptive guided tour where you want to describe right-click menu options. Put the descriptive information into the callout text, and at the end, tell them to right-click the element to look at the menu. Following is an example of this type of callout.
    Figure 1. Example callout instruction for a right-click menu
    Example callout instructing the user to right-click to see field label options

    When the user right-clicks, this instruction disappears, and the next one appears.

  • The Mouse over the Element trigger is similar. When the user points to the element, the callout disappears. For example, if you demonstrate that a hint appears when you point to a field label, the callout step disappears before the hint text appears. This can seem disruptive to the guided tour flow.

Callout placement

A callout must be placed on top of an element to interact with it. The element is highlighted in blue when it is selected as the target. In the following example, it looks like the callout is pointing to the context menu icon, but notice that the header bar is highlighted blue.

Figure 2. Incorrect callout placement for the context menu
Wrong placement of the callout

This example depicts the correct placement of the callout for the context menu. Notice that the context menu icon is highlighted blue.

Figure 3. Correct callout placement for the context menu
Correct placement of the callout

Resources

The Guided Tour Designer uses the Hopscotch framework. A developer familiar with Hopscotch can use the step options to configure additional functionality in guided tours. The options must be in JSON format. ServiceNow customer support can only assist with the functions included in the base system.