If you are part of the product design world, then you must have in one way or the other come across Martin LeBlanc’s viral tweet, “A user interface is like a joke. If you have to explain it, it’s not that good.”
A user interface is like a joke. If you have to explain it, it’s not that good.
— Martin LeBlanc (@martinleblanc) May 14, 2014
On the basic level, I totally agree with Martin. But to be honest, there are indeed many web apps whose UI and UX need an explanation before adoption. (Nope. Not a joke!)
Martin added on with another insight, “What is intuitive changes over time and so does the best design solution!” And well, that was spot on! You will explore quite a bit of this idea in this article.
Money, overly sophisticated tech, and largely misinterpreted UX
Let’s take HBO’s popular TV series, Silicon Valley. Until the latest season, the show was entirely tip-toeing around their intuitive, revolutionary middle-out compression software, Pied Piper. But it flopped. Reason being, Pied Piper’s user interface was helluva complex. Pied Piper, albeit being an amazing technology, had deteriorating active users in comparison to the installs.
But then, why didn’t they redesign Pied Piper?
The reason was clear – Money, overly sophisticated tech, and largely misinterpreted UX. (Sadly, all of them didn’t quite add up!)
I’m sure that you might have heard one too many stories which had a similar preface. Haven’t you?
Bottomline: Simplifying user interface is imminent for a better user experience. No matter how sophisticated the platform is. And this works vice versa!
If you wreck your UX for the first time or misfire it, then for obvious reasons you have to cover up. That’s where the curious case of Product Tours sets the stage.
Product tours are nowadays widely used to simplify the complexities, hand-holding users and helping them realize the value of the technology.
To validate my thoughts, I kick-started a conversation on DesignerNews.co – “Are Product tours replacing regular User Onboarding.” I did get some interesting comments from the community which became one of the reasons for this article. So, I took those ideas and combined some from my months of research, and painted a clear picture of the Interactive Product Tour.
If you aren’t already aware, this is what I am talking about:
Before I delve deep into explaining the what and why of product tour, let me give you another food for thought.
5 years back, Max Rudberg, a Visual and User Interface Designer, wrote a bold article that created a fair bit of constructive, critical discussion in the Product and Designer Community. The article titled “If you see a UI walkthrough, they blew it” fumed with reactions from professionals about the website tour and walkthroughs.
Max explained that “When it comes to teaching users to use your UIs, I would recommend doing so mainly by progressive disclosure with slight visual cues and subtle animations – only use a walkthrough as a final resort.”
And quite frankly, this was a blow to the thousands of web apps who were already investing on product tours. But, simultaneously it was also a nod to the thought process of the UI and UX designers, whose believes that good product design need not have a guided product tour
Let me try and rekindle that fire that Max and Martin lit with an unbiased version of the interactive product tours and its subsets. (As an add-on, I’ve also included the Pros and Cons for each that will help you decided whether you should consider it, or not!)
For starters, let’s by defining a product tour.
What is a Product Tour?
Product tour is a solution that helps in showcasing a product’s capability with a quick tutorial. The tutorial could be a combination of multiple patterns like these product tour examples. (Click on the link to jump to the elaborate section.)
– Splash Screens
– Modal Window
– Interactive walkthroughs
– Instructional Overlays & Coachmarks
– Explainer video
The idea of these patterns is to give the user a positive first impression that streamlines and solidifies the user onboarding process, while helping him/her understand the core value of the product, quickly!
There is also a common misconception that product tours are generally just website walkthroughs. That they are pop-ups that guide users on multiple touch-points prompting them to take action. The fact is, a good product tour is always a combination of multiple elements.
Why would you use Product tours?
Many new age websites employ product tours to meet and greet users.
The reason – Quick gratification.
Once a user signs up for your product, the first thing he/she needs is to understand the value of the product. The user success depends upon how they engage with the product, and use them as expected. Not on how well they figure out the product.
Image source – The Awkward Yeti
Product tours help in streamlining this by highlighting and prompting the actions that will invoke a user’s muscle memory. Which in turn helps the user perform better without any additional training after they are onboard.
Product Tour Examples (The Unbiased Version)
Let’s me give you a gist with a few interesting product tour examples.
1. Splash screen + Modal Windows (a.k.a Pop-up)
The reason why I combined both of them is that they work quite well together. And well, Evernote understands that, and they have already implemented it.
Splash screens are basically graphic elements that contain the image, logo, and information about the application. Whereas a modal window is usually a clickable prompt that forces the user to interact before they proceed.
In the example above, Evernote forces the user to decide on the 3 given options. Based on the selected option, Evernote’s getting started process continues.
- The user understands the value proposition quickly. Depending upon their set expectations of the web application, they can proceed further.
- The user is forced to take an action. The onboarding process is mandatory before proceeding further.
- They can also be used as a product pitch (think Subscription model) as opposed to a product tour.
2. Interactive walkthroughs
The most popular version of Product tours is, in fact, the most critiqued one as well. Many product designers feel that interactive walkthroughs are derogatory to the website/web-apps design.
And well, the argument is valid. Because the interactive walkthrough is a final resort to many of application where they first build the product and then create the user onboarding experience on top of it.
But then, think of it is in this way. Isn’t your user onboarding basically a guide for the uninitiated, to their own personal promised lands?
Onboarding can’t control how amazing your product is. Although it can help with getting people amazed while guiding them through the product. Interactive walkthroughs is a medium to achieve this.
It helps in handholding the user through an application over the major touch-points, prompting them to take actions. Often used in a complex and sophisticated application, they are widely accepted by Enterprises for employee training as well. For example, here’s the example of an interactive walkthrough.
This interactive walkthrough (created using Whatfix) helps in guiding the users efficiently across the complex ITSM platform, ServiceNow. It helps users in understanding the different aspects of the platform quickly in contrast with learning it through a verbose knowledge base.
- The user can be guided through all the major touch-points effectively.
- Used widely for user onboarding, employee training, and interactive contextual help.
- Use cases are apt for complex applications. Helps in reducing user confusion and human errors, and subsequently increasing the user performance and productivity
- Tech savvy users might feel that interactive walkthroughs are too restrictive and slow for regular SaaS products. This could mainly be because quite often the walkthroughs are repetitive instead of on-demand.
- The walkthroughs could break/fail in the case of changing UI elements and needs regular maintenance.
3. Instructional overlays and Coach marks
Commonly found in mobile apps, instructionals overlays and coach marks are brief hints that help the users find what they need on the app. It is also prevalent in web apps which provide quick instructions that require users’ attention.
For example, here’s how Google uses coach marks are used on Gmail.
The user’s attention is focused on the highlighted part, which explains how the inbox is categorized. It’s given in a way that is easily comprehensible to the user.
- Helps the user grab the concept quickly without much time delay.
- Nudges users to take a particular action.
- Focuses on primary user tasks or atypical interactions.
- Showing too many hints at once could increase the user’s cognitive load.
- Quite often they are also used to show multiple features on the same screen, which sometimes may not useful to specific user types.
These are very similar to interactive walkthroughs but do not prompt actions. The idea is to give the user a quick overview of a new feature, a description, a promotion or an instant contextual help. Facebook does this beautifully.
Remember how they got your attention for the all new Facebook reactions? That is a brilliantly designed interactive tooltip!
- They only appear when required, and are not as obtrusive in comparison to its counterparts.
- Icons like “Info” and “?” are familiar to most users.
- It is specific to particular UI elements and is mostly activated on mouse hover or in the presence of a particular element.
5. Explainer video
Since the advent YouTube, Vimeo, and Wistia, the use of explainer videos in the product tour has become more of a basic thing. Explainer videos have boomed in popularity for services that may be very hard to describe in a clear and succinct way.
By harnessing both the visual and auditory sense of the users, these videos help in narrating engaging and relatable ideas of a product to the user. Giving the user the business value right up front.
The most popular success story about explainer video is that of Dropbox.
“Upon putting up the video, Dropbox’s conversion rate jumped up by 10%, resulting in 5 million new customers and $24 million in revenue. With over 25 million views today, the video played a huge role in getting Dropbox to 100 million users by 2012, with $0 advertising spend.” – Customer.io
The explainer video is also used in many products as a part of their product tour, wherein they begin the product tour with a splash screen or interactive walkthrough with a video embed.
- It helps in telling your users who you are, what you do and why you’re the best choice within your niche in a quick video.
- Videos are generally more engaging than illustrations and text.
- Could be time-consuming and may not give the users what they expect in detail
- Knowledge retention for videos are poor in comparison to contextual help (If a user gets confused then he/she may have to return to the video or other resources to proceed)
The Final Verdict!
Product tours are completely subjective to the built of your web app and user type that you cater to!
Web apps that are sophisticated would generally have a lot of touch-points, that users generally may not interact with. This could be because:
- These touch-points may not be important to their work. (Different user type)
- The web-apps navigation and discoverability is not streamlined
- The feature itself is confusing and may need handholding
- Jargons used within the app is not understandable to laymen
- Knowledge retained from the onboarding and training process is diluted
Product tours are a solution that deals smartly with these situations by giving the user a prompt to learn by interaction. Albeit, it may be annoying to power users, we cannot brush away the fact it is also preferred by many users.
For many of the amazing web products on the internet today, the road from stranger to a thriving userbase is littered with potholes. A poor onboarding process and training experience mean countless users are left to fend for themselves. And these are users whose lives could be significantly improved through using these products.
If you think you use a product that isn’t as easy to grasp in a few minutes, then it’s wise to consider an option like a Product tour. Always remember, if your users can’t use your product, then that means it doesn’t work!
What do you think about Product tours? Let’s discuss in the comments below.
Are you looking for an interactive product tour solution? I urge you to try out Whatfix.