Multi-Step Mobile Guide

Last Updated:

Create a Multi-Step mobile Guide for onboarding new users or introducing a new feature set. Once you build and deploy your multi-step Guide, you can go to the Guide Details page to see a detailed, at-a-glance view of how users are interacting with your Guide and steps. 

Our recommended way to onboard new users is via a contextual Tour, highlighting important features in your app upon first use: 

tooltip-tour.gif 

You can mix and match lightbox and tooltip steps to create the exact tour that fits your app. 

Requirements

After the Pendo Mobile SDK is installed, Pendo users will need one of the two following permissions to build a Guide in the Visual Design Studio

  • Pendo Administrator Permissions
  • Pendo User Permissions with at least:
    • Create Guides from Layouts
    • Manage Published Guides
    • Create Guides & Layouts from Scratch

How to Create Your Guide

1. Edit/Create a guide in the Visual Designer

Screen_Shot_2020-06-25_at_11.27.12.png

2. Open the 'View Steps' drawer to "+ add step"

Screen_Shot_2020-06-25_at_11.28.30.png

3. For a lightbox, you can add a button with a 'Next Step' action to advance to the next step / 'Previous Step' to go back. Selecting Go to Step will allow you to define a specific step to go to.
A tooltip step will automatically go to the next step if such exists.

Screen_Shot_2020-06-25_at_11.29.56.png

4. From SDK 2.3.3 and up - each Tooltip step includes by default a visual backdrop that blocks the end-user from interacting with the application. You can control the backdrop's settings under the Container Design tab.

5. Each Tooltip step can advance by either

  • Including a button with a 'Next step' action
  • If the tooltip does not include a backdrop, once the user clicks on the application's screen, the tooltip will close and advance to the next step
  • If the tooltip has a visual backdrop, and the target element is exposed above the backdrop, then the tour will advance when the user taps on the target element (tapping anywhere else on the screen will do nothing).
    See more details on tooltip guides in this article.

5. Always test your tour on your device before publishing.

  • View Step Design Only the current step will be shown, not the full flow. The step will be shown on your device allowing you to fine-tune the visual design. 
  • Test the entire guide by selecting 'Test full Guide with Activation' - this requires you to 'activate' the guide by the activation criteria to test the tour.

image__3_.png

 

Frequently Asked Questions

What are the best-practices to keep in mind while building a multi-step Guide?

  • We recommend building a Guide with a maximum of 5 steps. Although this isn't a restriction, we recommend it as a best practice to stay within an attention span without losing your user's interest or overwhelming your users. 
  • Brevity is your friend.
    • In multi-step lightboxes, let the visuals illustrate your intention.
    • In tooltips, use short text
  • Onboard brand new users with full-screen guides before they are introduced to your app. This will help you focus your users before they get started.
  • We recommend that each Guide step have similar branding (the same background color, font style, button styles, etc.) for a smooth visual experience. 
  • If you use a tooltip in any step of your Guide, test it on a physical device before deploying the Guide to your users. 
  • Decide whether you want to let your users opt-out of the tour
  • In a new feature announcement, the last step can lead directly to the new feature's page (via an app's deep link)

Can I create a Multi-Step guide with Full-Screen steps only?

Pendo's Multi-Step support allows you to create a tour comprised of a series of lightboxes or full-screen steps, as depicted in the video below. The resulting guide resembles a 'Carousel' which is a common way to onboard on mobile. However, it is different than a traditional Carousel in several important ways:

  • In this multi-step guide, each step is distinct and has its own entrance and exit animation, which means that your users may see pauses between guide steps. 
  • Progress between steps is done via guides buttons and not via a swipe gestureץ
  • Guide buttons placement is relative to the guide elements so buttons are not 'sticky' to the bottom of the screen.

2020-01-13_10-27-55__1_.gif