Guided tour

A guided tour is a walkthrough of your web product or software that your users go through to learn its functions and how it is used. This tour is optional and is offered as a helpful tool but can be skipped as well as revisited later on.

Usage

When to use

Use a guided tour in the following cases:

  • To guide users and learn the holistic sequence of their workflow steps.
  • To let users gain overview of the available apps and their functions.
  • To let users understand the potential value for their business by the end of a tour.

General rules

  • Tours should be short, clear and convey a specific goal. The ideal complexity of a tour should not exceed 12-15 steps.
  • Tours must demonstrate customer value and therefor contain concise descriptions.
  • Tours should deliver a logical flow.
  • Tours should be designed solely from the users perspective.
  • Tours have to motivate users to continue exploring other tours.
  • Tours shall be as precise and short as possible but still considering all options a user can chose from.

Content

Use the following information to set up your tour:

Define the first step of the tour

  • Which content does the user expect with which goal in mind? Which sections does the user get guided through?
  • Which previous tours / actions are necessary to carry out the tour (e.g. creating data)?

Define all steps of the tour

  • Which steps does the user take to reach the goal?
  • Keep in mind: Each tour should not be longer than ca. 10 minutes / 12-15 steps.
  • Start, success and end steps are not counted as steps and therefore do not have to be considered in the step counter.

Which trigger navigates to the next step?

There are two different triggers:

  1. User clicks the selected element.
  2. If there is no element to click or the action takes place on a different device, a button is used to navigate forward.

Define success moments within the tour

  • Which sections of the tour should be celebrated after reaching it?
  • Use celebrations when users have created value or finished performing a step.
  • Celebrations help to highlight user achievement and act as incentives.

Define the last step of the tour

  • What goal did the user achieve with completing the tour?
  • What added value did the user have?
  • What tours should be done next to build on what has been learned?
  • What added value does the experience create for business in the users own world?
  • Where can the user get more detailed information on the topic / tool of the tour?

Have a final check of the tour steps

  • Can the number of steps be reduced?
  • Are all tour steps aligned with targeted persona needs and communication goals?
  • Check that users will remain engaged and recognize value creation.

Important

There is additional information regarding the creation, structure and tonality for 'Guided tour' available for Siemens internal use.

Show additional 'guided tour' documentation

Tour

  • Use visuals to support the journey.
  • Visuals should simplify background complexity or consolidate information.

Guided Tour: Usage

Construction of a guided tour popover with an optional image

Guided Tour: Usage

Construction of a guided tour popover without image
  1. Key information about impact phrased as call to action (mandatory).
    • Define concrete action phrased as call to action or a description of what is shown to the user.
    • A maximum of 50 characters is recommended e.g. “Click View your assets”.
  2. More in-depth information on what to expect or what’s important to know (optional).
    • A maximum of 150 characters is recommended e.g. “Find all your assets in the asset overview”.
  3. Arrow indicator shows where the popover is relating to.
  4. Show progress (mandatory).
  5. Allow user to navigate.
    • A maximum of 15 characters is recommended, e.g. “Next”.
    • “Back” moves one step back.
    • Don’t use more then two buttons.
    • If a task is the desired goal for a step, e.g. clicking a button in the UI, don’t use redundant navigation buttons.
  6. Header with image (optional)
    • Support the message by visualizing the action.
  7. Allow the user to exit the tour.

Tour beginning

  • An entry screen gives a brief overview of what the user can expect from the tour.
  • Previous tours / actions which are necessary to carry out the tour (e.g. creating data) are named on the entry screen and a link to the tours is offered.

Guided Tour: Tour beginning

Tour success

  • Celebrate after completion of intermediate steps to motivate the user to complete all steps and provide a feeling of progress.
  • Celebrate at the end of the tour to give a feeling of achievement.

Guided Tour: Tour success

Guided Tour: Tour success

Tour ending

  • The end screen defines the end of a tour.

Guided Tour: Tour end

  1. Textually highlight the tour completion.
  2. Visually highlight the successful tour completion.
  3. Offer link(s) to next tour(s).
  4. Offer links to community and documentation for further information.
  5. Allow the user to exit the tour.
  6. Offer additional value to apply in your user’s real world context: “How to apply this to your own business”?
  7. Give a recap and outlook on the next tour(s).
  8. Allow your user to exit the tour.

Behavior

The tour popover can be displayed above, below, left, or right of an element. The position of the tour popover should adjust automatically based on where the element is on the screen.

The arrow can be placed freely along every edge to accommodate optimal positioning of the popover.

Guided Tour: Tour behaviour, arrow placement

Guided tour popovers can be opened in any direction.

Guided Tour: Tour behaviour, arrow placement

The position of the popover can be placed along every edge.

Style

This chapter shows several guided tour styles in the design system:

Guided Tour: Style of tour popover

Tour popover with one button

Guided Tour: Style of tour popover

Tour popover with one button and optional graphic

Guided Tour: Style of tour popover

Tour popover with two buttons

Guided Tour: Style of tour success dialog

Tour success dialog with more steps

Guided Tour: Style of tour dialog

Tour dialog

Typography

The following table gives reference to the different font sizes and weights:

NameFont-familyFont-sizeLine-heightText-alignment
Tour dialog titleSiemens Sans Roman21px29pxleft
Tour dialog paragraphSiemens Sans Roman14px20pxleft
Tour popover key informationSiemens Sans Bold14px16pxleft
Tour popover in-depth informationSiemens Sans Roman12px16pxleft

Sizing and spacing

Guided Tour: Sizing and spacing of tour popovers

Guided Tour: Sizing and spacing of tour popovers

Guided Tour: Sizing and spacing of tour popovers

Guided Tour: Sizing and spacing of tour popovers

Except where otherwise noted, content on this site is licensed under the MindSphere Development License Agreement.
Back to top