Adobe Creative Cloud

July 25, 2016 /UX/UI Design /

XD Essentials: Tutorials for Onboarding in Mobile Apps

What happens right after installation can makes or break any app. You may come up with the best looking app, but if users cannot learn how to use it easily, they are most likely going to abandon it. It’s crucial to help new users get familiar with your app, to get them using it as soon as possible.

A tutorial is a popular way of introducing an app’s features to the user. It can take many forms, ranging from a set of instructions to completing a task or interactive demo session. In this article, we’ll provide tips on how to design tutorials that will help you provide the best experience for your users.

What Makes a Tutorial Successful?

Every app is unique in what it does and how it does it. This means users don’t know how to use them beforehand. A good tutorial clears up a lot of confusion right from the start by providing users just enough support to accomplish a task they can’t yet complete independently. It usually seeks to teach by example, and saves users from stressing out when they use an app for the first time.

Brief and Focused

Apps that are highly functional are generally harder for users to learn how to use initially. Don’t make them even harder for users by presenting all your features up front in a single tutorial.

This instructional overlay from the UP by Jawbone tutorial is a clear example of screen stuffed with information. Too many tips are being shown at once and this makes the product seem overly complicated.

Rather than focusing on a single feature, this instructional overlay outlines every possible action a user can do on the screen. Image credit: Mobile Patterns

Rather than focusing on a single feature, this instructional overlay outlines every possible action a user can do on the screen. Image credit: Mobile Patterns

Rather than focusing on a single feature, this instructional overlay outlines every possible action a user can do on the screen. Image credit: Mobile-Patterns

When you design your tutorial, you should fill it only with the information necessary at the point of the interaction. This helps focus a user’s attention on features that are most likely to be useful to them. And it’s more effective to focus on a single interaction than attempting to explain every possible area of the user interface, because minimizing the amount of instructions focuses  a user’s attention on a single action.

YouTube app follows the rule “one slide, one concept” and focuses each hint on a single, unfamiliar interaction. Image credit: nngroup

YouTube app follows the rule “one slide, one concept” and focuses each hint on a single, unfamiliar interaction. Image credit: nngroup

When hints are presented one at a time and at the right moment, it makes a lot easier for users to understand and learn them.

Designed For Users

Users have goals and want to get things done using your app. To design a good tutorial, you need to learn about your users, involve them in the design process, and interact with them. Users don’t necessarily want to do the things you need them to do in order to be successful. As Jakob Nielsen stated:“One of usability’s most hard-earned lessons is that ‘you are not the user.’” That’s why it’s essential to design and optimize the user experience for outsiders, not insiders (you or your team).

Powerful Tutorials

These variations make tutorials a reliable and user-friendly feature in certain instances. Let’s consider some complex and interesting cases:

Progressive Onboarding

Interactive progressive onboarding is a user-guided tour where hints are triggered when the user reaches the appropriate point in their experience. Thus, hints may appear in a different order for different users.

If your app has a fairly complex workflow or contains non-standard interactions (such as in-app gestures), then progressive onboarding is a good choice. Solar Weather app helps the user to take action over time, as functionality is introduced.

tut2

Scaffolding

Scaffolding has been defined by Wood, Bruner, and Ross as a process where “adult controlling those elements of the task that are essentially beyond the learner’s capacity.” A single more knowledgeable person, such as a teacher, helps learners by providing them with exactly the support they need to move forward and achieve a goal. The teacher also highlights the critical features of the task and provides hints that might help learners reflect. Apps that use scaffolding do the same as a teacher.

If you have an app which introduces a brand new concept itself, then scaffolding is a good choice. Pinterest is an example of app which uses scaffolding to introduce the concept of pinning itself: the first time users login, they get a walkthrough while they’re also setting up the app and being prompted to take action. The goal behind this process is to give users their first taste of success and motivate them to keep on pinning.

tut3

Interactive Warm-Up

It is well know fact that people learn best by doing. An interactive warm-up is a practical exercise in which the user is taken into a dedicated flow to complete tasks that represent the main interactions of the app. A warm-up exercise is often used to establish and achieve a goal in the context of the app’s normal interaction.

An interactive warm-up is a hands on approach for games. Animated hints in Plants vs. Zombies game demonstrate how a user should interact with an interface. Such guidance appears just before a user needs to complete an action, and only triggered when the user reaches the appropriate point in their experience.

tut1

Conclusion

Users don’t launch an app to spend time learning how to use it, but rather to complete a task in as short amount of time as possible. When you design a tutorial try to follow a simple rule — show less, provide more. In order to achieve good UX, you must get the right split between initial and secondary features. You have to disclose everything that users need up front, so that they only have to focus on the secondary actions on rare occasions.

UX/UI Design

Design. Prototype. Share. All in Adobe XD.

Go from idea to prototype faster with Adobe Experience Design (Preview) CC, the first all-in-one tool for creating and sharing website and mobile app designs. Test drive the XD preview and tell us what you think.

DOWNLOAD