Guided tours and tutorials are potent tools to help find themselves in the new app. It allows users to navigate complex interfaces, grasp core functionalities, and ultimately derive maximum value from their interactions with a product.
Guided tours are sometimes also called walkthroughs or product tours. Designers can use guided tours of all types of digital products.
They serve as virtual mentors, accompanying users on their journey through digital experiences. Tutorials can use many different types of guidance, such as
Dedicated UI elements provide the instructions. These features shorten the learning curve. Moreover, they empower users to quickly become proficient in using new platforms.
There are two main approaches to guide users through a digital product.
One of them is static onboarding screens. Those screens appear when users open the app for the first time. They often appear as a slide show – a quick presentation teaching the users how to use the app’s primary functions.
The other is a contextual instructions approach in the form of tooltips and coach marks. They provide information relevant to the current layout of the app or website.
This article will discuss best practices from the most popular apps. We will take product tour examples from widely used and successfull apps.
Onboarding screens appear right after opening the application for the very first time. They are a great way to welcome new users and show them the apps’ value proposition. For example, Slack, a widely used communication and collaboration platform, takes this approach. App walkthrough informs users, what the app does and what it is for.
Alternatively, it is an opportunity to demonstrate the app’s main features. The Notion, productivity and note-taking web application, presents its functions through screens with animations. A short animation showing a screen of the application demonstrates how users can organize their notes.
This method is handy when it describes actions that can be taken outside of the platform (like in the “Settings” of the device or actions done in a browser). For example, Evernote, a note-taking and task-management application, uses animation to explain how to save web content.
Many modern applications use contextual instruction to demonstrate their functions. Pieces of information nudge users into exploring various features of the app. Tooltips are located near the button that serves the function the tooltip describes.
For example Otter, a transcription software, guides users through the application and demonstrates how to use it using tooltips hovering over certain UI elements. Small arrows at one side of the tooltips draw the user’s attention to specific details. In some cases, Otter uses visual emphasis (like a darker background combined with a contrasting UI element) to further bring users’ attention to the element it describes.
A guided tour takes the user through different screens of the app. Tutorials can be done via tooltips describing certain interface elements one after the other.
For its instructions, divided into separated stages, Evernote uses tooltips containing step indicators and buttons that lead from one step to another. They provide navigation through instructions and allow users to take an actual guided tour through the app.
Meetup, a social media platform for hosting and organizing in-person and virtual activities, takes navigation through tutorials even further by allowing users to go back to the previous instruction.
Onboarding instructions appear when a user opens the app for the first time. However, not every person is a first-time user – some of them have previous experience with this interface and do not need this information.
Consequently, it is an excellent strategy to let users to skip or dismiss the tutorials. Lengthy, unskippable introductions can be frustrating for the users.
For example, welcome onboarding screens of Slack are easily skippable through the “Skip” button located at the top right corner. Users can just as easily dismiss the tooltips by using the close icon. Similarly, Otter’s tooltips always include close buttons that let users brush off instructions they are not interested in.
However, allowing users to access instructions again could be beneficial.
Most apps allow users to go through their guided tutorial only once and never again. If users prematurely skip initial instructions, they are left to explore the app on their own.
Providing the option to access instructions multiple times can help to avoid that scenario. Moreover, thanks to that approach, users can reinforce their understanding of the app. They can retake a tour to clarify doubts and refresh their memory on specific tasks or features.
Take an example from Evernote and its approach to guided tours and tutorials. After opening the app for the first time, users’ attention is brought to the “Get Started” widget, which contains six tutorials explaining how to use the app’s different functions.
Users can tour the app, guided by helpful tooltips, as often as they like. Then, the user can remove the widget by customizing the app’s home screen. Through the same function, they can bring the widget back and reaccess the tutorials if some interface elements are unclear.
If you are currently working on guided tour or tutorial flow yourself Talebook is a helpful resource to simplify your task.
This article was based on research conducted at Talebook. Here you can access the report based on that research. It was made using Talebook.io, an online research repository.
Furthermore, you can access the link to explore tutorial flow wireframes that are conveniently available for download. Wireframes are fully customizable and offered free of charge, so go on and start designing your user onboarding process today!