Onboarding: How to familiarize the user with the interface

In mobile interfaces

Onboarding in mobile applications refers to the first few slides displayed at launch that introduce the user to the application before authorizing or using it.

These slides are called introductory or introductory onboarding.

Introductory onboarding

These slides have two main purposes:

1. To motivate people to log in, sign up and use the application in every possible way;
2. to help you understand the interface.

The second case is interesting because the user is already explained how to use the application before he even sees the interface.

This works quite well if the app functionality is small and can be easily described in the following slides:

1. take a picture of a tree,
2. add a caption,
3. share on social networks.

An example of an introductory onboarding

In this case, the user can easily perform the described actions immediately after familiarization.

But this method is bad if the application goes much further than three steps. For example, the first slide told the user how to use statistics. The second told where to start phone calls. In the third, something else. But the user, it turns out, at this moment only wants to change the avatar in the profile of one of the invited friends in his account. And after a while he will need all the available functionality. But the onboarding is already over, and all the knowledge is long forgotten.

Such situations can be avoided in several ways:

1. provide the ability to review the onboarding slides,
2. situational onboarding.

Situational onboarding

It’s a bad idea to spend three slides explaining how to use the interface when you first start the application.

It is better to use these slides to give the user a general understanding of what the application is and what to expect from it. For example, I would not want to sign up for a service that I do not actually need. It is better to learn the interface as you go.

The easiest (and most used) way is to show via the interface where the buttons are located and what they are responsible for.

An example of situational onboarding

Let’s say you opened the Dashboard and immediately arrows and inscriptions appeared on top, showing what and how it worked. And if the user goes further, for example to the call history, similar explanations about how to use this part of the interface appear on top of the interface.

The advantage of this approach is that knowledge is only given to the user when it is needed. If you open a part, you get an explanation about it. You didn’t open another part — they didn’t tell you anything about it.

In web interfaces

Although it is believed that with the reduction of the screen size and the time of interaction with the device, there is one thing: the time to decide whether to use the interface on the web is much shorter than in mobile applications. This is due to the large number of alternative sites that offer the same, perhaps even easier and clearer. On the web, it is quite easy to try all these alternatives: click here, click there, click here, if you don’t like it – ​​close and go back to another tab.

In mobile applications, however, this is not yet the case. In smartphones and tablets, people spend time searching for an application, installing it (can you imagine websites needing to be installed on the first visit?), then watching introductory slides, trying to use the application… Not many people want to spend so much time every time, searching for a new suitable application.

Let’s face it: if you have a lot of tutorials on your application’s interface, you can’t call it simple.

The product landing page is the introductory onboarding. And situational onboarding for websites should be used when the interface is not the most common. Or when icons with not the most common metaphors. Or the specialization is quite specific (let’s say, bond market analysis).

About the terminology

Sometimes Onboarding is called tutorials. There are Tips, Tricks. Whatever you call it, it doesn’t affect the outcome. But getting the terminology right in the early stages of product development will help everyone simplify their life in the future.

I’m Sasha Tikhonov, co-founder and art director at Flyphant.

We are Flyphant. Mobile and web development, graphic design, motion graphics — this is all what we not only do, but love to do.

flyphant.com · twitter · facebook · instagram

---

Onboarding: How to get the user familiar with the interface was originally published in UX Planet on Medium. People continued the conversation by bookmarking and commenting on this story.