Tutorial implementation example

This example consists of three steps:

../../../../_images/tutorial-example-1-new2.png

These settings has been made for the first step:

../../../../_images/tutorial-example-2-new2.png

and these settings for the second step:

../../../../_images/tutorial-example-3-new2.png

and these for the third:

../../../../_images/tutorial-example-4-new2.png

The tutorial is targeted to the start page and will start automatically:

../../../../_images/tutorial-example-5-new2.png

In the Navigation Bar for the Workspace, for the Business Profile, it has been set that tutorials should be available in the Action Menu. The option is shown where a tutorial is available, but not shown otherwise.

Note! The tutorial must be set up in the action menu to start automatically, as is done in this implementation example.

../../../../_images/tutorial-example-6-new.png

As it is an introduction that should be available for everyone, it’s not targeted.

The user experience

In this example, the tutorial starts automatically the first time the user enters the start page. If a user would like to see the tutorial a second time, it can be started from the Action Menu:

../../../../_images/tutorial-action-menu.png

Or by clicking an Action Button on the start page itself (set up in an Action Button block):

../../../../_images/tutorial-actionbutton.png

The steps will be shown for users this way:

../../../../_images/tutorial-example-7-new.png ../../../../_images/tutorial-example-8-new.png ../../../../_images/tutorial-example-9-new-border.png

Users can navigate the tutorial using the dots or the arrows:

../../../../_images/tutorial-example-10-new.png