Guided Tours

Deliverables / SAP Companion

Guided tours are particularly useful if your user needs step-by-step process assistance with instructions and information for each step.

Guided Tours and Tutorials

It might be difficult to choose which format is the best fit for your project. Both options are used to describe use cases and tell users how to accomplish a task. Both options also help users to understand a UI. The following chart helps you to decide which suits your project best.

Writing Content For Guided Tours

Plan Your Guided Tour

Before you start creating a Guided Tour, make sure you plan it accordingly. The planning sheet might help you to plan and discuss your steps.

You may also consider planning your Guided Tour using visual prototyping tools, like Figma or Microsoft PowerPoint. By using visual prototyping tools, you can better design the interactions and workflow for your Guided Tour.

Writing Guidelines

false

Explain the background or context: Why do I need to do certain steps as a user? What’s the background? What’s the bigger picture?
Tell them if they are doing something right; don't let them guess.
Create only one overview tour. Create one or more How-to Guided Tour.
Use people-centric language.
Take the user literally on a tour with your wording by using conversational language ("Let's" etc.).
Ensure every tour has one start and one end page.
Ensure that the Guided Tour doesn’t take longer than 10 minutes.
Pack only one piece of information into a single step. Do not overload your user with too much information.

dont

false

Don’t use short descriptions.
Avoid words such as above, underneath, below, etc. because you can run into problems when users resize their browser window.
Don't forget to be accessibility friendly.
Don't forget to be careful when adding pictures and graphics: make sure they are the right size and are legible.
Don’t explain self-explanatory items.
Don't create a Guided Tour if users need special permissions for apps or services as they won't be able to complete the tour if they don't have all required permissions.

Title

The title of the Guided Tour appears in the help panel.

Guided Tours are sorted alphabetically - due to technical restraints, there is no possibility to change the order.

false

Start with the verb in the imperative form (get, use. etc.)
Describe a clear use case in the title (not: get started with/basic features/etc.).
Start your sentence with "An Overview..." if you are creating an overview tour for your service.
Capitalize the title of your Guided Tour
Remember the title is restricted to max. 20 characters.

Short Description

Don't use short descriptions for your Guided Tours, as they are displayed neither in the help panel nor in the bubble.

Step Types

Select one of the following step types when assigning hotspots to Guided Tour topics:

This is the first step of the tour. A start button and start icon is displayed.

What to Write:

Choose "Tour Overview" as title.

Address the user and give a quick overview of what awaits them.

Tell the user how long this tour will take: "This tour will take approximately X minutes."

Optional: Inform the user about prerequisites.

Give the following information on how to handle the pop-ups during the tour: "You can move any windows during this Guided Tour if they block your view. Exit the Guided Tour by closing the window. Once you exit the tour, you need to start it from the beginning again.”

Location of Bubble:

Centered - Assign no hotspot.

This is the last step of a Guided Tour. A Finish button and icon is displayed.

What to Write:

You can choose between the following options:

Congratulations: Congratulate the user for having completed the Guided Tour and give a quick summary of what they have learnt.
Next Steps: Congratulate the user for having completed the Guided Tour and help them to continue their learning journey by making suggestions what they could do next.

Location of Bubble:

Centered - Assign no hotspot.

This type indicates that an action has to be performed on the screen. No icon is displayed.

What to Write:

Start your title with an imperative form - what does the user have to do?

Explain why and where the user needs to click to accomplish a step.

Location of Bubble:

Assign a hotspot to the relevant UI element.

Use this type for warnings or important content. An icon is displayed.

What to Write:

Choose "Important" as title.

Tell the user what explicitly not to do or which item on the screen to pay attention to (e.g. “Make sure you’ve saved your entries.” ).

Explain if something that is not obvious happens but don’t repeat the texts on the UI.

Location of Bubble:

Either centered for general information or pointing to the relevant UI element.

Use this type for informative content, such as definitions, concepts, and context. An icon is added to the left.

What to Write:

Explain concepts to your user which they might not be familiar with, e.g. “Subaccount”, “Dev Space”, etc.

Use also to explain to users steps that are happening in the background, i.e. while they are waiting for their instance to be created, when they setup XY, etc.

Location of Bubble:

Either centered for general information or pointing to the relevant UI element.

Use this type for additional information that is nice to have for the user. An icon is added.

What to Write:

In general: please use "information" and try to avoid "note"; if you need to use it, reserve "note" for describing less relevant information.

Location of Bubble:

Either centered for general information or pointing to the relevant UI element.

Use this type for helpful suggestions. An icon is added.

What to Write:

In general: please use "information" and try to avoid "tip"; if you need to use it, reserve "tip" for describing elegant shortcuts or alternatives.

Location of Bubble:

Either centered for general information or pointing to the relevant UI element.

Examples of Guided Tour Steps:

Tour Start

Action

Information

End of Tour

Hotspots

Bubble Properties

The following properties need to be defined for each bubble:

<div> <div>Properties</div> <div>Use</div> </div> <div> <div>Bubble Type</div> <div>The bubble type depends on the step in the Guided Tour.</div> </div> <div> <div>Bubble Orientation</div> <div> <p>Orientation: Use Auto.</p> <p>The orientation of the bubble is relative to the hotspot.</p> <p>The available options are North (above), South (Below), East (to the right), West (to the left), and Auto (automatically determines a suitable location for the bubble so that it is visible).</p> <p>Preview the result. If not suitable, use one of the other orientation values.</p> </div> </div> <div> <div>Bubble Size</div> <div> <p>Use the smallest size in which the content fits nicely, so that both the content is clearly visible and the bubble takes up as little real estate as possible on the screen.</p> <p>The following general guidelines apply:</p> <ul> <li>For shorter texts, use XS or S.</li> <li>For lists and graphics, use M or L.</li> </ul> <p>When editing the hotspot, use the Preview button to check the result to ensure the size is right - as small as possible for the content to fit nicely.</p> </div> </div> <div> <div>Show Bubble Arrow</div> <div>This setting needs to be enabled.</div> </div> <div> <div>Show Title Bar</div> <div>This setting needs to be enabled.</div> </div>