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.
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.
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.)
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.
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.
Let’s me give you a gist with a few interesting product tour examples.
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 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.
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.
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!
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.
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:
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.