The question I’ve been asked hundreds of times in the past few years.
Yet, a seemingly simple question can often have a complicated answer because it comes with quite a baggage. The “what and why”.
What are you trying to show and why are you showing it?
Are you showing off your little app? Why? What do they get out of it?
These two questions need answering first and then you can proceed to building a product tour.
Start with the “what?”
A product tour should not replace a good UX.
Your product tour should be there just to do the handholding for a specific task. Don’t think of your product tours as a map through the app but rather see them as a guide for specific sections.
Your app might be a complex system that is used by multiple types of people. For example, When you signup for Hubspot as a salesperson, you won’t like to see a tour of the marketing capabilities of the system and vice versa.
The “what” is always going to be a specific thing in your application. Show them the menu, show them the editor or show them how to change their billing information.
But for the love of everything that’s good and holy, do not create a 27-step onboarding guide showing them the entire app. Nobody will follow that. Ever.
Next comes the “why?”
They have seen the editor, now what? Well, they need to do something. Interact or engage with that section of the app.
The only way this works is if you show them a feature that is actually going to help them achieve something. If it doesn’t, don’t even show the product tour to begin with.
The “why” is always going to point to a specific goal. If you want to build an onboarding guide, make sure you only point the necessary steps needed to achieve that. Do not overcomplicate things.
If you are creating a product tour for a specific feature, only show that and point them toward the thing they need to do next.
How to choose?
How to choose what to include in the product tour and what to leave out? If it serves the end goal of your users, show it, if not you don’t.
Your safest bet is to create a list of every mission-critical functionality of your application. Then assign a binary priority next to each one. If it’s important it’s 1 if it’s not that important you add a 0. Nothing in between.
So when you look at onboarding, you figure out which of these functionalities you need to show off in order for them to be onboarded.
Keep in mind, that you’ll want to keep these product tours short and sweet so a smaller product tour is always better.
Once you figure out what you need to show off, let me show you how to create these product tours using Eyelet.io
Create a product tour without coding
Once you are in your Eyelet dashboard you’ll want to make sure you have the Eyelet Browser extension. Now as a pro tip, use Chrome even though it’s advertised as working on multiple browsers, you’ll have the best experience using Google’s browser.
Now click on new Tour and once your project is open in a new page, navigate to the page you want your tour to start.
You’ll have 6 options to choose from, the first one is your typical Splashscreen, the second and third while similar in style act differently based on user interaction. The fourth and fifth are what I call the attention grabbers, little pointers without much context but sometimes that’s exactly what you need.
Now the 6th one is the bot, I’ll cover that one separately.
Let’s get a quick little 3-step product tour and the first step will be a Splashscreen.
Since the Splashscreen can’t be targeted, you won’t have to pick an element of your page to attach it to so it will just be placed in the center of the page with a shadow behind it.
You can edit the image, title, and description and after that, you move on to the navigation button where, just like everywhere you can customize the label.
Next step I’ll want to use a tooltip that will highlight a certain element on the page. Click the “+” button and select the tooltip button. Attach it to an element on the page and customize the Image, title, description, and visuals.
The cool thing about Tooltips and Hints are that the navigation can be customized to the point where you can either make the user click the tooltip navigation button, or use the app navigation to move forward.
For the third step, I want the user to just click on a simple button. So I’ll use one of my attention grabbers and point it where I want them to go.
And there you have it, hit the Finish button to return to the dashboard where you’ll be able to rename and change the launch settings of your tour.
I can test my tour using my extension and once I’m ready I’ll add it using the setup code on every page I want it to show the product tour.
That’s it, you got yourself a product tour without using a single line of code.
If you haven’t done so, sign up for Eyelet.io for free and test it without ever adding a credit card. If you need help creating your product tours, let me know and I’ll create them for you.
