Growth & communications Onboarding

Onboarding

Onboarding is a virtual unboxing experience that helps users get started with an app’s UI. It should be brief and enhance the use of the app.

Usage Expand and collapse content An arrow that points down when collapsed and points up when expanded.

Your onboarding should have specific goals suited to the user’s level of familiarity with the app.

User context

Goals of the warm welcome

  • The user has already installed the app and doesn’t need to see more marketing for it
  • The user may be eager to try the app without reading an instruction manual
  • The user is not yet familiar with the app’s UI or ready to learn about it
  • Welcome users and excite them about the experience ahead
  • Help users implicitly or explicitly understand how the app can be used in their lives
  • Drive users to take actions that increase engagement and retention in the first seven days

Onboarding models Expand and collapse content An arrow that points down when collapsed and points up when expanded.

Onboarding is one point in a longer journey that begins in the app store and ends with either:

  • A first-run experience (FRE), or
  • A user’s first experience using an app

When designing your onboarding, consider the screens that came before it and those that will come after it.

Show onboarding to first-time users. Don’t show it to returning users.

Material design includes three onboarding models:

1. Self-Select

Allow users to customize their experiences.

2. Quickstart

Start the user directly in the app.

3. Top User Benefits

Display a brief autoplay carousel (or animatic) highlighting up to three benefits of using the app.

The onboarding best suited to your app depends on if your app uses a common, recognizable UI style and and how easy it is to set up.

Self-Select

Quickstart

Top User Benefits

When to use

  • The UI can be customized
  • Your app has setup and consent requirements

You’ve already identified the behaviors that correspond to increased engagement (in the first session) or increased retention (in the first seven days)

  • Your app is tackling a new challenge or providing a new kind of benefit
  • To announce new uses or major UI changes

When not to use

  • Your app is tackling a new challenge or providing a new kind of benefit
  • To announce new uses or major UI changes

Your app is tackling a new challenge or providing a new kind of benefit

  • Your app’s UI and benefits use patterns familiar to most users
  • Your app has no major changes

Combinations

Don’t combine Self Select with Top User Benefits

Ok to include setup before first-run experience

  • Don’t combine Top User Benefits with Self Select
  • It’s okay for your app to show setup after or as part of onboarding

Self-Select Expand and collapse content An arrow that points down when collapsed and points up when expanded.

The Self-Select model allows users to customize their first-run experience by making a short series of choices.

This experience provides implicit education, giving the user a sense of control and vested interest in the screens to come.

Sign-in screen

Self-Select model

Present the right choices

The choices you give users affect the success of your onboarding.

Choices should:

  • Be meaningful and noticeable
  • Provide new information
  • Be short

Meaningful and noticeable

Offer choices that have a meaningful and noticeable impact on the user experience. These implicitly teach users how to interact with your UI.

Do.

Selecting what to bundle will have a meaningful impact on the user experience.

Don't.

Knowing how often users check their stream doesn’t impact their experience.

Ask what you don’t know

Don’t ask for preferences that can be garnered from normal usage.

Do.

Normal usage won’t easily clarify what a user wants to bundle. It is valuable to ask the user their preferences.

Don't.

Don't ask users to make selections that will become evident with normal use of the app and that won't meaningfully change the first-run experience.

Keep it short

Limit choices to one screen, or make multiple screens feel connected to each other.

Each screen should have fewer than ten choices.

Do.

A single Self-Select screen

Don't.

Many Self-Select screens

When designing onboarding, think about how the onboarding process connects to a user’s first-run experience. After onboarding, the users should land on a screen that makes it easy to act on what they just learned.

Design

Design your Self-Select screens to relate to what your app does. Apps focused on content consumption may ask for topics of interest, whereas apps with feeds may ask which topics to bundle.

Some common Self-Select design patterns include:

Bundled List

Grid View

List

Quickstart Expand and collapse content An arrow that points down when collapsed and points up when expanded.

In the Quickstart model, users land directly in the UI without any onboarding model shown (other than sign in and setup).

The Quickstart model:

  1. Enables users to quickly get started with the core functionality of the app
  2. Often prioritizes the first key action
  3. Can also provide an optional way to learn more or ask for help

Best practices

Give users something to do

Rather than leaving users on a blank screen, your UI should encourage interaction.

Do.

Provide options to get the user started.

Don't.

Don’t leave users with nothing to do.

Offer education

If it appears as though the user is unclear how to use the app towards the end of the average first-run experience (90% of the way through the first session), display a UI prompt offering the opportunity to learn how to use the app.

Do.

Offer the user the opportunity to learn more about the app.

Don't.

Don’t force education upfront.

Prioritize the first key action

Choose the action most closely linked to engagement in the first seven days. Alternatively, introduce core functionality as tips for actions that a user hasn’t tried.

Do.

Nudge users to take the first key action.

Don't.

Don’t leave users with nothing to do.

Top User Benefits Expand and collapse content An arrow that points down when collapsed and points up when expanded.

The Top User Benefits onboarding model contains a brief autoplay carousel, or animated storyboard, that highlights up to three of the primary benefits from using an app.

Choosing the right benefits

The Top User Benefits model should demonstrate up to three primary benefits from using the app. These benefits should position the app as relevant and personal during a moment that matters, rather than give instructions or describe features.

When identifying which benefits to present, consider:

  • Problems that the app solves
  • The primary benefits the app creates
  • The app’s “toothbrush features” (meaning, a feature you would use once or twice a day)

Integration options

Auto-rotating carousel

A maximum of three illustrations should auto-rotate every two to three seconds and display pagination navigation. Auto-advance the first screen more quickly so that it’s clear this isn’t a single screen. The auto-advance feature should be disabled if the user touches the carousel.

Display a “Get Started” button throughout the animation, and loop through the animation continuously until the “Get Started” action is tapped.

The screen should be swipe-enabled, either in a forward or backward direction.

The button and pagination navigation are fixed. The typography is dynamic and on a separate field than the illustration, but at the same elevation.

Video

The most complex version of a Top User Benefits experience includes a highly produced video.

This should include a “Get Started” button, without pagination circles.

Video implementation

Best practices

Maintain visual continuity

Maintain visual continuity throughout characters, environments, style, typography, and button colors.

Do.

Using consistent visuals and colors throughout the experience unify the story by creating a uniform canvas for the button and circles.

Simplify

Simplify the visuals to the essentials needed to convey a concept.

Do.

The metaphor of saving files to the cloud is visually illustrated.

Don't.

There is no point of focus in this image.

Don’t be UI literal

Don’t show app UI if users haven't experienced it yet. Show the user benefit first.

You may display education about the specific UI in a later context.

Do.

This illustration helps convey the benefits of directions.

Don't.

Showing the actual app’s UI makes it unclear if the images are an illustration or an interactive element.

Design onboarding that connects to a first-run experience. The UI seen after onboarding should make it easy for users to act on what they just learned.

Design

The design of Top User Benefits should compliment the writing. If there’s an idea that can be better expressed through words, use text rather than imagery.

These layouts are designed to allow an illustration with a 1:1 aspect ratio to consistently fit on screens across all platforms. Ensure that the background and text color meet minimum contrast ratios for accessibility.

Mobile and tablet portrait

Place center-aligned copy and interactions beneath the illustration.

Mobile portrait

Tablet portrait

Mobile and tablet landscape

Place left-aligned copy and interactions against the right edge of the illustration, vertically centered.

Mobile landscape

Tablet landscape

Desktop

Place illustration, copy, and interactions in a centered card. Display “Next” and “Previous” buttons beside this card and pagination indicators beneath it.

Desktop

Warm welcome experiences for wearables and TV use different methods of interaction, and should be treated differently.

Platform Redlines

Mobile and tablet portrait

Copy and UI are center-aligned on the screen and built from the bottom of the screen upward with 24dp padding.

  1. Headline: Type 24sp, Leading 32sp
  2. Subhead 1: Type 15sp, Leading 24sp
  3. 32sp line height
  4. 56dp padding between the top of button and the center of copy (allowing room for 1-3 lines of text)
  5. 24dp vertical padding

Mobile and tablet landscape

Align copy and UI to the left edge of the illustration, vertically centered.

  1. Headline: Type 24sp, Leading 32sp
  2. Subhead 1: Type 15sp, Leading 24sp
  3. 32sp line height
  4. 56dp padding between the top of the button and the center of copy (allowing room for 1-3 lines of text)
  5. 24dp vertical padding

Desktop

  1. Headline: Type 24sp, Leading 32sp
  2. Subhead: Type 16sp, Leading 24sp
  3. Line Height: 32sp
  4. Padding between top of button and center of copy: 56dp (allowing for 1-3 lines of text)
  5. Vertical padding from image to pagination dots: 24dp
  6. Horizontal spacing from image to arrow: 48dp