JOURNEY STEPS
Journey Steps are bubbles connected to a specific page element that will explain step-by-step a specific process. In order to follow user behavior, they have multiple kinds of transitions that will follow the natural process that will be explained contextually.
ADDING STEPS
Every Journey usually consists in multiple steps. Keep in mind that all of them need to be attached to a specific element of the underlying application in order to properly be displayed.
The following figure shows different scenarios of adding a Step:
Add the first Step to a new Journey
In order to create the first step, click "+ Add new Step" and then select the step type from dropdown. Or you can click directly Callout/Dialog/Panel buttons below the Journey title
2. Insert a new Step in the middle of a previously made Journey
3. Add a new Step after one or multiple steps
STEP ELEMENTS
When you want to create a step, you need to select a page element with which your step will be connected. A selector will appear on the screen to select given elements.
As you move your pointer over the various elements in the application view, each element will become surrounded by a colored rectangle with a label on top of it. The colors vary according to the element’s reliability score as determined by the Editor. The label either shows the type of the selected element, or prompts you to be more precise in your selection.
To select an element as the subject of the Step, hover above it, moving the pointer until the highest reliability score is shown (some elements may have only one), then click.
Label (indicates the kind of element,, e.g. text, link, etc.) and reliability score
Selected UI element
TIP: Every web page consists of many elements, which are either visible or hidden.This may affect the selector behavior and movement. If you have problems selecting the precise element you would like to, try using the Selector Precision (Ctrl + Alt + mouse wheel) or approach the element from a different direction.
For more information, check the article "Reliability of Page Elements".
DEFINE STEP CONTENT AND SETTINGS RULES
After selecting an element, a window will appear. By going to the bottom right corner, you can define how big you would like it to appear while you're working on the Step.
In this window, you can specify all the relevant information for a given Step. It has the following tabs:
Content - In this tab you should write the guidance content (text) to be shown to your end users.
Settings - You can specify what action will the end user take to the next Step in the Journey, as well as some additional options.
Visibility - In this tab, you can specify Rules which define whether an end user is able to see this step, based on the current context. This is an advanced functionality which not every content author will work with. Details are covered later on in this guide.
Action - Optional settings which allow authors to terminate the Journey at the current Step, if given conditions are met. These settings can help avoid Journey failures and make the Journey more adapted to end-user interaction.
URL - This tab displays the URL of the specific Step. Sharing the URL with end users can enable them to access the Step directly from a link in an email, instant message, etc. It can be useful for customer service and support situations.
Notes - Here you can add notes to be shown to the end users in slideshow
In addition to these tabs, the dialog contains visual controls for:
- Selector Precision settings - Optional settings which help select an element in the current page with higher accuracy. More technical knowledge is required here.
Element Selector
- Works the same way as the initial element selector. It is present here in case you want to redefine the element you will attach the current step to.
ADDING CONTENT AND FORMAT TO THE STEP
The step title and its description are required fields. The content of the Step title field is displayed to users, so it should summarize what the step is at a glance.
Various text formatting options, including numbered and bullet lists, are available for the description. You can include hyperlinks and images (by URL reference) in the description content.
In addition to the title and descriptive content, you can specify:
- The position of the step window relative to the selected element.
- The visual element which activates the step on the page via the Re select icon.
- The user action which is required from the end user to transition onto the next Step of the Journey.
- Whether the "Spotlight" is used to focus the element (see below).
- Whether to animate the Step bubble when the user enters the Step (see below).
- Whether the option "Extra wait time" is to be activated (see below).
STEP TRANSITIONS
The Step Transition options enable you to specify what needs to happen in order for the end user to go to the next Step of the Journey. Most of these options involve some action by the end user: clicking on a link or button, or entering text in a field, for example.
Click: When a Step is associated with a link or a button, this option moves the Journey to the next Step when the end user clicks on the element.
Once you have created the first step, you can immediately add a new one by using the “Next Step” button. Press “Done" to save all changes.
TIP: It will be possible to add more steps later on, as well as to reorder the list of steps using drag and drop.
EXTRA WAIT TIME
The Extra Wait Time option defines how many seconds Newired will wait before stopping the Journey if the page element associated with the step is not found on the page. This is useful if the element concerned appears only after a user is required to perform an action which takes long. You can find this option in Selector Precision dialog
STEP PROPERTIES
This section of the dialog contains the following options:
- Spotlight: When you activate the Spotlight option, the screen darkens with the exception of the selected element, thereby highlighting that element, as soon as the user arrives at the given step. Moreover, the end user will be unable to select any other area or object in the page. This is very helpful when you need to direct the attention of your end users to a specific function or area.
The visual result to the end user looks like this:
Animation:
If this option is selected, the content "bubble" containing the information "bounces" a few time to call the user's attention when they arrive at the step.
Step is skippable:
if enabled, the end user can optionally skip the Step. If disabled, the user cannot skip it. The option comes disabled by default.
- Allow Step feedback: if enabled, end users will be able to provide feedback about that specific Step, even if Feedback collection for the Journey is disabled. The option comes disabled by default.
The features described here are the most basic when you create a Journey Step.
To learn more about the other tabs in the Step window, please consult the relevant articles.
Was this article helpful?
That’s Great!
Thank you for your feedback
Sorry! We couldn't be helpful
Thank you for your feedback
Feedback sent
We appreciate your effort and will try to fix the article