Have you ever had a guide break when your development team makes layout or content changes in your application? Have you ever thought, how can we increase our completion success rate on walkthroughs? This article guides you through how to create an effective dashboard walkthrough based on a Professional Services custom engagement.
Requirements
Pendo admin account permission or the following:
- User permission to create Guides
- User permission to publish Guides
Pre-Work
First, let’s break down the problem. Through analysis of what was not working with the existing walkthrough, our team found:
Element selectors were not unique/”sticky” enough.
- We found that in one step, the tooltip was pointing at the wrong tab in the Dashboard.
-
Feature tags were associated with the underlying identifiers built into the website. For example, a CSS ID of
-
#dashboard-tab-nav-item-5
-
-
If the order of the tabs change, for example, the tab at:
-
#dashboard-tab-nav-item-3
-
-
Is now in the position of:
-
#dashboard-tab-nav-item-5
-
- This will cause the Tooltip to break. The feature tag will point to the wrong element in the app because the text is altered.
We also found that large drop-offs in usage were occurring at specific steps in the guide. Very few users were completing the guide or making significant progress through it.
- Advancing through the steps was inconsistent.
- Some steps wanted the user to click Next, but others prompted the user to click an element that is only indicated by the text of the guide itself.
- Therefore, users may click off of the guide or click the wrong thing, causing them to “fall out” of the guide.
- For example, some steps of this guide want users to click on a green button:
- Others have a carat and bold text but want the user to click a green button again, and clicking the element has no effect:
How did we solve this?
- Use “stickier” selectors
-
We updated the feature tag’s selector to:
-
#dashboard-tiles-tab-nav-item-3
-
- The guide works as desired. However, a more descriptive CSS ID or HTML data attribute would be even more resilient.
-
For example, a Class or ID such as:
-
#nav-item-standards-mastery
-
- This is a robust CSS ID that describes the type of element it is attached to (navigation list item) and the location of the element (the navigation bar). This ID will work with this particular dashboard tab, the Standards Mastery, even as the page changes over time.
- Another strategy we used is: Have fewer steps.
- Data shows that most Visitors don’t make it to step 6 of a walkthrough.
- Aim for five or six steps as an upper limit, and three as an ideal target
- Keep behavior and expectations consistent.
- You want the user to click in your app in order to get more familiar with how to do something. If you’re using Tooltips, in most cases, you can go without Next buttons. Leverage the built -in “Advance on Element Click (or Hover)” functionality in Pendo Guides.
- If you do decide to use buttons, stay consistent with that navigational method.
- Aim for bite-sized “easy wins”. This will help users to try more Guides, if the first one they see if easy to navigate.
- Make Step one of your walkthrough super simple.
Reference materials for tagging:
Interested in a consultation and achieving your goals with Guides?
Reach out to the Professional Services team: services@pendo.io