Best Examples & Practices of Guided Tours & Tutorials in Mobile Apps

What is a guided tour in a mobile app?

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

  • providing step-by-step guidance and explanations,
  •  interactive demonstrations,
  •  contextual tips.

Dedicated UI elements provide the instructions. These features shorten the learning curve. Moreover, they empower users to quickly become proficient in using new platforms.

What are the types of guided tours?

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.

Best examples of guided product tours

№1: Take advantage of animated instructions like Notion

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.

4 walkthrough screns. First says "We call it Slack". Next says "It keeps things on topic by giving each project a space of its own." Next says "And brings your team together, so they're just a tap away". The last screen says "That you can get work done no matter where you are".
Screens of Slacks’ walkthrough

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.

Notion tutorial screen. The copy says: "Some essential tips: Touch and hold to record any content".
Notions’ tutorial animation

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. 

№2: Use tooltips to present relevant information like Otter

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.

Screens of Otters' guided tour with various tooltips.
Screens of Otters’ guided tour

№3: Use page indicator and navigation for multi-step instructions like Meetup

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.

Tooltips of Evernote's guided tour. Near the lower edge of the tooltip box there are for dots, one of them is darker than the others. The darker dot indicates on which step user currently is.
Tooltips of a guided tour in Evernote are equipped with step indicators.

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.

Tooltips of the app Meetups' guided tour, with page indicators.
Meetups’ tooltips, equipped with “1 of 3”-type step indicator.

№4: Make instruction dismissable through skip and close button like Slack

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.

Screen of Slacks' walkthrough with "Skip intro" buttons, tooltips of Otter and Slack that have close icon in the right top corner.
It is a good strategy to allow users dismiss instructions. Slack let’s users skip the walkthrough at the beginning, and Otters gives users option to quickly close instructional tooltips.

№5: Let the user access instructions again like Evernote

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.

Screen on Evernotes' tutorial. The tooltip at the top of the screens says: "Learn at your own pace. Complete these 6 tutorials to see how Evernote can help accomplish your goals". Below there is a widget with oprions like "Capture it and forget it" or "Connect to your calendar".
Evernotes’ tutorial widget.

Why are Guided Tours and tutorials important?

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

Talebook UI Kit – Onboarding Wireframes