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.
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.
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.
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.
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.
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! ??
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 年Farah Golmakani
Senior Product Designer @ InMarket
2 年Great content! Love it!
UX/UI Designer
2 年I love this and agree with every point.
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.
Product Designer @Dagshub
2 年Thanks for sharing, Vitaly! A lot can be learned from this :)