How to Use Walkthroughs

Updated 6 months ago by Max Smith-Gee


Our interactive Walkthrough app is an automated guide that educates users by interactively presenting step-by-step instructions on product features. Helping navigate a website through touch-points and tooltips, a walkthrough highlights particular elements on a site and prompts a user to take an action.


How to Create a Walkthrough

  1. To create a new walkthrough, go to the Walkthrough App, then click the "new" button located top right on the page.
The exact number of walkthroughs visible on your site can be shown using the blue circle next to "Walkthroughs."
  1. Once clicking the "new" button, you will be directed to the Point & Click Walkthrough Recorder. Copy & paste the exact site address of where you'd wish to create an interactive walkthrough and press "start here."
For the purpose of this article, we will be using our own site, www.simpo.com.

By default, walkthroughs always start by redirecting to the starting page because it's important for a user to experience the whole walkthrough journey, from A to Z


Building a Walkthrough

Once you've opened a new walkthrough in the dashboard, you will be redirected to the site page and can begin creating your walkthrough through the builder.

The "builder" is the bar on the bottom of your screen used to create and edit walkthroughs.

The vertical ellipses located bottom-right of the builder includes three settings; minimizing builder, exiting builder, and returning to the dashboard.

The builder has two modes, recording mode and settings mode.

Recording Mode

Recording mode is the process of creating a walkthrough. By pressing the blue plus button, you are prompted to select an element of your site as the first step of your walkthrough.

By selecting an element, recording mode stops and switches to settings mode.

To quit recording mode, press the flashing, red stop button.

Once the plus button is selected, it will appear as a red close button and all other components of builder will be unaccessible until a new step is inserted.


Text Editing

There are three icons located on the top right-hand side of an individual Step: text changes, Step Settings, and a close button.

In text changes, you can customize and align text, add headlines, alter font size and colour, and add links.

Recording mode involves building the walkthrough and settings mode involves describing and editing each step.


Settings

There are two types of settings accessible through builder; Step Settings (per individual step) and Walkthrough Settings (per walkthrough).

Step Settings

Step Settings override all other settings and apply to only the step you have selected to edit.

There are two components of Step Settings; General and Design.

General Step Settings

In General Step Settings, you choose how your specific step will be accessed, closed, and displayed.

Step settings affect only the specific step you have selected and override Walkthrough Settings and Global Walkthrough Settings.

"Element found" means the selected element is found and accessible on your current page. 

Selecting a step based on an element from a different page shows a message stating "element not found."

In Step Settings, you see the same message and can click the page on which the element is located.

To re-select an element in the same step, click the "re-select" button and all previous step settings will be saved to the newly selected element.

Even if the same element is accessible from a different page, the page you have selected it on to create a step is the only page the element will be found on if "limit to current page" is checked off.

Finder is responsible for locating step elements on a page so when "ignore text" is selected, the finder ignores any text included in an element and only focuses on the location.

"Ignore text" can be useful if the text in a step element changes frequently.

The "Advanced" section provides different advancement features, a custom CSS board, custom step selection, and more.

Different ways a user can move forward on a walkthrough include, directly clicking on or selecting specific elements, typing in a search bar or login, enabling a custom CSS feature, or simply clicking the "next" button.

"Show next button" uses a button to advance on in a step instead of clicking on the selected element itself.

Users have a better learning experience when clicking on elements themselves, as opposed to the "next" button.

"Advancing on element event" means the walkthrough will physically move onto its next step once a user selects the element. "Advance when user types" is used for search bars or logins where the walkthrough progresses to its next step once a user finishes typing. "Advance on custom function" is used to input custom walkthrough functions and is a tech-savvy way of creating different advancements.

When any of these advancements are selected, the "show next button" is usually deselected because they contradict one another.

"Button text" changes the walkthrough text button used to progress onto another step (e.g. next, go, continue, or done). "Custom selector" overrides the builder's algorithm and uses whichever class, ID, or tag was inputted instead. "Dependency" uses CSS code to override the builder's algorithm and locates an element through the inputted data.

Dependency checks if one element relies on another.

An error message can be added in case you think a step may fail. There may be a step requiring specific content that some users don't have resulting in a step fail which then displays your error message in the bottom-right corner.

"Event" chooses the type of action the computer will perform to advance on a step. A "legacy click" is an up-and-down button movement, a "click" can also be an up-and-down movement or tap to click, "focus" focuses on the element but does not require a user to click, and "right-click" is simply, a right-click.

"Optional step" enables a skip element on a selected step. If this feature is enabled, step elements that cannot be found will be skipped instead of having the whole walkthrough fail.

Finally, found at the bottom of the general page is a "reset settings" option that will reset the Step Settings back to Walkthrough Settings.


Design Step Settings

In Design Step Settings, you can change step position, alter width and height shape, and make adjustments using the custom CSS board for your selected step.

The positioning feature will align the walkthrough step in the way you've selected, but if there's not enough room, it will move the step to another area.

In the "Advanced" section of design you can alter the width and height and customize your step using the CSS board.

Once you have completed adjusting, customizing, and designing your first walkthrough step, press "done" to save changes.

Any changes made through Step Settings apply only to the step you have edited. Unless Step Settings are reset to Walkthrough Settings, they will remain edited this way even if Walkthrough Settings or Global Settings are altered.

Let's play with Design settings and make the most obvious changes to see exactly how Step, Walkthrough, and Global Settings work.

Here we have altered the width and height of our first step, as well as changed the colour to light blue. Step 1 will remain light blue even though, in Walkthrough Settings, the default is white. Step Settings must be reset to Walkthrough Settings for Step 1 to have the same features.


Developer Mode

Developer mode shows a "finder score," information about the step element including classes, ID tags, parents, and children, and is accessed by calling the developer mode function.

Use the function simpo.builder.setDeveloperMode() to enable Developer Mode.

Calling the function above, a "Dev Mode" tab will appear in Step Settings.

The finder score shows how easy it is to locate your selected element. Anything below 85, the finder may not be comfortable locating.


Walkthrough Settings

Walkthrough Settings can be found on the right-hand side of the builder using the gear icon.

Settings authority goes in order of: Step Settings, Walkthrough Settings, Global Settings. Meaning, any changes made in Global Settings will not affect Walkthrough Settings until they are reset to Global Settings.

Settings authority goes in order of: Step Settings, Walkthrough Settings, Global Settings.
General Walkthrough Settings

In "General," you can title your walkthrough, add additional titles, and customize, design and alter elements.

Add additional titles that are similar or relate to the walkthrough instruction so that a user who does not know exactly what they are looking for, can still find help.

To add a title, click the blue plus button and type in as many additional titles as you feel would suffice in assisting to locate your walkthrough. To remove a title, click the red trashcan icon.

"Start by redirect" is a feature that will redirect a user to the starting page of a walkthrough, given that the user selected the walkthrough from Search Bar on a completely different page. By default, walkthroughs always start by redirecting to the starting page because it's important for a user to experience the whole walkthrough journey, from A to Z. That being said, this feature can be removed by simply unchecking it.

Similar to Step Settings, "reset settings" is a feature that will reset Walkthrough Settings to Global Settings.


Design Walkthrough Settings

In the design tab of Walkthrough Settings, you have the option to enable expose or add a progress bar. These options are only available for change in Walkthrough Settings because it would make less sense if only one or a few steps had the expose or progress bar enabled, and not the rest.

The rest of design is identical to that in Step Settings. You can change the position, alter width and height shape, and make adjustments to the custom CSS board.

The changes made in Walkthrough Settings apply to all steps in a walkthrough. Only exceptions are for the ones with altered Step Settings that haven't been reset to Walkthrough Settings.

Let's make a design change in Walkthrough Settings to demonstrate the authority that Step Settings has.

Although we have changed the colour, width and height of all steps in Walkthrough Settings, our first step remains the way we designed it in Step Settings.

After editing Walkthrough Settings, all changes made will be carried out in any new steps created.


Audience Walkthrough Settings

The "Audience" setting targets specific areas of your site with a walkthrough.

"Audience" has several options regarding where a walkthrough will be shown, who will see it, what browser or platform it will be accessible from and more. Given all of these possibilities, this component requires more explanation and is accessible in a separate article here.

To indicate which walkthrough has an audience, you'll notice a red circle attached to the respective walkthrough title in Dashboard.

This red circle feature applies to walkthroughs and announcements.


Creating a Second Step

To create a second step after editing your first, press either the "next" button on the first step to prompt the builder, or the blue plus button on the builder.

Because we have not reset Step Settings, Step 1 remains light blue.

To differentiate between steps in the builder, the step number will be enlarged when selected.

Step 2 of your Walkthrough will have the design features we customized in Walkthrough Settings.

Observe that Step 1, with its customized Step Settings, is completely different from Step 2. All other steps upon initial creation will have the default Walkthrough Settings.

Adding a Step In Between Two Steps

You can add a step in between another by hovering over the right-facing arrow found between each step. Hovering over this arrow will enable a small plus sign to appear, and upon clicking this, you will be prompted to select a new element of the page.

Deleting a Step

Deleting and adding steps can become confusing, especially when it comes to a multi-step walkthrough. In builder, each step is labelled in the order of when it's made, therefore, deleting or adding steps will change the number label before/after it.

Playing Walkthrough

To preview your walkthrough, press "play" on builder. Once satisfied, press "save" and name it, if you haven't done so already.

Giving your walkthrough a title can be done in General Walkthrough Settings, as well as upon saving.

To continue reading about Walkthroughs in the dashboard, click on the link here for the next article.


How Did We Do?