Material Design Onboarding in Android- Quickstart (Tap Target)

In this post, we’ll look at a different type of Material Design Onboarding called Quickstart. We will integrate this model in our Android app using Tap Target.

This is part of the updated Material Design guidelines for apps. There are 3 types of Material Design onboarding models:

  1. Self-Select 
    Display a series of choices allowing users to customize their app experience
  2. Quickstart
    Let users start using your app immediately and highlight actions they can take.
  3. Top User Benefits
    Display the top 3 features of your app with a carousel.

 

material design onboarding models android

Self-Select, Quickstart, & Top User Benefits (Left to Right) – material.google.com

Which Material Design Onboarding model to use?

The ‘Quickstart‘ model only serves you best when your app is something people are already familiar with. Like a chat, email, or camera app.

Provide value and encourage return visits by introducing users to new features and functionality at contextually relevant moments. – Feature Discovery (material.google.com)

However, if your app is something groundbreaking and new. If it has new features people don’t know how to use or aren’t familiar with. Then the ‘Top User Benefits’ model is the best choice.

If you’re app’s home feed is built based on user choices. Like how most social networks build your newsfeed the first time you join. Then for cases like these,  you have the ‘Self-Select’ model.

The table below can help decide which model best fits your Material Design app:

material design onboarding models

Source: material.google.com

NOTE:

While onboarding is a crucial part of your app’s experience, your major focus must be on the app itself. As there is no use having an amazing onboarding experience, with a mediocre app. This increases user expectation, only to disappoint them later.


Quickstart Onboarding with Tap Target

quickstart tap target animation

Get the demo App here.

A feature discovery prompt focuses user attention on a specific UI element. – Tap target

Now that you know what the Tap Target effect looks like, let’s get to using it.

Luckily, there’s a handy library called Material TapTarget Prompt by Samuel Wall. So let’s use it to make quick work of this.

Let’s start by adding the dependency. First, add the jcenter repository in your project level build.gradle file.

repositories {
   jcenter()
}

Next, add the library dependency to your app level build.gradle file.

dependencies { 
    compile 'uk.co.samuelwall:material-tap-target-prompt:1.1.4' 
    ... 
}

Finally, decide upon which View must show the Tap Target.

new MaterialTapTargetPrompt.Builder(YourActivity.this)
        .setTarget(findViewById(R.id.yourView))
        .setPrimaryText("Here is an interesting feature")
        .setSecondaryText("Tap here and you will be surprised")
        .setOnHidePromptListener(new MaterialTapTargetPrompt.OnHidePromptListener()
        {
            @Override
            public void onHidePrompt(MotionEvent event, boolean tappedTarget)
            {
                //TODO: Store in SharedPrefs so you don't show this prompt again.
            }

            @Override
            public void onHidePromptComplete()
            {
            }
        })
        .show();

 Use Tap Target sparingly

Use Tap Target to only highlight the most important features. It helps direct users to an action you want them to take.
For example, take the Gmail Android app. Its primary action is to compose new email, which is prioritized with a Floating Action Button. Hence the FAB here, is a perfect case for Tap Target.

How to start an App Business in less than a week with zero app development. APPPortunity Coaching Program - Enroll now for an insane 98% discount!

READ ALSO:

Keep in mind that ‘Quickstart’ must only be used ONCE per feature. Introduce features to users one by one, gradually over time.

This will involve you storing a SharedPreference, once Tap Target has been displayed for a feature.

You can always allow users to reset this via your app’s Settings screen.

Customization

Here are a few Builder methods for the MaterialTapTargetPrompt class:

  • Animation Interpolators-
    setAnimationInterpolator(new FastOutSlowInInterpolator())
  • Change highlighted icon (useful for color inversion when showing TapTarget)-
    setIcon(R.drawable.ic_your_icon)
  • Theming-
    Some properties you can define for styling TapTarget in values/styles.xml
        – focalRadius
        – backgroundColour
        – focalColour
        – primaryText
        – secondaryText
        – focalRadius
        – primaryTextSize
        – secondaryTextSize 

Remember that Quickstart will highlight a feature only ONCE. Also, it reveals each feature gradually over time as a user uses the app. The time span could be a week or so. Once a feature is highlighted, Tap Target is not displayed for it again.

SAMPLE APP: Available on GitHub.


We are already familiar with the ‘Top User Benefits’ model. Its the App intro sliders made with ViewPager.

READ: Onboarding with Android ViewPager: The Google Way

The Quickstart model for Material Design onboarding is the fastest way to get users familiarize with your app. It uses Tap Target helps encourage user action.

Quickstart takes users straight into your app. Then, on the way it sprinkles little tips and suggestions with how and what to use. This model in my opinion, is the best by far. Because mobile users do NOT like to wait!

So which Material Design Onboarding model are you using in your Android app? Let me know in the comments, or subscribe below for more updates!


Header image: Onboarding screens by Murat Gürsoy

App developer with an eye for design. Loves to create apps with good UI/ UX that doesn’t annoy people. In his spare time, he likes to draw and paint.

Enjoyed this article? Please spread the word.

Subscribe to Newsletter
Be the first to get latest updates and exclusive content
straight to your email inbox.
STAY UPDATED
Chill, I hate spam too. You can unsubscribe anytime.

Top Recommended Books by StackOverflow Users

Suleiman

App developer with an eye for design. Loves to create apps with good UI/ UX that doesn't annoy people. In his spare time, he likes to draw and paint.

You may also like...

Enjoyed this article? Please spread the word.

Subscribe to Newsletter
Be the first to get latest updates and exclusive content
straight to your email inbox.
STAY UPDATED
Chill, I hate spam too. You can unsubscribe anytime.

Gradle setup, ProGuard rules, Material Design palette, metrics and much more

FREE Material Design Starter Project

For more details, click on the below link.
GET IT NOW FOR ANDROID STUDIO!
Download FREE
STARTER PROJECT
Material Design Template Project for Android Studio
DOWNLOAD STARTER PROJECT
Develop faster with an all-in-one, customizable Material Design App
GET THE APP CODE
Don't miss this App Template!