8 Best Practices When Designing Mobile App Onboarding Flow

Queble
7 min readOct 26, 2017

--

This article was originally published on http://www.queblesolutions.com

The average smartphone user launches nine apps a day. On a monthly basis, each smartphone user accesses about 30 apps, which amounts to anywhere from one-third to half of all apps an average user has on their phone. This means the average smartphone user has a lot of apps on their device that they don’t use at all. In fact, around 25 percent of customers will abandon an app after a single use. App users often bail for the following reasons:

• Not seeing enough value after first or second use
• Bad user experience with the user interface (e.g., navigation is difficult)
• Having expectations that aren’t met
• Technical glitches or bugs that make the user experience frustrating or annoying
• Having a signup flow that’s too lengthy or intrusive

It’s not just enough to design an app that will be downloaded. You also want an app that will be successfully used on a regular basis. One way to do is by putting some extra effort into the design of your app’s onboarding flow, referring to the way users are introduced to your app and its features. Here are some of the best practices to keep in mind to make your product more welcoming to new users.

1. Go Beyond the Ordinary with Introductory Animations

Attention spans today are roughly 5–8 seconds, so start your app experience with an intro that goes beyond the ordinary. Introductory animations can help you achieve this goal. An effective animation that cleverly shows what your app is for and offers a general idea of what it does is a great first step in creating that “wow” moment likely to keep a user hooked. Make animation an effective part of your onboarding flow, like what was done with the app design seen here, by:

• Basing animated features on the problem that app is trying solve
• Testing intro animations before launch to see what resonates most with users
• Mixing animation with explanatory text to improve understanding of what an app does or what problem is being solved

2. Allow Users to Learn By Doing

In many instances, the best onboarding flow is one that allows users to primarily learn by doing. Allow users some room to play around with your app since people tend to learn better by doing rather than having to sit through an into video and a set of instructions. On the other hand, if you have an app where it’s not clear what do from a first glance, you’ll want to include some instructions. You can do this in a way that’s not distracting with progressive onboarding by presenting brief instructions on the same screen as whatever feature is being used to improve understanding. If you need too much explanation to show how to use your app or any of its features, however, you may want to rethink your interface design altogether or go back to the drawing board and simplify things.

3. Make Walkthroughs Optional

Some users naturally want to learn more about the main features of your app while others may already know what a feature is supposed to do. Keep all users happy by making any walkthroughs you include as part of your app optional. For instance, you might include tappable buttons for “start” and “skip” to allow a user to decide if they want to dive right in or learn more about your app’s various capabilities. There’s a Google Maps app that does this effectively with scrollable graphics with self-explanatory illustrations, short blocks of text, and the option to learn more just to start using any of the features. Avoid walkthroughs that come across as instruction manuals. If your app is going to require users to remember a lot of things just to use it, they’re not likely to keep using it.

If you are enjoying this story, make sure you clap 👏👏 so that others can discover this article as well!

4. Only Use Coach Marks When Necessary

Often used to quickly let users know how to navigate through various app functions, coach marks can help new users know how to get around within an application better. Still, you want to find a happy medium with how you use them. Feature only one coach mark at a time to avoid presenting a cluttered or confusing screen. Also, avoid using coach marks for functions that are just common sense to keep your users from getting bored or annoyed. There are exceptions to this rule, as long as you are creative with your use of multiple coach marks. For example, this design uses strategic question marks to allow users to click on various parts of the screen to get more info on functions.

5. Use Blank Spaces to Your Advantage

Apps are going to be viewed on smaller screens. Therefore, it only stands to reason that too much of anything, whether it’s a welcome image or instructions, is going to create clutter or confusion — and sometimes both of these things. Instead, effectively use blank space and spread your explanations out over several screens. Doing so will also make it easier for users to digest instructions. Further improve navigation through explanations with options to “skip,” “go back,” or press “OK” to move on. You can even use your blank spaces to add a related image that emphasizes the specific instruction being conveyed on each page.

6. Offer a Demo Version of Your App If Signing Up Will Be Required

Consumers today are often willing to share personal info, but only if they know what they’ll likely be getting in return. The same is true with app users. If users of your app will be required to create an account, ease hesitation to do share any personal details with a demo version of your app. Further, entice users to sign up and provide the requested info by including some of your main features within the demo version of your app. It’s kind of like giving users a “test drive” option before asking them to commit to anything more.

On a related note, once you do get users to sign up or create an account, consider this process as an opportunity to get to know your users. For example, with a food app, you might ask users for their cuisine preferences as they sign up so you’ll have an idea of what kind of content is likely to appeal to them. You can also use this info to engage with your users outside of the app. Continuing with the food example, you might use your knowledge of preferences to send emails to users when you have a special that involves their preferred foods. You may even automate the process with tap segmentation where you list preferences in a way that allows users to simply tab what they prefer.

7. Strategically Use Progressive Visual Hints

If your app has a lot of instructions by nature of what it does, as is often the case with apps that are games, avoid confusion with progressive visual hints. Strategically place your hints in spots where users are likely to ask themselves “Okay, what do I do next?” as they dive further into your app. Don’t forget to include an option to disable or turn off the visual hints for returning users who already know what to do.

8. Make Tutorials/Walkthroughs Into Little Games

Okay, so you have an app that’s going to require a tutorial, and there’s no way you can not have one. So, how do you prevent your tutorial from affecting your onboarding flow? Make it into a mini-game with “rewards” at the end of any walkthrough you’ll need to include. Referred to as gamification, this design concept borrows elements commonly used in games and applies those same concepts to apps that have non-game uses. What you’ll do is turn your walkthroughs into treasure hunts where the “reward” contains the feature being described. Further, reinforce the game concept with terms like “congratulations!” or “way to go!” as users work there way through the tutorial. Besides, everybody likes to receive praise, so this should also put your users in a good mood.

Bonus Tip: Test and Analyze Your Onboarding Flow

Once you’ve set up your onboarding flow, take some time to test what you’ve created. There are a few ways to do this. One method is to ask people you know to use your app and offer their feedback. Another option is to do a test launch with your app to see how a small group of users react to your onboarding flow. Use any feedback you get from either method to fine-tune your onboarding design before full launch.

Conclusion

The lesson to be learned here? First impressions matter. This is true when it comes to any mobile app, especially an application you don’t want to be among the ones that just sit on someone’s phone like a discarded pair of shoes that looked cooler on the box. If you take a look at some examples of effective mobile app launch screens, you’ll notice a mix of simplicity and brand relevance. This is part of what’s needed to keep users engaged with an app. What you’ll also notice is that everyone is reflective of the app’s purpose or the brand’s image. The key to creating an effective mobile app onboarding flow is to keep the user engaged beyond the launch screen and make their in-app experience a productive and enjoyable one.

--

--

Queble

You bring industry expertise, and we build solutions that deliver business strategies to every end customer. www.queble.design