After weeks of brainstorming, sketching, designing, and arduous development, your app’s ready to launch. Your team’s enthusiasm is through the roof.
This is the moment of truth: Will the app be successful?
User onboarding has so much to do with an app’s success—really, it can make or break it. Done right, it’ll result in people coming back to use the app again and again.
Great user onboarding feels effortless, demonstrates value, and bridges the gap between users’ expectations and what the product can help them achieve.
Related: 5 key lessons for successful user onboarding
Distilling the experiences we’ve had building apps here at tapptitude, we’ve come up with a straightforward framework called instruction-action to better understand and design effective user onboarding flows for mobile products.
“A great user onboarding flow feels effortless and demonstrates value.”
The instruction-action framework is based on strategically playing with the 2 building blocks of the user onboarding process:
- Instruction elements
- Action elements
Instruction elements
Instruction elements are your best friends. Be it annotations, modals, or any other bits of copy, use instruction elements to efficiently communicate to the user how to use the app so they can discover its core value.
Some of the most popular instruction elements:
- Splash screen
- Welcome screens (with benefits or features)
- Annotations
- Permissions
- Explanatory modals
People won’t come back to use your app a second time if they don’t immediately understand how to get the most out of it.
Action elements
Nir Eyal’s Hook model says the actions someone takes in a product are triggered by carefully designed persuasion elements. Ideally, such elements are a combination of motivational and instructional content so that the user has the reasons to perform a task and also knows how to do so.
“Users need to immediately understand how to get the most out of your app.”
When it comes to action elements, think of strategic design elements: clear calls to action and suitable visuals that act as a trigger for the user. The smallest arrow can have a big impact. Signal to the user that they’re on the right track. Instead of guessing whether they should click or swipe, the user will feel encouraged to take action.
Examples of action elements:
- Sign in
- Sign up
- Allow access
- Actionable tool tip
In any given user onboarding process, instruction elements and action elements work together to lead the user where they can experience the product’s value. How you combine these 2 types of elements depends on the purpose of the screens and the overall logic of the onboarding process.
Some typical examples of purposes app screens could have:
- Browse through the primary features of the app
- Present best practices within the app
- Collect basic user account information in order to set up the app, tailored to the person using it
- Explain a feature while allowing the user to experience it at the same time; useful and fun
- Upsell your app’s capabilities: show people the app’s capabilities and offer a glimpse of what more it could do with just a little financial support on their behalf
“Make your app’s core value obvious every chance you get.”
Now it’s time to assess how to work with instruction and action elements.
Sometimes people don’t discover an app’s core value the first time they use it. So it’s the responsibility of the user onboarding process to get that person back on track and into the conversion flow.
Based on this premise, we realized that we’ve got 2 major areas where onboarding happens: outside product and inside product.
Outside-product onboarding
What are the chances of someone downloading and using your app without gathering the least bit of information about the product and believing in its promise?
Close to zero.
User onboarding ends with the user experiencing their ‘aha’ moment. But it all starts with their first encounter with the product, or what we like to call outside-product onboarding. And that usually happens long before using the product itself—on social media, the product’s website, or in the App Store. During these first encounters, the user establishes their expectations about the product and jumps inside the first phase of your conversion flow.
And this is just step 1 of outside-product user onboarding.
Think about Deliveroo’s App Store screens. Isn’t this what you’ve always wanted from a food delivery app? They’re spot on in presenting the benefits of the app.
Say you’ve convinced someone to download your app, and then they open the app for the very first time. What will this experience entail?
This is where step 2 of outside-product user onboarding takes place.
You could use a few instruction elements (nice visuals and bits of copy) and action elements to get the user inside the app. Show the user the most compelling benefits of your app in a few nicely designed screens, and encourage them every step of the way to try it out for themselves.
Related: Copywriting principles that will make new users love you
Another approach: Make it clear to users that sharing information about themselves will be rewarded in the long run. Use instruction elements to make your intentions clear, and action elements to point the user in the right direction.
If you’ve managed to spike the user’s interest and motivate them to give the app a chance, you can move on to the second major area of mobile user onboarding.
Inside-product onboarding
Once the user is inside the app, they’ll expect to find everything they’ve been promised in the previous onboarding phase. You don’t want them to get lost, wondering what to do next. So you have to show them where to go.
Instagram does a great job explaining the benefits of allowing access to photos and the microphone beforehand.
The focus of the onboarding process should be to guide the user towards the core value proposition of the app. Help them discover how the app can bring an improvement to the way they’ve been doing things up until now, or how much fun the app is. Once this is done, the user will be a lot more open to discover the rest of the app’s features, one at a time.
Let’s take a look at a few examples of how you could guide the user through the core use case of your app.
For a social app, people will expect to be able to contact a friend as soon as possible in order to decide if this product brings anything new to the table. Is the core feature of the product the ability to chat with friends and family, or is the user’s profile equally important? Show the users how to set up a profile with a minimum amount of information, how to add friends (offer the option to import contacts), and enable them to chat freely. Then cross your fingers.
“A good onboarding flow guides new users towards the app’s core value proposition.”
For a calendar app, it’s all about how well the product organizes the user’s schedule. Allow the user to either import or sync existing calendars and events from other platforms, if they want. Quickly enable the user to get the feel of the product. What’s the design of this calendar? Is the schedule easy to analyze? What kind of customization is available for the different types of events?
For a photo editing app, show the user how effortless the entire process is. Enable them to either pick an image from the camera roll or take a picture on the spot, guide them through the editing process using annotations where necessary, and finally present them with the sharing options. For people working with picture editing apps, a fluent editing journey is as important as the quality of the product.
A good mobile product deserves a solid user onboarding strategy. Don’t limit yourself to the product itself. Start planning by taking a close look at your app’s core value—and make it obvious every chance you get. Be it an ad for the app or an onboarding screen, everything has to make a valuable statement about the product and its capabilities.
Keep reading about onboarding
from InVision Blog http://blog.invisionapp.com/user-onboarding-framework/