How to Create Guided Tours for Web Products — Tools & Examples
I remember going sightseeing at a very church/museum a few years ago. Naturally, I had no clue where to start.
There were signs that pointed toward a path one could take, and directions in a brochure they gave us at the entrance to the building.
Luckily, I was with a group that day, and we were waiting for a local tour guide to show us around.
It was such a relief when she came up to us and said, “Shall we?”.
After an hour of the tour, I felt like she knew everything about anything, bombarding us with fun facts and little details about the place and narrating its historic importance.
Almost everyone in the group agreed “This place was really worth it! 😍”
Do you think it would be “really worth it” for the group if we had to see the site without a guide, relying only on the brochure and the random signs scattered around? You know where I’m going with this, right?
Your product is the museum, and its visitors are actually. The tour guide is exactly what you need to create satisfied users who can experience the full value of your product.
Long and boring user manuals, one-time UI tips, or even minutes of walkthrough videos won’t get the job done anymore.
You need a tour guide to show users around the product in a single user experience.
And that’s where a guided tour comes into play.
In this article, I’ll go over:
So let’s start with the basics:
What is a Guided Tour?
Either way, the tour essentially reviews the main features of your product to help your users understand how everything works and learn about the value of your product.
Guided tours are extremely helpful in educating your users and turning your web product into a self-serve experience.
Why your Website or Software needs a Guided Tour
You’re probably here to find out how you can create guided tours, preferably ASAP.
But I’m sure you aren’t convinced about the answer to the penultimate question: “Do I really need an interactive tour of my website?”
What’s wrong with the traditional methods of User Education
Aren’t support articles and a few demo videos enough to make users knowledgeable about the product?
They actually are. But the problem isn’t the quantity or quality of the guidance you’re going to offer them: It’s the accessibility and digestibility of that knowledge and guidance you need to provide.
Users should have direct access to guidelines for your product and its features, and these guidelines should be easy to digest for them.
So first, let’s see how user manuals and walkthrough videos don’t fully meet this need:
Online Manuals
An online manual is a set of written explanations and instructions you can publish on your website, similar to a user manual that comes with physical products, like vacuum cleaners.
Yeah, using a vacuum cleaner isn’t rocket science. So a user manual in that case is more than enough to satisfy users’ needs, but is your web product able to be explained clearly?
Your website or web product is much more complex than a vacuum cleaner. Plus, there’s a big chance your users haven’t used a platform similar to yours.
So, your users will definitely have to read that pages-long, in-depth online manual you’re going to write.
Believe me, a big chunk of your new users are going to skip that online manual and try to figure out your product on their own, and some of them may be so discouraged by that process that they don’t return.
And for those who read through those documents, it will be an inconvenient and boring process — which is far from being either accessible or digestible.
Product Walkthrough Videos
Preparing videos that walk users through your product is another way to onboard users.
You can create also a video series where you explain your product in detail and demonstrate the best uses of your product, similar to a demo:
Videos are more accessible and digestible than user manuals, and they’re definitely a step up from online manuals — but they bring their own challenges as well.
First off, a user will have to watch the video, then access the product, and then go back and forth between the video and the product to apply the steps.
Second, when the design and UI elements of your website change (which happens more often than you’d think) you’ll have to completely re-shoot the video to stay up to date.
But you can do better: Interactive product tours are:
Create your own Website Guided Tour in 3 Steps
Creating a guided tour is not as simple as creating manuals or videos. ()
Since you’re creating a guided tour to improve your users’ experience, you need to take users’ needs and motives into account, and then carefully design and create (and iterate) a user onboarding flow with a product tour.
You can do all that in 3 steps:
1) Design the flow
The first step, of course, is planning.
You need to understand what your users require during their first experience, and plan the steps of your guided tour accordingly.
Here’s how you can do that:
- Identify the needs, pain points, and motives of users.
- Go over your website analytics
- Conduct user reviews and acquire feedback
- Record heatmaps and user sessions
2. Devise and create a path your users can take to reach your product’s core value
3. Divide this path into guided tour steps and design steps
4. Hand it over to development (if you’re going in-source).
2) Choose a method of development
Now you have to choose a method for developing your guided tour on top of your product. There are two main ways you can do this:
3) Create (and iterate)
If you’ve chosen to use the in-house development way, you’re actually done. The product team should take care of it now.
- Make sure the design is as friendly as possible
- Once you’ve created your first self-guided tour, ask your colleagues and customers to go over it so you can collect their feedback
- Use data from analytics and insights from user feedback to continually iterate your content.
If you’re taking the no-code (and lone wolf) path, you need to go into your user onboarding software to start creating your guided product tours. Here are some tips:
If you go through each of the steps with your end users’ experiences in mind, you’ll create the optimal guided tour for your product that will produce great results.
Website Guided Tour Tools and Software
I’ll go over two products, UserGuiding and Shepherd.js, which are respectively no-code and open-source.
Although there are many user onboarding tools that enable you to interact with your users within and beyond your product, there is one outstanding product tour software that you can use to create guided tours.
No-Code Website Guided Tour Software: UserGuiding
UserGuiding is a no-code user onboarding software that can be used to create the perfect guided tours in just minutes.
Here are four main reasons why UserGuiding is better than any other product on the market:
It is a third-party subscription-based tool that offers a 14-day free trial with all features unlocked, so you can see its value and benefits for yourself.
1) No coding required
Unlike most other product tour software, UserGuiding doesn’t require any coding or technical knowledge to create, integrate, or update guided tours or any other onboarding element.
- You won’t depend on developers to create your onboarding
- Everyone on your team can utilize the product from marketing to customer success.
This is crucial because:
Here’s what I created in just a few minutes on Youtube 👇
2) Wide Variety of User Onboarding Elements
UserGuiding has many features you can use to perfect your user onboarding. Let’s take a look at the core features:
One size doesn’t fit all.
3) User Segmentation/Targeting
It never does.
So why should they go through the same onboarding process?
Each of your users is trying to accomplish different things with your product. Their language, technical background, and interests are different from each other.
With UserGuiding, you can create custom user segments and target them with specialized guided tours to provide each user with a unique experience.
4) In-Depth Analytics
Creating a user onboarding process with many elements, such as guided tours via a third-party tool, is not that demanding; however, perfecting it and being able to have visible results can be difficult.
And since you won’t be able to improve something you can’t measure, UserGuiding’s analytics feature is available, which helps you track the performance of your guided tours step-by-step to give you a chance to optimize your onboarding.
Affordable Pricing
- 14-day free trial (no credit card required)
- Basic Plan: $82/month when billed annually for up to 2,500 MAU
- Professional Plan: $333/month when billed annually for up to 20,000 MAU with unlimited guides
- Custom Quotation Available for Larger Companies and Start-ups
UserGuiding provides the best pricing on the market for the features it offers:
Interested? Try it for yourself or talk to one of our experts:
Shepherd.js is an open-source JavaScript library that helps you create guided tours that introduce users to your product.
Free & Open Source Guided Tour Software: Shepherd.js
If you don’t have any budget to invest in user onboarding and plenty of developer time on your hands, Shepherd.js is your solution instead of other virtual tour software. With the help of a developer, you can create a guided tour — but it will be limited to only that.
But as I’ve said, you’ll have a guided tour for free.
Customization and the variety of onboarding elements will also be limited, with no available analytics or user segmentation.
Two Website Guided Tour Examples
Now that we’ve covered all the what/why/how questions and you’re aware of the process and the methods of making a guided tour, let’s see what it should actually look like.
Let me show you two guided tour examples, and I’ll walk you through their onboarding process to provide as many insights as I can.
Evernote
Let’s go over their user onboarding process and how they use a guided tour to explain the functions of their product.
Evernote is a note-taking app that is available on your mobile devices, your browser, and desktop. You can easily create to-do lists, take notes, and establish calendars.
As soon as you first log in to the product, a welcome message appears on the screen.
I want to put extra emphasis on the part that says “let’s find out how we can help you in less than a minute”, because it lets users know what exactly they will learn and how long it will take.
Remember when we said one size doesn’t fit all?
It’s important to be transparent to your users, especially during their onboarding:
Evernote is aware of this as well. They know that each user logs in from a different device and uses the product for different purposes. Below you can see how they personalize the onboarding process by first asking a few questions, then starting a guided tour of a feature based on the answers that users provide:
They avoid pushing all guided tours at once, because showing a user all of the product in a single run can quickly become boring.
They than go over each function in the editor, walking you through the product:
That’s where an onboarding checklist comes into play.
Evernote doesn’t force users to go through the other guides; rather, it gives them the choice of choosing what they want to create and pushes a guided tour that explains that feature.
What’s good about Evernote’s Onboarding Tour?
✅ Their messaging in the welcome modal is clear and assuring.
✅ They ask the user what they want to do first, and personalize their experience according to their answer.
✅ They utilize an onboarding checklist to provide users with a sense of progression.
✅ They use recordings inside guided tour steps to showcase features.
Zakeke
Zakeke is a visual product customization tool that is mainly used by e-commerce companies.
They’ve been using UserGuiding to create their guided tours and other onboarding elements, which make their product much easier to adopt.
It helps merchants and e-commerce owners provide their end-users with customizable products.
Here’s Zakeke’s initial guided product tour, with a GIF on their welcome modal:
If the users achieve value, they will be more willing to learn about how they can better use it, but when they start, they just want to solve their problems.
What’s great about their welcome tour is that they don’t go over each UI element on each page. They show their users how to achieve the core value of their product, which is integrating Zakeke with their users’ e-commerce stores.
Since they didn’t go through all the features in the initial onboarding tour, they put tooltips and hotspots near their other features, so that curious users can learn more about them if they want to.
What’s great about Zakeke’s Guided Tour and Onboarding?
✅ Their initial product tour goes over the main function of the product, instead of exploring every feature. This way, they reduce TTV.
✅ They utilize hotspots and tooltips for explaining features that were left out of the initial product tour.
Conclusion
A guided tour will help your users understand your product, website, or web app more clearly and quickly.
I hope I was able to help make your website more accessible and digestible for your users!
Adopting a user onboarding tool such as UserGuiding will make life easier when it comes to creating and maintaining guided tours and other onboarding elements.
Frequently Asked Questions:
What is the #1 software for creating guided tours?
UserGuiding is among the most capable, easy to learn and master, and affordable guided web/product virtual tour software for product, growth, design, and development teams. It is an all-in-one and no-code user onboarding solution that offers much more than just guided tours.
What is a great example of a guided product tour?
Evernote, a note-taking product, provides us with a great example of a guided product tour. They explain each of their features in an interactive way, assisting you as you complete the tasks they’ve assigned you. Check out the article for a visual walkthrough.
Whose responsibility is it to create guided web tours?
Usually, the UX designers map out a journey for user onboarding and determine if it includes guided tours. Should a guided tour be deemed necessary, developers are then also responsible for creating it. But, thanks to no-code tools such as UserGuiding, non-technical staff members can easily design and create guided tours and other onboarding elements.
What is UserGuiding?
UserGuiding is an all-in-one user onboarding solution that can be used to create guided web and product tours. It is a no-code solution so both technical and non-technical team members can utilize it to create engaging automated user onboarding flows.
Originally published at https://userguiding.com on November 18, 2021.
