Understanding How Steps Work
The building blocks of flows are called steps. A step is the individual UI pattern like a modal or a driven action that is designed to empower the user with guidance and helpful hints and is shown as part of the Userpilot experience.
Flows can either be single-step such as a webinar announcement or a sequenced grouping of multiple steps such as explaining a process that the users are struggling with. We generally recommend keeping flows short and sweet with no more than 5 steps.
Adding steps
After navigating to your starting page and choosing " Flows" as the type of content you want to create, you can start adding steps from the Chrome extension builder.
UI Pattern Types
Userpilot steps are available in a variety of formats.
Modals
Big global announcements that are centered on the page and calls for the full attention of the user. Modals are great for welcoming new users, big feature releases, and critical information such as outages. We recommend using this type of UI pattern sparingly to avoid disturbing the user workflow.
Slideouts
Smaller, mid-sized Modals used to grab the user's attention in a less disruptive way. Slideouts are great for introducing new smaller features, collecting feedback, reminding users of the value of your features, and for non-critical messages such as webinar announcements.
Tooltips
Tooltips anchor to a specific element within your application. These are great for providing contextual guidance about a specific feature in your app and teaching users what to do next by stringing together step-by-step experiences.
Driven Actions
Step Settings
Once you add a new step, you will be shown a sidebar that allows you to easily customize the look & feel of the added UI pattern. You can modify the settings for each step individually or for the whole group if the step is a part of a UI patterns group.
Options
Theme: You can use themes to customize the appearance and styling of the step and make flows match your app.
Element placement & detection (Tooltips and driven action only): You can place your step accurately on any element in your web page. And with enabling manual element detection you can further specify any element on your webpage by including a text or a unique CSS selector to avoid any element detection failures.
Backdrop & Highlighted area: This option offers a great way to drive your users into engaging with your selected element by creating a subtle backdrop that you can freely customize its color, intensity, and highlighted area dimensions.
Step behavior: You can choose the behavior of each step in your flow. You can choose when to trigger your step when it advances, and what happens if your user clicks on the “X” button of the step.
Box layout and design: Customize the outline of your box by choosing its width, corner roundness as well as border type and design.
In the group settings tab, the options that you edit will be applied to all the steps within that group to save you the effort of reapplying the same settings. In the individual settings tab, the settings will be applied to the selected step only .
Rearranging steps
It's possible that you might forget adding a certain step while creating the flow or maybe would like to rearrange the steps in a particular order.
To rearrange steps, just simply drag the step you'd like to relocate and drop it wherever you'd like. It can be either dropped as a new group between two built groups or straight into a group with the same UI pattern kind.
You can easily add a new step between two built groups. All you need to do is to hover the cursor to space between the two groups and click the '+' button. And can also add a step directly to the group itself. This will add another element of the same kind to the group. Just hover the cursor to the '+' at the end of the group.
