← Visit Appcues.com
×
×

The essential guide to mobile user onboarding UI/UX patterns

Best practices and best-in-class examples of all the UI/UX patterns you need to create an exceptional mobile onboarding experience.
Skip to section:

Skip to section:

User onboarding, whether on mobile or desktop, represents the first experience that new users have with your product itself. This introduction often takes the form of a tutorial, walkthrough, or brief demo that teaches users how to use your app.  It’s a series of welcome screens and UI patterns that guide new users them through app functionality and introduce key features.

At the end of the onboarding experience, users should have all the key information they need to successfully navigate your app and achieve real value from it within the first session. The first time a user achieves value is called the aha moment, and onboarding’s job is to minimize the time it takes users to get there.

What does mobile user onboarding look like?

Mobile onboarding UI/UX can take many different forms, but the basic components tend to be pretty standard across apps. The welcome experience typically consists of overlays or full-screen modals that give a high-level view of app features and value propositions. After the welcome experience, the onboarding patterns expand to include things like tooltips, hotspots, slideouts, and modals designed to serve as helpful tips along the user journey. 

Let’s take a closer look at these UI/UX patterns in a mobile context, and go over some best practices for creating an exceptional mobile app onboarding experience.

1. Welcome screens and signup

acorns mobile app introduction welcome onboarding screens
Acorn’s welcome screens highlight the app’s value and leave users with a clear understanding of how they will benefit.

Mobile app users are notoriously impatient and fickle. An app that doesn’t get its point across quickly is an app that doesn’t succeed.

Many apps rely on customer data in order to function properly. The need to collect data doesn’t have to be a hinderance—in many cases it can be a great opportunity to provide a more personalized user experience, and let users know that you’re doing so. Take advantage of the declared data users provide as quickly as possible to provide instant feedback and let users know that their inputs are being used to create a more tailored experience—not just harvest information. 

And tailoring the experience right out of the gate gives users more incentive to stick around, since they know the content in your app will be relevant to them.

Tips for welcome screen design

  • Welcome messaging should be succinct, highlight your app’s mission, and communicate value throughout.
  • These first screens should match the look and feel of your core app.
  • Include a progress bar to move users through the screens and give them a clear line of sight to the end goal.
  • Since fullscreen patterns can feel disruptive, it’s often advisable to include a CTA that allows users to bypass the welcome flow if they wish. 
headspace mobile app welcome message personalization
Headspace’s personalized app onboarding flow allows users to customize every aspect of their mediation experience.

2. Mobile modals

skyscanner mobile data privacy settings design
Skyscanner uses a fullscreen modal to let users know about their data privacy options.

Mobile modals—which can be partial overlays (also called popups) or full-screen takeovers—are an extremely versatile UI pattern. Beyond the initial onboarding welcome message, modals can come in handy for any number important announcements you may have for existing users. This includes new feature announcements, product upsells, marketing campaigns, or essential permissions requests. Basically, anything really high-stakes or high-profile.

albert text sms opt in permission priming modal popup window
Albert’s permission prompt highlights the value of opting into text alerts.

Tips for mobile modal design

Mobile modals are an important part of any app interface, ensuring important messages get across to users loud and clear. A few tips for optimizing modals for mobile:

  • Use them sparingly. Not every update or marketing message is of equal importance. Save modals for the really critical communicationsEvery modal design should match the look and feel of your app.
  • Copy should be clear and concise, with a bold title or header for quick comprehension.
  • CTAs should drive directly to the action you want the user to take.
  • There should be a visible way to exit out of the message (no sneaky, hidden X buttons).
acorns invite a friend referral campaign in-app marketing
Acorn’s presents users with a compelling, uncomplicated offer that the user can take advantage of immediately.

Further reading: 8 examples of great mobile modals that will delight and engage your app users

3. Tooltips

duolingo plus introduction onboarding tooltip spotlight
Duolingo uses a simple tooltip (plus spotlight) to onboard existing users to additional features in the paid version of their app.

Mobile tooltips keep the learning state alive after the initial welcome flow has ended. They are great at providing contextual help while a user is actively engaged with your app. 

Tooltips can highlight an interface change, help with the discovery of new features, or get users to complete an important action. From a metrics perspective, tooltips can be used to boost engagement so that both session length and overall retention increases. 

yahoo sports large mobile tooltip
Yahoo Sports' mobile tooltip encourages users to take advantage of the Watch feature when it’s most useful (when a game is live).

Tips for mobile tooltip design

  • Tooltips should look and feel native to your brand but have enough visual contrast to stand out from the rest of the interface
  • Copy should be short—aim for less than 140 characters—and create a sense of excitement.
  • The messaging should communicate the value of the feature being highlighted 
  • Make sure you’re using data to drive decisions about tooltip timing and audience. Tooltips should fit into the user journey and be triggered by user behavior.
yummly speech bubble tooltip mobile feature adoption
Yummly uses a speech bubble tooltip to highlight a key app feature.

Further reading: 5 unique ways to use tooltips for mobile apps

4. Hotspots

vsco app hotspot notification
VSCO uses a small blue hotspot to encourage new users to explore a feature.

Hotspots are similar to notification badges, but have a wider range of use cases. . They’re a subtle, non-intrusive UI pattern that can be used for secondary alerts like new message alerts, to draw attention to new features, or to gently guide users through an app as a series of beacons 

At the moment, hotspots are more commonly found in desktop and web apps, but we expect more mobile apps to start experimenting with this pattern as the quest for more novel experiences continues. 

feedly hotspot beacon with tooltip example
A classic example of a hotspot (plus tooltip) in Feedly's web app.

Tips for hotspot design

Hotspots need to toe  the line between being  unobtrusive yet attention-grabbing. Basically, the design should be noticeable but not take front and center stage within the app. Since they are small, many apps give their hotspots subtle animations to better catch the user’s eye.   

5. Banners, slides & cards

uber eats discount code in-app marketing slide up
Uber Eats uses a rounded slide-up to welcome new users with a discount code.

Banners, slides, and cards aren’t exclusive to mobile, but this category is much more ubiquitous in mobile interfaces than on web or desktop. Banners and slides overlay the base UI of the app, whereas cards are in-line messages appear amidst core app content.

When used correctly, these patterns are great at notifying users about important information in real time without disrupting their entire app experience. Banners or slides can also be used to provide instant feedback to let users know that their actions have been successful.

Tips for banner, slide, and card design

The size and visual boldness of your banners, slides, and cards should be directly related to how critical the information they contain is. 

When you want to provide instant feedback about a user action, a small banner or slide works perfectly. You may want to have these patterns automatically fade out after a few seconds, or use a simple X button to let users dismiss the message.

chineasy app language lesson correct answer
Like other language learning apps, Hello Chinese relies on immediate feedback to keep users motivated through lessons. Here, they use a slide-up.

For task reminders, or to nudge users toward non-critical actions, an in-line card strikes the right balance between being obvious and non-disruptive. Cards should feel consistent with the rest of your app’s design—often a simple border and a few minor font adjustments is all you need to help them stand out. Include a clear CTA that lets users take action.

airbnb referral campaign in-line card
Airbnb uses an inline card to promote their refer-a-friend program without disrupting the in-app experience

When you have something exciting to say, a large slide can function much like a partial overlay modal on mobile. Use high-contrast, on-brand colors, bold title or header text, and eye-catching images where appropriate.

atom app feature announcement slideup banner
Atom used a large slide-up to alert users to an exciting new feature.

6. Checklists

acorns user onboarding checklist
Acorn's classic checklist encourages users to complete essential tasks.

Onboarding checklists help users complete important tasks within your app. This UI  pattern is perfect for injecting a dose of gamification into your app and can provide the motivation users need to finish multi-step onboarding processes. 

Checklists are effective because they break complex processes down into easy to accomplish tasks. And the familiar list format helps users visualize exactly how many steps left before they to the finish line.

Tips for onboarding checklist design

  • Stick to one task per checklist item to keep things simple and reward users at each step.
  • Use elements like progress bars and completion checkmarks to let users clearly see where they are in the process and what they need to do to finish. The closer they get to the end of the list, the higher their internal motivation will be. 
  • Remember to provide an easy way for users to navigate back to your checklist while it remains incomplete—whether that’s with a persistent banner or a CTA button.
tandem mobile app onboarding checklist
Tandem's onboarding checklist is easy to find from the main dashboard thanks to a persistent but unobtrusive progress bar.

Successful onboarding combats app abandonment

By the end of your user onboarding flow, your mobile users should have the information they need to navigate your app, and you should have the data you need to provide users with an exceptional experience. 

Ultimately, your aim is to leave a lasting first impression that sets users up for success on their next login and combats app abandonment in the long term. (In fact, studies have found that mobile app onboarding can improve user retention by upwards of 50%.)

Understanding how to use onboarding UX/UI patterns effectively can mitigate app abandonment, reduce support tickets, and greatly improve user retention and revenue.

You can dive deeper into user onboarding best practices here on the Appcues Blog. Or head over to ReadyGoodUX to get inspired by top-notch examples and start transforming your mobile onboarding UX today.

Go to the ultimate guide to user onboarding. Discover user onboarding definitions, examples, best practices, and resources.


Author's picture
Katryna Balboni
Content and Community Director at User Interviews
Katryna is the Content and Community Director at User Interviews. Before User Interviews, she made magic happen with all things content at Appcues. Her non-work time is spent traveling to new places, befriending street cats, and baking elaborate pies.
Skip to section:

Skip to section:

User onboarding, whether on mobile or desktop, represents the first experience that new users have with your product itself. This introduction often takes the form of a tutorial, walkthrough, or brief demo that teaches users how to use your app.  It’s a series of welcome screens and UI patterns that guide new users them through app functionality and introduce key features.

At the end of the onboarding experience, users should have all the key information they need to successfully navigate your app and achieve real value from it within the first session. The first time a user achieves value is called the aha moment, and onboarding’s job is to minimize the time it takes users to get there.

What does mobile user onboarding look like?

Mobile onboarding UI/UX can take many different forms, but the basic components tend to be pretty standard across apps. The welcome experience typically consists of overlays or full-screen modals that give a high-level view of app features and value propositions. After the welcome experience, the onboarding patterns expand to include things like tooltips, hotspots, slideouts, and modals designed to serve as helpful tips along the user journey. 

Let’s take a closer look at these UI/UX patterns in a mobile context, and go over some best practices for creating an exceptional mobile app onboarding experience.

1. Welcome screens and signup

acorns mobile app introduction welcome onboarding screens
Acorn’s welcome screens highlight the app’s value and leave users with a clear understanding of how they will benefit.

Mobile app users are notoriously impatient and fickle. An app that doesn’t get its point across quickly is an app that doesn’t succeed.

Many apps rely on customer data in order to function properly. The need to collect data doesn’t have to be a hinderance—in many cases it can be a great opportunity to provide a more personalized user experience, and let users know that you’re doing so. Take advantage of the declared data users provide as quickly as possible to provide instant feedback and let users know that their inputs are being used to create a more tailored experience—not just harvest information. 

And tailoring the experience right out of the gate gives users more incentive to stick around, since they know the content in your app will be relevant to them.

Tips for welcome screen design

  • Welcome messaging should be succinct, highlight your app’s mission, and communicate value throughout.
  • These first screens should match the look and feel of your core app.
  • Include a progress bar to move users through the screens and give them a clear line of sight to the end goal.
  • Since fullscreen patterns can feel disruptive, it’s often advisable to include a CTA that allows users to bypass the welcome flow if they wish. 
headspace mobile app welcome message personalization
Headspace’s personalized app onboarding flow allows users to customize every aspect of their mediation experience.

2. Mobile modals

skyscanner mobile data privacy settings design
Skyscanner uses a fullscreen modal to let users know about their data privacy options.

Mobile modals—which can be partial overlays (also called popups) or full-screen takeovers—are an extremely versatile UI pattern. Beyond the initial onboarding welcome message, modals can come in handy for any number important announcements you may have for existing users. This includes new feature announcements, product upsells, marketing campaigns, or essential permissions requests. Basically, anything really high-stakes or high-profile.

albert text sms opt in permission priming modal popup window
Albert’s permission prompt highlights the value of opting into text alerts.

Tips for mobile modal design

Mobile modals are an important part of any app interface, ensuring important messages get across to users loud and clear. A few tips for optimizing modals for mobile:

  • Use them sparingly. Not every update or marketing message is of equal importance. Save modals for the really critical communicationsEvery modal design should match the look and feel of your app.
  • Copy should be clear and concise, with a bold title or header for quick comprehension.
  • CTAs should drive directly to the action you want the user to take.
  • There should be a visible way to exit out of the message (no sneaky, hidden X buttons).
acorns invite a friend referral campaign in-app marketing
Acorn’s presents users with a compelling, uncomplicated offer that the user can take advantage of immediately.

Further reading: 8 examples of great mobile modals that will delight and engage your app users

3. Tooltips

duolingo plus introduction onboarding tooltip spotlight
Duolingo uses a simple tooltip (plus spotlight) to onboard existing users to additional features in the paid version of their app.

Mobile tooltips keep the learning state alive after the initial welcome flow has ended. They are great at providing contextual help while a user is actively engaged with your app. 

Tooltips can highlight an interface change, help with the discovery of new features, or get users to complete an important action. From a metrics perspective, tooltips can be used to boost engagement so that both session length and overall retention increases. 

yahoo sports large mobile tooltip
Yahoo Sports' mobile tooltip encourages users to take advantage of the Watch feature when it’s most useful (when a game is live).

Tips for mobile tooltip design

  • Tooltips should look and feel native to your brand but have enough visual contrast to stand out from the rest of the interface
  • Copy should be short—aim for less than 140 characters—and create a sense of excitement.
  • The messaging should communicate the value of the feature being highlighted 
  • Make sure you’re using data to drive decisions about tooltip timing and audience. Tooltips should fit into the user journey and be triggered by user behavior.
yummly speech bubble tooltip mobile feature adoption
Yummly uses a speech bubble tooltip to highlight a key app feature.

Further reading: 5 unique ways to use tooltips for mobile apps

4. Hotspots

vsco app hotspot notification
VSCO uses a small blue hotspot to encourage new users to explore a feature.

Hotspots are similar to notification badges, but have a wider range of use cases. . They’re a subtle, non-intrusive UI pattern that can be used for secondary alerts like new message alerts, to draw attention to new features, or to gently guide users through an app as a series of beacons 

At the moment, hotspots are more commonly found in desktop and web apps, but we expect more mobile apps to start experimenting with this pattern as the quest for more novel experiences continues. 

feedly hotspot beacon with tooltip example
A classic example of a hotspot (plus tooltip) in Feedly's web app.

Tips for hotspot design

Hotspots need to toe  the line between being  unobtrusive yet attention-grabbing. Basically, the design should be noticeable but not take front and center stage within the app. Since they are small, many apps give their hotspots subtle animations to better catch the user’s eye.   

5. Banners, slides & cards

uber eats discount code in-app marketing slide up
Uber Eats uses a rounded slide-up to welcome new users with a discount code.

Banners, slides, and cards aren’t exclusive to mobile, but this category is much more ubiquitous in mobile interfaces than on web or desktop. Banners and slides overlay the base UI of the app, whereas cards are in-line messages appear amidst core app content.

When used correctly, these patterns are great at notifying users about important information in real time without disrupting their entire app experience. Banners or slides can also be used to provide instant feedback to let users know that their actions have been successful.

Tips for banner, slide, and card design

The size and visual boldness of your banners, slides, and cards should be directly related to how critical the information they contain is. 

When you want to provide instant feedback about a user action, a small banner or slide works perfectly. You may want to have these patterns automatically fade out after a few seconds, or use a simple X button to let users dismiss the message.

chineasy app language lesson correct answer
Like other language learning apps, Hello Chinese relies on immediate feedback to keep users motivated through lessons. Here, they use a slide-up.

For task reminders, or to nudge users toward non-critical actions, an in-line card strikes the right balance between being obvious and non-disruptive. Cards should feel consistent with the rest of your app’s design—often a simple border and a few minor font adjustments is all you need to help them stand out. Include a clear CTA that lets users take action.

airbnb referral campaign in-line card
Airbnb uses an inline card to promote their refer-a-friend program without disrupting the in-app experience

When you have something exciting to say, a large slide can function much like a partial overlay modal on mobile. Use high-contrast, on-brand colors, bold title or header text, and eye-catching images where appropriate.

atom app feature announcement slideup banner
Atom used a large slide-up to alert users to an exciting new feature.

6. Checklists

acorns user onboarding checklist
Acorn's classic checklist encourages users to complete essential tasks.

Onboarding checklists help users complete important tasks within your app. This UI  pattern is perfect for injecting a dose of gamification into your app and can provide the motivation users need to finish multi-step onboarding processes. 

Checklists are effective because they break complex processes down into easy to accomplish tasks. And the familiar list format helps users visualize exactly how many steps left before they to the finish line.

Tips for onboarding checklist design

  • Stick to one task per checklist item to keep things simple and reward users at each step.
  • Use elements like progress bars and completion checkmarks to let users clearly see where they are in the process and what they need to do to finish. The closer they get to the end of the list, the higher their internal motivation will be. 
  • Remember to provide an easy way for users to navigate back to your checklist while it remains incomplete—whether that’s with a persistent banner or a CTA button.
tandem mobile app onboarding checklist
Tandem's onboarding checklist is easy to find from the main dashboard thanks to a persistent but unobtrusive progress bar.

Successful onboarding combats app abandonment

By the end of your user onboarding flow, your mobile users should have the information they need to navigate your app, and you should have the data you need to provide users with an exceptional experience. 

Ultimately, your aim is to leave a lasting first impression that sets users up for success on their next login and combats app abandonment in the long term. (In fact, studies have found that mobile app onboarding can improve user retention by upwards of 50%.)

Understanding how to use onboarding UX/UI patterns effectively can mitigate app abandonment, reduce support tickets, and greatly improve user retention and revenue.

You can dive deeper into user onboarding best practices here on the Appcues Blog. Or head over to ReadyGoodUX to get inspired by top-notch examples and start transforming your mobile onboarding UX today.

Go to the ultimate guide to user onboarding. Discover user onboarding definitions, examples, best practices, and resources.


Author's picture
Katryna Balboni
Content and Community Director at User Interviews
Katryna is the Content and Community Director at User Interviews. Before User Interviews, she made magic happen with all things content at Appcues. Her non-work time is spent traveling to new places, befriending street cats, and baking elaborate pies.
You might also like...