Product Tutorials: what it is and how to use it

6 min readOct 31, 2022

Let’s talk about an interesting tool that can provide your product value, when your new user log in for the first time. Tutorials it’s a great tool that establish a caring relationship between your users and your product from day one. It shows that you don’t leave them alone exploring your app or service, but teach how to use it. It’s like to take their hand, walk through the product together and get familiar with all main features. Likewise, it’s as important as providing feedback after all actions.

I’ve heard an interesting point — a child will cry in two ways — If you leave him alone in a huge hall and in a tiny room. It helped me realized that you shouldn’t restrict your user (tiny room) and give them too much freedom (huge hall) as well. In any size of a place you need to be close to them, suggest a direction to move and keep them in the loop about the result of their next step. If they simply stare at the first screen and gathering what to do next, then they give no chance to your product and your retention might be lower and lower. Engagement is everything, so you need to help them make an action — tap, scroll, type, etc.

I’ve selected two options for product tutorials — it’s a one touch components or a full guide. One touch components are used pointwise in a flow to highlight one feature. A full guide consists of several one touch components (the same or different) and provide a concise and useful flow. Let’s check all of them.

One touch components:

Tooltips — a tiny hint that explain a user what a certain feature or UI element can do. Tooltip don’t prompt an action from users and looks like a secondary element;

Hotspots — alerts that stand out a certain element of your product. It’s a great way to provide crucial information about a new feature and help a user to interact with it. It can include 1+ buttons, a close button, images, title and explanation text;

Pop-ups — modal windows that require users to take an action. It helps engage users and explain the value of the product. It also can include several buttons, image, text and even an explainer onboarding video If it’s necessary;

Temporary card — it’s a block with that can provide a user detailed information about new feature. It’s a secondary element which has a button, an option close it (forever) and a small description.

Behavior Tutorial — it’s an animated or static splash screen that demonstrates which gestures you can use to control the product;

Task list — it’s an interactive list of actions that shows a user what exactly they need to do to achieve a goal and display the progress of their steps. The point with progress is crucial, as it’s a strong motivator for a user to complete all easy tasks to feel the pleasant emotion of completion. Especially, when the first task has already done when user sees this task list at first!

A full guide:

A product tour — is a concise, interactive guide that helps a new user to become familiar with the product and get the most of it. It helps reach product activation before users lose an interest. A product tour can include a mix of modals and tooltips to create an awesome user experience. It’s a linear flow that just show what user can use in a product.

An interactive walkthrough — it’s an interactive and non-linear flow. It’s not about showing several steps one by one. It’s about teaching users under your control. You explain the first step and a user has only one action — to explore it. And then you tell about next step, and again — no other options, only to explore it!

It can consist of such components:

A welcome screen;
A micro survey to create a customize experience (non-linear);
A checklist with several tasks to help user pass through the main flow (interactive).

It depends on a situation — what to choose. For example, if you add a new feature, and it’s quite simple to explore, then a simple tooltip will be enough. But If your flow is more complicated or unusual, it’d better to help users pass this flow without any mistakes by providing an interactive walkthrough. What does it mean?

Select a main flow your user need to do in your app;
Divide your flow into a key points (action 1 / action 2 / action 3);
Define a way to communicate (tooltip, pop-up, to-do list, hotspot, etc.). You can mix your tools or choose the only one;
Exclude an option to let a user make a mistake through a flow.

Let’s see how in Yazio this tutorial is working:

💡 Recommendation: I find inspiration for product tutorials in different websites. Dropbox is a great example! You can try to implement the key idea from web into your app. But be sure, that your flow and guide are simple, focused and not overwhelmed. Avoid using extra information and edit long sentences into clear and short ones.

Now I have a task for you! Identify these elements and write down in comments your answer ⬇

CONCLUSION:

Tutorials are very important If you want to improve your product metrics. It’s a great way to provide the value of a product, engage users and help them reach the Aha Moment! And don’t forget that all of these metrics have financial influence for business. Product tutorials it’s also important flow for A/B testing, so try different combinations and techniques for your interactive walkthrough. Just help your users to use a product easily, and you’ll see how your churn rate will decrease and everyone will be happy!

Thanks for reading! I hope it was useful for you! And if it was, don’t forget to clap to let me know about it! And kind reminder: save this story to avoid loosing this article! ❤️

Wish you a productive day, smiles and sunny energy!

Links:

Product Tutorials: what it is and how to use it

One touch components:

A full guide:

CONCLUSION:

Written by Ella Fiskind