We’re on the fourth step of the EMBED framework for user onboarding—and the E is for Execute.
Today, we’ll cover common UI patterns you should use in your onboarding and what onboarding looks like outside of your product. You’ll stage, QA, and execute your actual user onboarding tests.
This week, the real legwork will be in you doing the hard implementation work, so let’s get started.
Borrow from known UI patterns
In Daniel Kahman’s “Thinking, Fast and Slow”, he discusses the benefits of keeping users in their “system 1” or intuitive thinking. He argues that users are drawn to brands for reasons beyond rational ones, including sentiment (feelings they evoke) and signals (form they communicate in).
That’s great news, because it means you can borrow from known UI patterns to communicate in a form with which your users are already familiar.
We categorized 327 user onboarding experiences and found 7 common UI patterns for you to consider.
Welcome messages are any greeting that is only seen once for new users and usually contains text such as hello or welcome—the message doesn’t have to be dedicated entirely to saying hello; it most often includes an opportunity for action. Welcome messages help users feel more—well—welcomed to an application, and as a result, more motivated to use it. Welcome messages can help set expectations and the tone for their first-run experience. They should match style and tone of your marketing messages.
Product tours orient new users and help them figure out the fastest way to get to their first moment of value. Tours often walk a user through an important workflow or point out a few key steps along the way that might otherwise be missed. The best product tours are typically between 2-5 steps and are often constructed with tooltips or hotspots. Any more than that starts to feel like a hassle for new users. Keep your copy short and focus on value rather than how-to to keep users motivated.
Progress bars speak to our bias as humans towards completing tasks. Products often play upon this bias by including progress bars into their UI to motivate new users to complete their onboarding. A progress bar reminds us that we’ve been given a task, and we feel as though we should complete it. Progress bars that play best to our bias starts with a substantial percentage of the bar filled out. This helps a user feel like they are already underway instead of starting from scratch, and it increases a person’s desire to complete the task at hand.
Checklists can help users know what is expected of them to get onboarded. They’re similar to progress bars, but checklists are more often used for long-term onboarding items. Checklists can hook into powerful psychological principles, motivating new users to complete—and even enjoy—the crucial setup tasks required to get your product up and running. The lists turn complex, multistep processes, such as scheduling out a month of social media content, into simple, achievable tasks: Choose five posting times, import your RSS feed, and hit “schedule.” From what we’ve seen, checklists should live alongside your product as a present reminder of what needs to still be completed.
Hotspots are a relatively new UI pattern that have started popping up all over the SaaS world. Hotspots are a nice alternative to tooltips because they are less invasive to users. They do not open automatically and can be easily ignored. Hotspots are often used to give a little bit of contextual help to entice new users to activate certain elements or features of your product. Hotspots may have unique pulsing animations to catch a user’s eye. You’ll likely want to adjust the intensity of your hotspots’ animation depending on how important the hotspot information might be to your users’ success.
Action-driven tooltips isolate elements such as form fields or buttons to guide a user through account set up. Once a user completes a step, they are guided on to the next one. This heavy hand-holding can deliver similar results as a white glove onboarding service with the time and scaling advantages of a low-touch relationship. For more technical workflows or account activation across multiple pages, action-driven tooltips can be a game changer in terms of your activation and retention rates.
Empty states are commonly found when a user hits a dashboard or other area of your app that will eventually be filled with robust information or messages. The trick with empty states is to design them so your users will stick around long enough to see the value of them. Your empty state should prompt the next relevant action the user should take to begin filling the empty state. They’re also a great spot to delight your users. Show off your human side with a funny message or illustration—just make sure it’s on brand.
Consider all onboarding methods you have at hand
Let’s talk about where onboarding lives. Most of the time, when we talk about user onboarding, we are thinking of all of the things that happen to users inside the product.
But it’s important to consider potential points of education outside of the walls of your product. Think back on when you mapped your user journey—many of those moments occurred outside of your product.
A few other vehicles that you can use to enable onboarding:
Email, outside of in-app onboarding, might be the next powerhouse of potential. Email is especially useful for folks that left the app before seeing value—maybe they got pulled away—and for those who went through your in-app onboarding but never returned. In both cases, an email nudge can bring them back in. Ideally, your onboarding emails should be trigger-based to make them hyper-contextual to your specific user.
Push notifications, if you have a mobile app, might be more appropriate than email onboarding for folks who have left before seeing value or haven’t returned. Make sure to keep your copy short and specific—always referencing why the next step is beneficial to the user.
Videos are great at humanizing the digital experience. They can live in-app, in-email, or even in a resource center. All of your videos should accessible with accurate closed captioning and skippable, especially when using them for in-app onboarding.
Don’t limit yourself to only adding steps and information. Try cutting out onboarding steps to see if it helps—like deferring account creation until it’s absolutely necessary. Sometimes, eliminating friction makes users get to “aha” even faster.
All of these things we’ve discussed are just different ways to do the same thing—drive your users toward meaningful action.
Stage and QA your tests
It’s true in product, too—the best offense is a good defense. Once you’ve staged your tests, take some time to run it through a last minute quality check.
A few questions to ask yourself that we covered above:
Is there visual consistency in your onboarding?
Is there consistent voice and tone in your onboarding copy?
Are you targeting the right users?
Oh, and remember the good/bad onboarding list from Lesson 1? It’s a good idea to run through each of the definitions of good and bad onboarding to make sure your onboarding fits strongly in the former category.
Finally, it’s a best practice to make sure users can find the onboarding once completed or replay it. Folks often click through too quickly or didn’t realize a step would be so complicated that they needed the additional information you provided.
Implement your tests
It’s time to set your tests live—deep breath! You got this.
If you’re stuck at this step because of engineering bandwidth, consider giving Appcues a try. We let you implement your tests easily—and iterate quickly. Since you already have an analytics tool setup, you can integrate it with one click and have immediate feedback on your in-app onboarding.
If you have a dedicated team to design/build/test/measure, that’s awesome too. Try working these onboarding tests into your ongoing sprint or agile schedule.
The quickest way to test your flows is to ship them. Take a deep breath and hit publish.
Keep a close eye on the tests—and your support tickets—to make sure everything is working as planned.