The unexpected difficulty of implementing a simple product walkthrough
Product walkthroughs are essential for a successful user onboarding execution. Especially, if you have a product little more complex than google search 😌
Guiding user to core value of your product is a race against time. If it takes user more than her threshold getting the value, your product is just another junk in browsing history 🤷
Do you feel me?
If yes, keep on scrolling. I’ll show you what it takes to build walkthroughs for onboarding.
There are 8 very common phases of developing walkthroughs.
1. Exploration and ‘the maker feeling’
In this phase developer makes research and finds out an open-source library that works like a charm on your product. You implement a simple tour, you see how fast it was and team can start working on designing a real tour now.
Below is a starter code can be found on bootstrap tour.
2. The first test
When you make your first actual test, you see there is something wrong with timing. There are tooltips hanging around before animations complete on your page or before data loaded from your servers. Timing is one of the five characteristics of a perfect user onboarding.
3. Concerning user for the first time
This is where you think about the user experience for the first time. The untimely display of guides bothers your users and negatively affects the user’s experience. So, you decide to show a tour only once. Add a condition for that;
4. Targeting users / multiple tours
There is no one-fits-all solution when it comes to user experience and users. You decide to target users, and all team has a word to say about segmentation. You probably need to find out followings from a user’s session;
5. UI Phase
Thinking that product guides are something outside of the product is untrue. They are an essential part of the user experience and are shown on the user’s interface. They should be entirely compatible with your product. You need to customize the text’s font type and size, the media, the container’s background color, and the highlighting. Using a beautiful design makes your guides native and more productive.
Your product team probably has some to say 🤗
“This open-source library has some cool style, BUT…”
6. Tracking Tour Performance
Analytics is another significant part of user onboarding. You should analyze which product tours have been completed or abandoned as well as on which step(s) users tend to leave the guides. You can also improve your user experience according to guide analytics. Additionally, you need to track how the guides help your overall product usage and performance.
7. Quality Assurance
You know what I mean;
8. Giving it up
Because UI of your application changing by the time or adding tons of new features, you need to make sure your guides are totally working all the time. Even if you make all the tests, there is always something missing and causing your walkthroughs broke. Most of the time, this means re-iteration of the entire process.
We would never imagine writing over 600K lines of code for a user onboarding tool, but here we go;