WE CREATE BRANDS PEOPLE Lβ™₯VE
Share

Onboarding for First-Time Users


Tegra - June 16, 2020 - 0 comments

Google Guidelines on Onboarding for First-Time Users
Onboarding is a virtual unboxing experience that helps users get started with an app.

Onboarding for First-Time Users πŸ€

Courtesy of @_ayushjangra_
β €
Onboarding is a virtual unboxing experience that helps users get started with an app.
β €
Onboarding is one point in a long journey that begins in the app store and ends with the user taking the first key retention-correlated action in your 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 ❌
β €
Cheers! πŸ‘‹

3 onboarding models  There are three onboarding models: self-select, quickstart, and top user benefits.  Self-Select
Allow users to customize their experiences.  Quickstart
Start the user directly in the app.  Top user benefits
Display a carousel or a brief animation highlighting benefits of using the app.

3 onboarding models

There are three onboarding models: self-select, quickstart, and top user benefits.

Self-Select
Allow users to customize their experiences.

Quickstart
Start the user directly in the app.

Top user benefits
Display a carousel or a brief animation highlighting the benefits of using the app.

Self-select model.  The Self-Select model allows users to customize their first-run experience by making a short series of choices. 
Choices should:  + Be meaningful and noticeable 
+ Provide new information 
+ Be short

Self-select model

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

  • Be meaningful and noticeable
  • Provide new information
  • Be short
Quickstart model  In the Quickstart model, users land directly in the UI without any onboarding model shown (other than sign in and setup). 
The Quickstart model: 
+ Enables users to quickly get started with the core functionality of the app 
+ Often prioritizes the first key action 
+ Can also provide an optional way to learn more or ask for help

Quickstart model

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

  • Enables users to quickly get started with the core functionality of the app
  • Often prioritizes the first key action
  • Can also provide an optional way to learn more or ask for help
Top user benefits model  The Top User Benefits onboarding model contains a brief autoplay carousel, or animated storyboard, that highlights the primary benefits from using an app. 
+ 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)

Top user benefits model

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

  • 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)
Mobile and tablet portrait  Specifications 
Headline: Type 24sp, Leading 32sp Subhead: Type 16sp, Leading 24sp 
Line Height: 32sp Padding between top of button and center of copy: 56dp (allowing for 1-3 lines of text) 
Vertical padding from image to pagination dots: 24dp

Mobile and tablet portrait

Specifications
Headline: Type 24sp, Leading 32sp
Subhead: Type 16sp, Leading 24sp
Line Height: 32sp
Padding between the top of button and center of copy: 56dp (allowing for 1-3 lines of text)
Vertical padding from image to pagination dots: 24dp

Mobile and tablet landscape  Specifications 
Headline: Type 24sp, Leading 32sp Subhead: Type 16sp, Leading 24sp Line Height: 32sp 
Padding between top of button and center of copy: 56dp (allowing for 1-3 lines of text) Vertical padding from image to pagination dots: 24dp

Mobile and tablet landscape

Specifications
Headline: Type 24sp, Leading 32sp
Subhead: Type 16sp, Leading 24sp
Line Height: 32sp
Padding between the top of button and center of copy: 56dp (allowing for 1-3 lines of text)
Vertical padding from image to pagination dots: 24dp

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

Desktop

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

Get 50+ Marketing Tools we use in Tegra 🀘

Follow the link πŸ‘‰ tegra.co/tools to get a list of 50+ free (or cheap) growth marketing tools that we and other growth agencies use to scale businesses like yours + growth hacking insights.

Related posts

Leave a Reply