How to Create Mobile App Onboarding

Create mobile app onboarding

In a perfect world every user is carefully reading through your app’s description before actually downloading it. However, our world is by no means perfect. The reality is harsh – most of the users never read a word about the app they’re about to use.

But don’t get all sad about it. That’s where onboarding screens come into play! What is mobile onboarding? It’s the thing that’s gonna save souls of the new users who know nothing about how your app works and what functions it has.

There are a few different kinds of onboarding tutorials. We’ll take a look at the three most vital ones: start wizards, coach marks and empty screens.

Now let’s list through all of those onboarding techniques and figure out some crucial things for successful mobile onboarding design!

Start wizards

Start wizards OnBoarding iOS

This one is exactly what it sounds like. It’s a visual guide that runs on the first launch of the app. Start wizards are usually made of a few slides describing the most important functions of your app. Their purpose is to get users “on board”.

As it is the first thing a user looks at when opening the app you wanna be sure to make it as simple and easy to understand as possible.

Onboarding framework gif

By the way, our team has developed an awesome open source solution for iOS to help people develop mobile app onboardings easily and quickly!

Try on GitHub

Here you can check out a few examples of the library usage in our projects. Thanks to this solution we’ve decreased the time of this block development tremendously. Plus, because of the fact that the library is highly customizable, we get cool unique onboardings every time.

Develop favourite places app

You don’t wanna confuse users from the very first minutes and what’s even worse – confuse them with the help of your onboarding tutorial, which is supposed to help get the overall gist of the app’s functions. Be sure to apply that when you create mobile app onboardings.

Usually start wizards should be used for the apps that have some functions, which haven’t yet become a commonplace and aren’t intuitively understood by all users. However, mobile app onboarding experience is simply amazing thing to have even for simple apps.

Main features:

  • Start wizard is only shown on app’s first launch
  • The duration is no more than 30 seconds
  • No interaction. The slides are strictly informative.

Things to keep in mind:

  • Try to give as little text as possible. You only need to convey the most important things. Be concise.
  • Make the screenshots or animations of your app’s screens in a way that users would easily understand the most important functions. Keep it simple.
  • Try to keep the number of screenshots to a minimum.
  • Avoid explaining obvious things – you’ll lull your users to sleep.
  • To make sure your user onboarding is viewed fully (however, not necessarily carefully) put the “Get started” button at the very end of the onboarding – on the last slide.
  • Be sure to emphasize on the successful task completion once the user is through. Everyone likes getting a pat on the back.
  • Write text hints like you would explain the app functions to a friend – be concise and try to avoid technical terms.

Collect info onboarding

You can also collect info on user’s preferences in order to get more details. This kind of library usage is shown on the picture above.

Coach Marks

In a nutshell coach marks are slightly interactive start wizards. They are too shown on first app launch and are designed to explain the most important functions. However, there is a difference.

Coach marks are represented in the form of overlays over mobile app screens with some elements highlighted and instructions for users to follow. This kind of onboardings has proven to be very effective. They add more engagement to the learning process.

These are the kind of onboardings that might be useful not only on first launch but later on as well. Especially if your app got lots of interesting functions that might not be apparent to a newcomer.

You don’t want for users to rapidly skim through the slides just to get rid of the onboarding. It’s very likely that some of not that obvious functions might become an unreachable luxury for those users. That’s why you need to follow a few rules.

Coach marks onboarding

Things to keep in mind:

  • Keep the amount of text content to a minimum.
  • Once users are done with your tutorial make sure to let them know where the onboarding can be found [There’s a library for overlays with some neat UX]
  • All the rules for start wizards apply as well.

Read also:

Empty screens

Empty screens are basically the kind of screens that contain nothing. But they are definitely going to!

Empty screens are usually empty on your app’s first launch – when there’s no user data saved. They also can be used to inform users about some troubles.

It’s no big secret that most of modern apps for iOS and Android are hooked up to the servers in the cloud. However, it often happens that user has internet connection problems or simply goes offline. That’s when empty screens come in handy

Empty screens onboarding

On the picture above you can see an example of a good empty screen as well as an example of a bad one. The right approach here is to not only show the empty screen, but offer users some things to do in order to fill the empty screen with stuff.

Here’s the list of the most commonly used empty screens:

  • Recycling bin
  • Bookmarks
  • Empty messages folder
  • Empty playlist
  • Notebook without notes

The empty screen issue

Users usually don’t even remember the times they were dealing with empty screens. That’s because it’s usually happening at the very beginning of app usage. User interaction with empty screens can have two different outcomes:

Negative impression

Downloading the app Staring at the empty screen Still can’t understand anything, have no idea what to do next Can’t find the way out of it [State of failure] Deleting the app.

Positive impression

Downloading the app — Looking at the empty screen — Getting the idea of what to do next — [State of success] — Continuing on working with the app.

These two use cases show the importance of a pretty controversial thing – not making the empty screen empty… If you’re not creating any intuitive hints for users you are digging your own grave!

The empty screen is considered to be a second-priority kind of screen and therefore it’s often given too little attention. However, there’s no way to cut the concept of empty screens out of your app’s architecture.

If UI designers haven’t taken care of empty screens, developers definitely will! The sad thing is – they probably will throw a standard image that has nothing to do with your app’s design, therefore causing the aforementioned “Negative outcome”.

Empty screens

What’s the solution?

The solution is simple. You need to take care of empty screens by making sure to design them well. Empty screens is an awesome way to make a good first impression and create an amazing user experience for your app.

A perfect empty screen should explain users:

  • What kind of screen they’re looking at and why it is empty
  • What to do in order to add something to that screen
  • Things they can do after the screen is no longer empty

Conclusion

By putting time and effort into creating such things as start wizards and empty screens you show your appreciation and respect to your app’s users that goes beyond this particular app boundaries. And such things are inevitably paid off.

Now that we gave you some tips on how to create mobile app onboarding you can go ahead and apply them!

If you need any help on developing mobile apps feel free to contact us. Our team has plenty of experience creating all kinds of apps and a whole lot of happy customers.

Comments