Guided Tours for Web Products – Examples, Tools, Best Practices

When was the last time you’ve visited someplace new?

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 your users. 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 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
• 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 best to use it.

This can be a single tour that explains the core functions of your product, or a collection of tours that each focus on different features of your product.

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:

How Guided Tours are changing the game 💡

Interactivity and gamification have been at the forefront of both design and education trends for the last decade, and they’re here to stay.

So what if I told you that 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 how to play it...

Guided tours introduce interactivity and real-time assistance for web products, and are both extremely digestible and accessible for any user profile. Almost every leading website and product/platform offers interactive educational content, with the primary option being guided tours.

Interactive product tours are:

✅ Accessible, because they’re built right into your product, so your users don’t have to switch browser tabs to access instructions.

✅ Digestible, because your users are going to learn best by completing 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 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:

1. 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:

• The No-Code Way: The name says it all. With this method, you adopt a third-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. With this method, you hand over your design to the product team, who could potentially already be too busy improving your product or creating new features. The benefit of this method is that you have complete control over what you will create.

3) Create (and iterate)

If you’ve chosen to use the in-house development way, you’re actually done.

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:

• Make sure the design is as friendly as possible
• Once you’ve created a draft, 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 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 within and beyond your product, there is one outstanding product that you can use to create guided tours.

I’ll go over two products, UserGuiding and Shepherd.js, which are respectively no-code and open-source.

No-Code Website Guided Tour Software: UserGuiding

UserGuiding is a no-code user onboarding solution that can be used to create the perfect guided tours in just minutes.

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.

Here are four 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:

1. You won’t depend on developers to create your onboarding
2. Everyone on your team can utilize the product from marketing to customer success.

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:

• 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 UX

• You can use UserGuiding’s brand new feature, Resource Center, to be there for your users at all times.

3) User Segmentation/Targeting

One size doesn’t fit all.

It never does.

Each of your users is trying to accomplish different things with your product. Their language, technical background, and 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 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

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 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

Interested? Try it for yourself 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 introduce users to your product.

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. With the help of a developer, you can create a guided tour – but it will be limited to only that.

Also, customization and the variety of onboarding elements will also be limited, with no available analytics or user segmentation.

But as I’ve said, you’ll have a guided tour for free.

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

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 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.

It’s important to be transparent to your users, especially during their onboarding:

Remember when we said one size doesn’t fit all?

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 than go over each function in the editor, walking you through the product:

They avoid pushing all guided tours at once, because showing a user all of the product in a single run can quickly become boring.

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.

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 their product, which is integrating Zakeke with their users’ e-commerce stores.

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.

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.

I hope I was able to help make 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 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.