Website guided tours are a popular way to ensure the success of new users during the most vital period of app usage – the first few minutes.
We’ve helped to create thousands of guides for our customers, but we’ve never taken a look at some of the science behind what makes a great tour, until now.
So in the post, we’ll be looking at some of our top tips for guide creation, and squaring that with a number of academic studies and advice from some of the web’s top UX consultants to help you answer the question: “What makes a great guided tour?”
The importance of the story
In the beginning, there were video guides. Often simple screen captures and voiceovers made using Camtasia or other screen recording software, they were the vanguard of a tutorial movement which would eventually be dominated by the rich, interactive HTML-based guided tours we use today.
It was using video guides that we picked up a lot of the academic research that’s contributed to what users like and dislike about online tutorials – many of the information studies findings over the past decade have helped shape our understanding of what makes a good and a bad user tutorial experience today.
Although today’s guides offer a far better user experience -with rich HTML, embeddable content, formatting and easy setup – the most important aspect of guide creation is still the story that you tell, and how you tell it.
Why you should get to the good stuff quickly
The advent of HTML-based multi-stage guides allowed tour creators more leeway when it came to guide length. Make a video of you clicking around a webpage that’s 30 minutes long, and your users will complain about it – no-one wants to sit and watch that for an afternoon. However, when an element of audience participation was introduced (e.g. clicking next to move through the tutorial), it became much more tempting for guide creators to begin taking more of their audiences’ time.
But that’s a bad idea.
In repeated academic studies, researchers have found that audiences prefer content that is short and to the point.
One of the most-cited pieces of research, by Bowles-Terry et al., suggests guide creators tick off the most important content first and then dealing with the less important stuff later on. As it dates from 2010, it refers to video-based tutorials, but the principle still holds true:
"[An] important lesson from these comments is the necessity of creating a video in the same way that a newspaper article is written. In journalism this is called the “inverted pyramid” where the most important information (how to complete the task at hand) comes first and is followed by the contextual information, which the students consistently deemed the less important information. This way, the viewer immediately gets what she needs and then may choose to leave the tutorial."
Bowles-Terry, Melissa, Merinda Kaye Hensley and Lisa Janicke Hinchliffe. 2010. Best practices for online video tutorials: A study of student preferences and understanding. Communications in Information Literacy 4, no. 1: 17-28
If you’re unfamiliar with the inverted pyramid, here’s a handy explainer video:
Tell the whole story
Users hate being left in the dark and they’re very vocal about it – one of the most common pieces of feedback we receive is that website guided tours don’t answer the users questions fully.
Though sometimes this can be a case of guide mislabelling, it’s equally likely to be a guide that’s incomplete, because it misses out key parts of a user journey and is consequentially very difficult to repeat.
With many guide creators (though not, ahem, Nickelled), the problem lies in the inability to push users onto the next page within the guide.
Any guide creation service must be able to do this – if the user flow for an action you want to highlight involves visiting two pages before it’s complete, show the user those two pages. If parts of your app sit behind a password wall, ensure your users can see those bits in a secure way as well (ideally without logging in).
Use text – but not too much
Text is much preferred over video as a tour medium – it enables viewers to set their own pace.
According to a study by Lori. S. Mestre at the University of Illinois, 16 out of 21 students chose a static tutorial over a video-based one, saying that they preferred to be able to quickly navigate and choose which information they take in.
However, rich guides have created a huge opportunity for guide authors to use extensive amounts of text – our advice is to keep text brief, and ideally bulleted, with a maximum of one or two comments per guide stage.
This is backed up by the team at Extra Credits, experts in the video gaming community who tool a delightfully informative look at tutorials in the below video. One of their key recommendations? Don’t use too much text.
Allow for repetition and navigation
Text also allows users a considerable degree of freedom, which is far preferred by users. When Mestre asked what users preferred in static tutorials over videos, almost all of the answers appear to reference ease of navigation and access to information, with comments, like "I can choose what I need to know and go directly to it,” and "I like to be able to pick and choose and go step by step."
The difficulties these participants encountered with the screencast tutorials were mainly that they did not feel they could easily go back and find the spot that would help them with a step, even with chapter markers, and that it was difficult to do the steps along with the tutorial. Many students did not want to spend the time viewing the video or listening to it. They preferred to quickly scan the web page and get to the task at hand.
Lori S. Mestre, (2012),"Student preference for tutorial design: a usability study", Reference Services Review, Vol. 40 Iss: 2 pp. 258 – 276
Therefore, modern web tutorials need to include easy navigation – forward and back buttons at a minimum, so that users can skip over content they’re not interested in.
We also recommend an anchor – the ability to see all of the steps in your guide, and to navigate to a specific one if required. Not only does this make it easy for users to get to what they want, it also removes any fear from the user about the length of the guide, as it’s clearly stated up front.
Avoid niche user cases
A common pitfall we see with Nickelled guided tours is the inclusion of niche features in a guide – where a ‘nice-to-have’ feature is highlighted despite not being part of the core user flow.
Our strong recommendation would be to avoid cases like this – decide on what the user needs to know and include those steps only. This helps to boost both completion rates and positive feedback.
Your guides should work cross-browser and cross-device – take that as a given.
At Nickelled, approximately 40% of our guides are served to mobile devices, which is actually below the 56% of traffic to leading US websites which is mobile, according to SimilarWeb.
However, guides should also be linguistically accessible – as a rule, work on the assumption that visitors will not understand any technical jargon you include, and keep it to a minimum. You can use a simple online readability scanner such as Readability Score for this.
Finally, remember that not everybody reads English – if your guide is aimed at an international audience, you’re going to want to offer some easy language switching options and steps that are localised as required. Remember this when choosing an online tutorial platform – not all have the ability to localise phrases which are hard-coded into their systems (typically prompts such as ‘Next’, or ‘Back’).
Making the time for a great story
Time is at the heart of all good guided tours. Not just time in the sense of how long it take a user to complete your tour (although this shouldn’t, generally, be more than 30-60 seconds, according to Bowles-Terry et al.), but in the sense of when to show your guides.
Use context wisely
Guides should fulfil their purpose of bringing users progressively deeper into an app by making use of context to show tours at the right time.
According to Interaction Designer Krystal Higgins, walkthroughs should follow the principle of ‘Interact, Don’t Tell’. Doing this allows users to accomplish their tasks successfully (with help along the way) but ensures that guides aren’t obtrusive – in this sense, it’s more similar to coaching rather than instructing.
For instance, if there are three actions which you wish people to complete sequentially when they sign up for you app, is showing them how to do all three the best way to achieve that outcome? And is immediately after signup the best time to do it? Most likely not – by splitting down the tasks into three tours and showing them only after the user has completed the previous step, you have a far high chance of success.
You can do this in many ways – one of our most popular integrations, for example, is Intercom, which allows businesses to send messages to their users (or a link to a guided tour) at a contextually relevant time. It’s also been hard-coded by some clients.
Don’t just drop people in
Autoplay tours are the worst – as UserTesting noted by in 2014, "a lot of folks don’t care for auto-play experiences”, particularly if they are already familiar with a tool or it’s easy to master.
Smashing Magazine goes one step further, referring to mobile apps, noting:
"user testing showed that users skip or otherwise ignore dialogs, tours, video demos and transparencies. At best, users find them a minor inconvenience. At worst, the patterns significantly aggravate new users who are trying to get into the app."
Guided tours, then, should always be a choice for the user – easily accessible from a contextually-relevant place, but not so in-your-face that they’re frustrating. We’ve seen tour usage more than double when the guide is linked-to from our easily-minimized widget, for instance, suggesting that latent usage may be higher were navigation easier. This recommendation is backed up again by Bowles-Terry et al, which stated that "tutorials should be linked at the point of need”.
Make it rewarding
Fundamentally, users are reading your guide to try to complete something – it makes logical sense that they should be rewarded at the end of their journey with the opportunity to actually complete it. If possible, set a final landing page for your guide which will be the first stage on the journey for the guide that they’ve just completed.
On top of that, the team at Smashing Magazine rightly point out, "instilling a sense of playfulness is still sometimes appropriate.”
Tours which feel less like a lecture are more likely to be successful, which higher completion and satisfaction rates, so think about how design and language contribute to the tone of your walkthrough.
What do you think makes a great website guided tour?
Guided tours can make a huge difference to the success of your users – and we’re fortunate that a lot of research has already been done into what makes a great user experience in creating one.
What do you think makes a great guided tour? Is there anything that you’ve found works well?
We’ll love to continue the conversation on Twitter (@nickelledapp).