Onboarding

Onboarding experiences guide people through how to get started with a product or feature.

Instead of looking at onboarding as a once and done opportunity, consider different teaching points in a user’s journey and offer information when people are ready to take it in. That might be the first time they use the app or feature, when using a related feature, or after an update.

---

Principles

Effective onboarding experiences are guided by the following research-backed principles. Every product at Microsoft should follow these principles when designing new onboarding experiences.

Relevant

Onboarding happens in a moment of curiosity or urgency. Don’t slow users down. Make sure onboarding content is presented within context of a closely related task. Research shows that, when teaching users about something new, the more closely related it is to the task they’re engaged in, the more likely they are to pay attention to, understand, and retain that content.

Non-distracting

Avoid being a barrier to the user’s primary goal.

Optional

Allow people to exit and finish what they’re doing, but give them a way to come back to it later.

Benefit-focused

People often skip first-run experiences because they don’t understand how they’ll benefit from the content. Let them know up front how they’ll benefit, so they’re motivated to pay attention.

Coherent

Use standard Fluent components so that users know what to expect when interacting with your onboarding experience.

---

Scenarios and goals

Every onboarding experience seeks to help people achieve one or more of these five goals: welcome, orient, notify, explain, and take action. It’s important to narrow down what your primary goal is for each onboarding experience, so that you can implement the right UX.

These don’t occur all at once, but some UX addresses several goals at once, while others might be spread across the experience.

Welcome

Welcome experiences reassure people they’re stating in the right place. Try a simple welcome screen, banner, or a modal dialog for this.

Make sure that it appears just once, and focuses on the benefit. Keep content short and scannable, and limited to one or two main points. Keep in mind that after this welcome, you can expose additional features contextually throughout the experience.

A modal invites users to try a new experience, tells them the benefits, and gives them a way to opt out.

An in-browser banner calls attention to new improvements.

Orient

After welcoming the user to a new experience, it’s important to show them helpful features in context. To show where certain options appear, try empty states or teaching popovers.

Teaching popovers, especially in the brand color, can point directly to helpful features in UI

Notify

When functionality in an app or experiences is added or changed, notify users about what they can now gain and how they might adapt their behaviors to the new UX. To notify users, try banners, empty states, teaching popovers, or toasts.

A message bar at the top of the browser alerts users to new functionality that makes their workflows easier.

Explain

You never want the user to feel stuck. To tell people what they can do or provide details that might not be readily apparent, try putting hints in the UI that can tell people how they might move forward. Empty states are an excellent surface for short, explanatory messages. You can also include a sentence or two of text description to elaborate.

An empty state message in Teams quickly tells people what they can accomplish and gives them a CTA for an easy path forward.

Take action

Sometimes, before they dive in, users need to complete some preliminary actions needed to use the app or feature. In this case, try an FRE, a setup wizard built in a carousel, or a multi-step flow within a drawer.

A wizard lets people know how many steps they have to complete and how much progress they’ve made.

---

Content

Write for action more than explanation

As much as possible, use active voice and strong verbs to let the user know what they can do with the app. Use direct, active language. CTA buttons should complete the sentence: “I want to …”

Use UI copy and tooltips at the point of need. Break down steps into digestible, progressive actions. Avoid passive onboarding (like long text without interaction).

Make help easy to find

Users may hesitate to ask for help or may not even know they need it. Embed just-in-time help (tooltips, “Learn more” links, teaching popovers) and provide easy access to support for new or complex features.Use inclusive, nonjudgmental language: “Need help?” is better than “Stuck?”

Set reasonable expectations

For Onboarding UX that welcomes or that requires users to take action, be clear about what they’re in for. Mismatched expectations can erode trust so it’s important to deliver on the expectations you set. Tell users what’s about to happen and how long it might take; for example, “This takes 2–3 minutes.” “We’ll guide you through 3 quick steps.”

Avoid surprises unless they’re delightful.