Designing an Onboarding Process That Actually Helps Users Learn
Jumping into a new app usually comes with a struggle of learning how it works. You might get the hang of it quickly, but there’s always a learning process. The goal of onboarding is to introduce new users to a website, program, or application. With onboarding, you should teach about individual features, how they work, and how the app offers value to the user.
In a recent post we covered mobile onboarding screens that focus on designs and content styles. In this post, I want to share tips for the user experience and the marketing process of guiding a user through the onboarding process.
Read Also: 40 Mobile Apps Onboarding Designs for Your Inspiration
Use images & diagrams
Graphics and visual elements can explain a user experience much better than words. Rely on visuals to help guide users through the process as needed. This is a valuable strategy because it draws the eye onto the onboarding process and clarifies intent. With visuals your goal is to show rather than tell.
You can do this many different ways with full screenshots, small icons, or illustrations/vector graphics that fit into the design workflow. Take for example this onboarding screen from designer Salman Shah.
He uses vector icons to visually cue each slide. The icons work as metaphors for each point, and help sell the features to the user.
If you don’t have skills to design icons from scratch you can always use free icon packs to your advantage. Many designers release their work for free, and you can easily incorporate these icons into your onboarding screens.
You can move beyond static icons to include animation as well. Take for example the finance-based onboarding process created by Iaroslav Zhmak.
He uses plenty of icons but also places animations into each section. You learn what the app does through visual cues that animate to draw your attention.
Notice that each onboarding slide does have a text description as well. This is the real meat of the message because it tells users what they can actually do with the application. Sometimes a text-only page can feel like a stuffy college textbook though. Use visuals and animations to spice up each part of the onboarding process.
Display features in action
Try to avoid stating the obvious features or forcing users to memorize all the individual parts of the app. Also try to avoid basic statements that guide users around the app like “this is the main menu, this is the friends screen”, etc. Instead try to focus on what these things can do, and how the user can interact with these areas.
This strategy is reminiscent of the old marketing adage “don’t sell the steak, sell the sizzle”. You want to sell the app through its benefits to the user, not through arbitrary features and menu items.
For example, this design created by Prakhar Sharma guides you through a full process of working in your bank account.