We all know the power of the first contact. The first date may turn into the love of your life – or get forgotten in a couple of hours.
Tasting a new meal for the first time, you may get delighted – or hate even hearing its name ever after. The first contact with a teacher may get a student amazed at a subject – or deathly bored. Still, that’s not a lottery, that’s far from luck: in most cases, the first contact leads to success in case you are well-prepared. Today we are going to discuss one of the ways to organize the first date of your app with users with an onboarding tutorial.
Basically the term origins from HR sphere: it marks techniques and approaches whose aim is to help newcomers quickly adapt to the new conditions so that they could perform well. The area of user experience design took the idea together with the term. In UX design, onboarding is a set of techniques and interactions aimed at comforting users and give the initial introduction of the product. As the Material Design guide states: “Onboarding is one point in a longer journey that begins in the app store and ends with the user taking the first key retention-correlated action in your app.”
When you work on an app onboarding, your task is setting a clear visual hierarchy on the screen. Keep in mind that users are rarely ready to devote much of their precious time to learning a new product before real interactions start. What’s more, the capacities of working memory are also limited, so it’s vital to prioritize information thoughtfully for this stage of interaction with the product.
The role of onboarding is well-checked in practice, and often onboarding UX issues are what separates the successful product from a market failure. For example, in one of the articles in Adobe Creative Cloud Blog, UX researcher, and cognitive psychologist Rob Youmans, YouTube’s Head of UX Research Sciences, says “When it comes to design, the place that I see primacy and recency, in particular, is in terms of onboarding. When you start to learn about a new product there’s often a tutorial, wizard, instructions or something. It’s wise for designers to consider primacy and recency in this context because you’re going to want to put the most important information first or last if you’re hoping that someone is going to remember them later as they use your product or system.”
There are three main goals behind app onboarding: it greets, informs and engages a user.
Onboarding screens set the first contact between the user and the app. It is a sort of introduction that somehow imitates communication in the non-virtual world with a greeting. It is especially clear if the app uses a mascot or character that is chosen to reflect a flow of direct communication with a user. However, the greeting should be short and concise to avoid distracting users from the essential information.
Another part of the onboarding mission is informing a user about the benefits they get with this product or basic operations they are going to do. User research and clearly defined USP of the product will help the creative team to find an effective solution that will highlight the vital points quickly to the users.
One more important aspect of app onboarding is the foundation it lays for the desirability of the product. Well-designed onboarding tutorials engage users to try the beneficial features of the app. It helps a user tolerate the first steps into the unknown. In addition, onboarding screens provide the first introduction into the style and looks of the app. Based on the analysis of the target audience, it may become another hook for user’s interest to see more. One more factor to keep in mind is that most users are visually driven and even aesthetically driven creatures: we tend to get interested in what appeals to our ideas of beauty and harmony or sets particular emotions with its visual performance. So, onboarding screens become a favorable way to activate this approach from the first seconds.
Three types of onboarding popular for modern applications usually reflect the following:
Onboarding is usually the set of screens shown during the first interaction with the app. It is recommended not to show it to returning users as it will just waste their time.
Typically, UX designers apply 3-4 screens for onboarding. It’s enough to give a quick insight into the app benefits or functions without making this pre-interaction stage too long. And of course, it is good to boost usability from the first minutes of interaction. What’s important, don’t forget to consider the screens that came before onboarding and the ones that will come after it. This will help to make the flow natural and avoid duplication of data.
Visual content is processed much faster than textual by human brains. Onboarding supported with meaningful interface illustrations allows for a quicker explanation of the features and makes the UI lively.
Another trick making an app tutorial not only informative but also lovely and engaging is animation. Motion makes interaction more dynamic, delights users, catches attention at once. Interface animation can make the essential details quickly noticeable.
However, motion can increase the time and traffic to get it loaded, so discuss it with developers in the aspect of its technical realization.
As for any guidelines or presentations, in the onboarding tutorial, words are power. Yet, there are two simple rules to make them work: tell them short and make them helpful. It’s vital to find an effective way not to waste the precious seconds which the user is ready to devote to checking the screens. If possible, involve the copywriter who will help to create the interface copy that makes every single letter count. The outcome has to be an attractive and clear copy that applies the language appealing to the target audience and corresponding to the objectives set for the product.
Based on that, one more aspect to check well is choice of types and fonts, background, and placement of the copy. All those factors influence the readability of the text: if they aren’t done and tested properly, the text performance decreases, even if it’s well-written.
From the very start of the interaction, users need to know where they are and how long is the whole process. A screen indicator is an effective way to inform users about the flow which gives more confidence and therefore makes the user experience positive.
One more thing to keep in mind is enabling the user to skip the tutorial. Not everyone needs it, even using the product for the first time, so in many cases, it’s reasonable to let them skip the onboarding screens and save their time. The decision upon this function has to be done on the basis of testing and analysis of the target audience.
You never have a second chance to make the first impression. This is the main aim behind any onboarding tutorial – not to miss the chance to impress the user and make a good card of invitation.
About the author: Marina Yalanska, tech/design writer and researcher, editor of Icons8 Blog
Title image designed by Kyrylo Kazachek with the vector graphics from Flamenco pack on Ouch
Check the most hated UI and UX patterns, learn the practical definition of usability, and review 7 basic types of UI animation.
Lunacy’s latest release comes with new features designed to speed up your workflow and a…
Sometimes there is just no time to wait for a professional designer to make your…
Graphic designers use dynamics and movement to make their work more exciting. It can help…
Design should not feel sham. It should reflect a real-world experience, with a lot of…
New AI-based routine killer from the Icons8 team for those who need to edit images…
Freelance designers are exposed to a range of cybersecurity threats on a daily basis. Here’s…