Onboarding UX
Onboarding Free PDF Book (https://www.intercom.com/resources/books/intercom-onboarding), all around onboarding UX.

Onboarding UX

You've just signed up for a service, yet here it comes — the disruptive, annoying, attention-demanding?onboarding tutorial. It’s right there, asking for attention; yet chances are high that you will never find out what it was all about because you’ll be swiftly dismissing it with the "skip" link.

How do we deal with onboarding UX? What's the right way to explain our beautifully crafted?new features or hidden treasures?that our interface provides? Let's figure it out.

(Pssst! Now updated:?Smart Interface Design Patterns??? (9h) with shiny new video chapters on?complex navigation, data tables and design KPIs.?Free preview.)

1. Slowly Guide Users To Small Success Moments

While many onboarding tutorials focus on explaining?how to locate some features, it might be a good idea to change the perspective and focus on bringing users to?first success moments?instead. The learning of the features and their location in the interface, then, happens gradually, slowly, step-by-step, but on the side.

No alt text provided for this image
Monday.com and Notion bring users to success moments: users are asked to specify their context first; then they get one of the pre-made templates that's customized for their needs.

The goal is simple: we?shorten the time to relevance?as much as possible. For our various use-cases, we create and suggest?presets and templates?that will bring them to a good starting point faster. That's how?Monday.com's onboarding?works. No interactive tutorials or feature highlights —?just a streamlined way to get to the first success moments. This works well.

2. Avoid Interactive Tutorials and Walkthroughs

Anything that keeps users away from using the product is an unnecessary distraction. That’s why tutorials and walkthroughs are often?dismissed almost instinctively. Instead, we'd be better off showing hints only if we are absolutely confident that they are going to be well-received and highly appreciated.

To do that, we need to?time our onboarding hints well. We carefully choose and writte our hints and choose the right times and places for?just-in-time-hints?(Luke Wroblewski). In fact, features usually don't come out of nowhere: they?address particular pain points?and help users solve particular tasks.

No alt text provided for this image
SBB Touch-Fahrplan (https://www.sbb.ch/de/fahrplan/mobile-fahrplaene/sbb-mobile.html) allows users to connect two locations with a line: that’s the input. First time, users are educated how to connect the lines — and only about that feature. Video and detals (https://www.sbb.ch/de/fahrplan/mobile-fahrplaene/sbb-mobile.html).

We can tap into situations when users lose time by doing repetitive tasks, or make the same mistakes, and frame a feature as something that can help them?solve tasks better and faster. We meticulously choose the right timings for each feature, and show hints when needed.

3. Collapsible Onboarding Checklist

Probably one of the best ways of teaching users how to use the interface well is via a?collapsible checklist. We use a?non-modal dialog?with up to 7 accordions that guide users through the necessary steps to complete the set-up or use the service. The onboarding checklist?never blocks the UI, can be hidden, deferred — and restored later.

No alt text provided for this image
Loom makes onboarding optional; it can be collapsed and restored, if needed.

Loom's onboarding UX is a great example of getting onboarding right. Six simple steps, clearly labeled, eacy to check, easy to hide and restore —?with a progress indicator on the top. That's how it could be done.

4. Prepare Users With a Custom Prompt

If we need?user’s permissions?for location or notifications, need their consent, or would love to show them a few new features, why don't we?politely ask users first?if it would be OK for them?

Instead of showing anything disruptive immediately, we?explain why we need their input?before prompting any OS prompt. Users then have to?activate?a UI button first before interacting with the OS modal. At least a modal wouldn’t come as a big surprise, and is likely to have more positive responses.

No alt text provided for this image

Lime?never shows OS prompts for permissions or notifications right away: it always prepares users with a well-integrated and clear messaging. It’s only on click that an OS prompt is displayed. That’s polite and respectful.

Wrapping Up

If a feature is obvious,?you might not need to explain it at all. As it turns out, the more integrated and "regular" a button appears, the more likely it is to be perceived as an integral part of the interface, and hence be used. Instead of highlighting the new feature, make it more subtle.

A "new" badge along with a very subtle background change might be perfectly enough. A single popover at the bottom of the screen might also work well. Anything beyond that might not create the desired result. And: as Adam Fard?suggests,?educate users incrementally, by structuring your suggestions in bite-sized chunks, so that users find them easy to learn.

Useful Resources


Just Updated:?Smart Interface Design Patterns

Interested in interface design and UX? I’ve recently updated?Smart Interface Design Patterns, a 9h-video course on UX, from complex mega-menus to enterprise data tables. Plus a?UX training certification?with real-life UX challenges.?Jump to the details.

No alt text provided for this image
Smart Interface Design Patterns (https://smart-interface-design-patterns.com), with a 9h-video course and a friendly 4-weeks live UX training ??

And if you aren’t interested, please?tell your friends?— if you know somebody who might be interested, please kindly refer them to the?course and UX training. Thank you! ??

Maya Ospina

Head of Product at Innpactia | UX and Product Design Leader | Business Development Advisor | Bridging technology and humanity through a holistic approach to digital ecosystems

1 年
Wei Tang

Senior Product Designer @ InMarket

2 年

Great content! Love it!

回复
Sizwe Moabi

UX/UI Designer

2 年

I love this and agree with every point.

Jackson Corey

Co-founder, Chief Creative Officer @ Darkroom | Turning growing brands into household names | Designer, Investor, Forbes 30u30

2 年

Love this. Users want to feel smarter by using the product. The very first mile of onboarding is more about subjective / perceived value than it is objective. The quicker an onboarding gets users to the "aha moment" for their challenge, the better.

Anna Hyatt

Product Designer @Dagshub

2 年

Thanks for sharing, Vitaly! A lot can be learned from this :)

要查看或添加评论,请登录

Vitaly Friedman的更多文章

  • Designing For Stress and Emergencies

    Designing For Stress and Emergencies

    No design exists in isolation. As designers, we often imagine specific situations in which people will use our product.

    12 条评论
  • ? How To Build Confidence In Your UX Work

    ? How To Build Confidence In Your UX Work

    When I start any UX project, typically there is very little confidence in the successful outcome of my UX initiatives…

    12 条评论
  • ?????? How To Test And Measure Content In UX

    ?????? How To Test And Measure Content In UX

    The goal of the content design is to reduce confusion and improve clarity. Yet often it’s difficult to pin point a…

    21 条评论
  • Useful Customer Journey Maps (+ Figma & Miro Templates)

    Useful Customer Journey Maps (+ Figma & Miro Templates)

    User journey maps are an effective way to visualize user’s experience for the entire team. Instead of pointing to…

    22 条评论
  • ?? Sustainable Design Patterns For UX Designers

    ?? Sustainable Design Patterns For UX Designers

    Digital sustainability is often seen as a technical concern for engineers. We speak about optimization of assets, and…

    23 条评论
  • ?? Designing For Gen Z: Expectations and UX Guidelines

    ?? Designing For Gen Z: Expectations and UX Guidelines

    Every generation is different in very unique ways, with different habits, views, standards and expectations. So when…

    17 条评论
  • ?? How To Improve UX In Legacy Systems

    ?? How To Improve UX In Legacy Systems

    Imagine that you need to improve the UX of a legacy system. A system that has been silently working in the background…

    56 条评论
  • Design Guidelines For Better Notifications UX

    Design Guidelines For Better Notifications UX

    Over the years, I’ve developed a habit to turn off all notifications once a year — both on mobile and on desktop. There…

    33 条评论
  • ?? How To Make A Strong Case For UX Research

    ?? How To Make A Strong Case For UX Research

    Getting a buy-in for UX research can be remarkably difficult. You might find yourself constrained by wrong assumptions…

    14 条评论
  • ?? How To Design Complex Data Tables (+ Figma Kits)

    ?? How To Design Complex Data Tables (+ Figma Kits)

    Complex data tables are difficult to get right. They always come along with filters, sorting, customization options…

    61 条评论

社区洞察

其他会员也浏览了