Onboarding UI Patterns
The version of the browser you are using is no longer supported. Please upgrade to a supported browser.Dismiss

View only
Created by Lucas Mondora - SaaS CRO Specialist
GoalUI PatternsExplanationWhen to use it?PotentialImportanceEasePIE Score
Activation & OnboardingCelebrate wins in your product-- Celebrate the actions a user takes in your product. Can be implemented with in-app messages/overlays, inline animations etc, or with email marketing.

--Examples: Shopify "You made a sale" emails | Mailchimp High Fives | ProdPad subscribe animation (https://cl.ly/8482165fe991)

-- a great way of reassuring users that they did the right thing.
When a customer achieves a desirable outcome or action in the product.
Activation & OnboardingInteractive Walkthrough/DemoAs soon as a user signs up, you can get them learning the products in order to make a decision to join a service or buy a product.
When the product is very interactive or complex
- give users an insight into what a product is about before they spend time or money on the full product.
- Use to help sell your product (in place of a demo.) & help them make an informed purchase decision
- instruct users in how to solve common tasks.
- teach users about your product and what it can do
- Teach users about new or unusual features (on feature launch)
Activation & OnboardingBlank slateUse in an empty dashboard when it's not quite clear how the application will look, feel and behave when in full function and filled with data.
-Use when your application feels without life and empty before the user has started to enter data into the system.
-Use when you want to motivate the user to start using the system.
-Use when you want to aid the user in getting started with your web application.
- Use when you want to show best practices of using your web application.
- Use when you want to guide the user to get a good start with your web application.
Activation & OnboardingPlaythroughSimilar to an interactive walkthrough, but it's better for when you're showing them individual features in a welcome sequence
- Use when you want to introduce the core interactions of your product before letting them enter the full product
- Use when you want to let users learn and explore the core skills needed to use the product
- Use when you want to allow modeless assistance
- Use when you want to allow users to get out into the full product world without facing horrible failure if they hadn’t gone through this
- Use when you want to let users learn by doing
- Use when you want to create a risk-free space for users to build skills and earn starting achievements
- Use when you want users to develop a set of core competencies that help users transition to advanced actions
- Use when you want to provide a positive first impression through giving a person an early success
- Do not use when there is a chance that users will feel that you are providing too much instruction or hand-holding. At least make it possible to skip
Activation & OnboardingCoachmarksSimilar to a strategy whiteboard in the middle a basketball game - you simply have an overlay with arrows/text pointing to things
When you have a complex interface
- Difficult interface
- confusing interface
Activation & OnboardingGuided tourMore of a 'just in time' / 'in the moment' strategy. Use when a user trys to use a feature or functionality the first time, or they're exploring the app. Utilizes tooltips & modals and overlays
- Use when you want to help users along getting accustomed to your user interface.
- Use when you want to notify your users of new or unfamiliar features
- Use when your user interface is not self-explanatory
Activation & OnboardingInline HintsSmall text or box embedded 'inline' as a user uses an interface
- Use when you want to improve readability of guided help, as Inline
- Use when you don’t want to interrupt or obscure a content experience
- Use to provide helpful information in combination with Blank Slates
- Do not use when you want to be absolutely sure users have seen your hint, as the subtle appearance that flows the rest of the content is at the risk of being ignored.
- Do not use for conveying mission-critical instructions.
Activation & OnboardingRecognition over recallUsed to gather/personalized experience to users users. Typically options the user gets to choose.
- Use when you want to maximize the data you receive about your users tastes and preferences when you ask them a question
- Use when you want to minimize the amount of cognitive energy spent by the users inputting data
- Use when you want to gain a broader insight into users’ preferences through recognition than what they usually tell recalling from memory.
- Use to let users tell more about their tastes and preferences in an easy and fun way.
Activation & OnboardingComplimentary featuresA slide in or modal which triggers after someone accomplished a feature use or onboarding milestone, congratulating them and nudging them to use a complimentary feature.
When you have features/use case that help users achieve goals faster when used together.
Main menu