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.
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
2. Insert a new Step in the middle of a previously made Journey
3. Add a new Step after one or multiple steps
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 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. You can also specify what action will take the end user to the next Step in the Journey, as well as some additional options.
Visibility - In this tab, you can specify Rules which define whether or not 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.
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 Reselect icon.
- The user action which is required from the end user to transition onto the next Step of the Journey.
- Whether or not the "Spotlight" is used to focus the element (see below).
- Whether or not to animate the Step bubble when the user enters the Step (see below).
- Whether or not the option "Extra wait time" is to be activated (see below).
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.
Button click: This option causes a button labeled Next to appear in the Step bubble when the end user accesses that Step during a Journey. The user needs to click on the button to move to the next Step.
Edit input: To be used for input fields (e.g. the username or password field) or text boxes. The Journey displays the next Step when the end user types into the input field or text box.
Value change: To be used for dropdown menus.When a value is selected from the list, the Journey moves to the next Step.This option can also be used for input fields when the user would like the condition to be true before the input is typed in.
Hover: The Journey moves to the next Step when the end user hovers the mouse pointer over the selected page element.
Multiple: The current Step should appear together with the following one, and the enga- gement method used in this case will be the one selected on the next Step.
Timing: The Journey moves onto the next Step after a specified amount of time. (The de- fault interval is 5 seconds.
URL Change: The Journey moves onto the next Step when the URL changes.This includes in-page anchors preceded by #. For example, the transition will occur if the URL changes from .../index.php/ to .../index.php/#signup.
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.
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.