When was the last time you’ve visited someplace new?
I remember going sightseeing to this really old 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’ve given us in the entrance.
Luckily, I was with a group that was waiting on our local tour guide.
It was such a relief when she came up to us and said “Shall we?”.
After an hour of her showing us around, I felt like she knew everything about anything, bombarding us with fun facts and little details about the place; and narration of its historic importance.
Almost everyone in the group went like “This place was really worth it! 😍“
Do you think it would be “really worth it” for the group, if we had to see the place without a guide, just with the help of that brochure and the signs scattered around?
You know where I’m going with this, right?
Your product is the museum, the visitors are actually your users. And the tour guide is exactly what you need to create satisfied users that experience the full value of your product.
Long and boring user manuals or one-time UIWhat is UI? A User Interface (UI) is the medium through which a user connects with the hardware or the software. When a user interacts with a hardware or a… tips, or even minutes of walkthrough videos won’t get the job done anymore.
You need a tour guide that can show users around the product in a single experience.
And that’s where a guided tour comes into play.
In this article, I’ll go over:
- What a Guided Website Tour is,
- Why you need to use Guided Tours,
- How you can create a Guided Tour in 3 simple steps,
- Best Guided Tour Tools and Software you need to try,
- and 2 examples of Guided Tours that you need to see to get inspired.
Create Guided Product Tours in minutes, without coding!
So let’s start with the basics:
What is a Guided Tour?
A guided tour, also known as a product tour, is a walkthrough of your website, web product, or software that your users go through to learn its functions and how it is used.
It can be a single tour that goes over the core functions of your product or a collection of tours each of which would focus on different features of your product.
Either way, it goes through the main features of your product to help your users understand how everything works and what value they can get from 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 still haven’t completely answered the 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 the quality of the guidance you’re going to offer them, it’s the accessibility and the digestibility of that knowledge and guidance you’re needed 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 are violating this:
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 is not rocket science. So a user manual is more than enough, but is that the deal with your web product?
Your website or your web product is much more complex than a vacuum cleaner, plus, there’s a big chance your users didn’t use a platform similar to yours before.
So a user 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 for those who read through these documents, it will be an inconvenient and boring process. Which is far from being accessible, or digestible.
Product Walkthrough Videos
Preparing videos that walk users through your product is another way to onboard users.
You can create a video series where you explain your product in detail and demonstrate the best uses of your product, kind of like 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:
First off, a user will have to watch the video first, then access the product, and then go back and forth between the video and the product to apply the steps.
And second, when the design and UI elements of your website changes (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:
How Guided Tours are changing the game 💡
Interactivity and gamification have been on top of both design and education trends for the last decade, and they’re here to stay.
So what if I told you your users don’t have to leave the product to learn how your product works?
That they could be guided in your product real-time, just like how a video game teaches you, well, how to play it...
Guided tours introduce interactivity and real-time assistance to web products, and are both extremely digestible and accessible for any user profile. Almost every leading website and product/platform offers interactive educational content, primarily guided tours.
Interactive product tours are:
✅ Accessible, because they’re built right in your product, so your users don’t have to switch browser tabs to access instructions.
✅ Digestible, because your users are going to learn by completing the tasks in real-time.
✅ Less demanding to create and maintain than user manuals and walkthrough videos, because if you’re using the right method, you’ll be able to create and update content with a few clicks.
Convinced guided tours are a necessity?
Then let’s start creating website guided tours:
Create your own Website Guided Tour in 3 Steps
Creating a guided tour is not as simple as creating manuals or videos. (Or is it?)
Since you’re creating a guided tour to improve your users’ experience, you need to take users’ needs and motives into account, and carefully design and create (and iterate) a user onboardingWhat is user onboarding? User onboarding is the crucial process that starts from the first login of a new user and ends up in their aha moment, and usually beyond…. 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.
- Scheme a path your users can take to reach your product’s core value,
- Divide this path into guided tour steps and design steps,
- 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 2 main ways you can do this:
- The No-Code Way: The name says it all. In this method, you adopt a 3rd-party tool that provides you with simple tools to easily create guided tours and other onboarding elements without any coding.
- The In-house Development Way: This can also be called the hard way. In this method, you hand over your design to the product team, who would already be too busy improving your product / creating new features. Yet, in this method, you have all the control over what you will create.
3- Create (and iterate)
If you’ve chosen the in-house development way, you’re actually done.
If you’re going no-code (and lone-wolf) you need to go into your user onboarding software to start creating your guided product tours.
- Make sure the design is as friendly as possible,
- Once you’ve created a draft, make your colleagues and customers go over it to collect feedback,
- Use data from analytics and insights from user feedback to always iterate your content.
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
Although there are many user onboarding tools that enable you to interact with your users in and beyond your product, I’ll try to suggest you a product with which you can create guided tours.
I’ll go over 2 products, UserGuiding and Shepherd.js, which are no-code and open-source respectively.
No-code Website Guided Tour Software: UserGuiding
UserGuiding is a no-code user onboarding solutions that can be used to create the perfect guided tours, in minutes.
It is a 3rd 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.
Here are 4 main reasons why UserGuiding is better than any other product on the market:
1- No coding required
UserGuiding doesn’t require any coding or technical knowledge to create, integrate, or update guided tours or any other onboarding element.
This is crucial because:
- You won’t be dependant on developers to create your onboarding,
- Everyone in your team can utilize the product from marketing to customer successWhat is Customer Success? Customer Success refers to the approach that has your company in a position where it ensures that each customer is successfully connected to their desired outcome…..
Here’s what I’ve 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:
- You can use modals to welcome and inform users:
- Tooltips and Hotspots can be used to introduce and highlight features:
- You can utilize self-guided onboarding checklists to gamify your UXWhat is UX? UX is the abbreviation of User Experience and refers to an individual’s thoughts and feelings when using a specific product or a service. It aims to heal…:
- And you can use UserGuiding’s brand new feature, Resource Center, to be there for your users at all times.
3- User SegmentationWhat is User Segmentation User segmentation refers to the practice of dividing users based on common characteristics. This can help businesses in creating more optimized and personalized user experiences. To…/Targeting
One size doesn’t fit all.
It never does.
Each of your users are trying to accomplish different things with your product; their language, technical background, interests are different from each other.
So why should they go through the same onboarding process?
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 with a 3rd party tool is not that demanding, however, perfecting it to see visible results can be difficult.
And since you won’t be able to improve something you can’t measure, UserGuiding’s analytics feature which helps you track the performance of your guided tours step by step gives you a chance to optimize your onboarding.
Affordable Pricing
UserGuiding provides the best pricing on the market for the features it offers:
- 14-day free trial (no credit card required)
- Basic Plan: $82/month when billed annually for up to 2500 MAU
- Professional Plan: $333/month when billed annually for up to 20000 MAU with unlimited guides
- Custom Quotation Available for Larger Companies and Start-ups
Interested? Try for youself, or talk to one of our experts:
Create Guided Product Tours in minutes, without coding!
Free & Open Source Guided Tour Software: Shepherd.js
Shepherd.js is an open-source JavaScript library that helps you create guided tours that walk users around your product.
If you don’t have any budget to invest in user onboarding and plenty of developer time at your hands, Shepherd.js is your solution. With the help of a developer you can create a guided tour, but it will be limited to that.
Also, customization and the variety of onboarding elements will also be limited while there will be no analytics or user segmentation available.
But as I’ve said, you’ll have a guided tour for free.
2 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 2 guided tour examples, and I’ll walk you through their onboarding process to provide as many insights as I can:
Evernote
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.
Let’s go over their user onboarding process and how they use a guided tour to explain the functions of their product.
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 it says “let’s find out how we can help you in less than a minute”, because it lets users know what exactly they will go through and how long it will last.
It’s important to be transparent to your users especially in their onboarding:
Remember when we said one size doesn’t fit all?
Evernote is aware of the situation as well, they know that each user logins from a different device and uses the product for different purposes. Below you can see how they personalize the onboarding process by asking a few questions first, then starting a guided tour of a feature based on the answer users provide:
They than go over each function in the editor, walking you through the product:
They avoid pushing all guided tours at once, showing a user all of the product in a single run can bore users.
That’s where an onboarding checklist comes into play.
Evernote doesn’t force users to go through the other guides, 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 ecommerce companies.
It helps merchants and e-commerce owners provide their end-users with customizable products.
They’ve been using UserGuiding to create their guided tours and other onboarding elements, which make their product much easier to adopt.
Here’s Zakeke’s initial guided product tour, with a GIF on their welcome modal:
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 your product, which is integrating Zakeke with their users’ ecommerce stores.
If the users achieve value, they will be more willing to learn about how they can better use it, but they initially want to solve their problems.
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.
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.
Hope I could be of help in making your website more accessible, and digestible for your users!
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 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 if it includes guided tours; the developers are responsible for creating the guided tours. But, thanks to no-code tools such as UserGuiding, non-technical people 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 people can utilize it to create engaging automated user onboarding flows.
