The Step Editor is a modal window that is displayed after selecting a page element with the Element selector.
In this window, creators can add a step description and choose how the end-user navigates on specific steps. The step description is what the end-user sees on a step when running the tour. It should describe the current step and help the user understand what she needs to do next.
Step description examples:
- “Click this element/button”
- “Let’s select an option from the dropdown”
- “Check the appropriate setting”
- “Fill in your details”
Optional step
Marking a step as optional allows the tour to automatically skip a step in case the anchor element isn’t found on the page.
We strongly recommend marking a step as optional, whenever dealing with a login barrier. If created properly, the product tours will work properly for both logged-in and non-logged-in users.
Navigation options
When you right-click a page element in order to mark it as a step, the system gives creators the option of choosing how the navigation to the next step will be performed.
Next button navigation
With this option checked, the end-users will have to press the [Next step] button in order to advance in the tour.
When selecting the navigation via Next Step, an extra option, named “Allow element interaction” becomes available. This lets the end-user interact with the element before pressing next. A good use case for using this option is when typing in a text input before going to the next step. By default, this option is off.
If creators want to block the interaction with the step element, they can let the option unchecked. This is useful when recording steps within an onboarding tour that contains links or buttons that might slow down the progress of the tour.
Element click navigation
The alternative way to navigate to the next step is to ask end-users to click a page element. In this case, the [Next step] button will be hidden. This navigation option is useful for Helper-type guides or when you are trying to make a user perform an action on that step, thus developing muscle memory for returning users.
The tour builder will automatically detect the state where the user is, and will keep her informed at all times. In the below picture, the user is currently handling the options for the first step of a product tour.
Helper tour building scenario
Let’s say we want to create a tour that teaches users how to register on the website, and then log in
We plan to have the following steps:
- Fill in the registration form (navigation: next step – element interaction ON)
- Press the [Register] button (navigation: click element), you will be redirected to the login
- Fill in the login information (navigation: next step – element interaction ON)
- Press [Login] button (navigation: click element)