Onboarding Patterns: Product Explanation6:00 with Hope Armstrong
See onboarding patterns for product explanations.
Explain a product when...
- the user is new
- there's a new feature
- there's low feature adoption
- a product or feature is complex or confusing
- the UI/UX has changed communicating premium features
Onboarding Patterns: Product Explanation
- step-by-step tour
- annotated UI
- inline hints
- show by example
- Asana - Really Good UX onboarding breakdown
- Airtable - video
- Coachmarks - Nielsen Norman article
- Notion - Really Good UX onboarding breakdown
- Pinterest - UI-patterns.com example
- Treehouse Tracks Tour Note: the tour is not available for Techdegree students or those who have already dismissed it.
Hi there. 0:00 In this video, I'll show you a few onboarding patterns for 0:01 explaining a product or product feature. 0:04 Here are a few situations when these are appropriate solutions. 0:07 Explain a product when user is new. 0:12 There's a new feature. 0:15 There's low feature adoption. 0:17 A product or feature is complex or confusing. 0:20 The UI/UX has changed, and when communicating premium features. 0:23 Before I move on, I just want to note that onboarding should not be the only solution 0:30 when explaining a confusing product. 0:35 Addressed any underlying root causes for 0:38 the confusion, versus using onboarding as a superficial fix. 0:40 Our goal as UX designers is to make products as intuitive as possible. 0:46 It's best practice to use familiar UI patterns wherever possible, 0:51 which users readily understand. 0:56 If you have a valid reason for 0:59 deviating from a familiar UI pattern, onboarding might be necessary. 1:01 When you're ready to add onboarding to explain a product, 1:07 refer to common onboarding patterns. 1:10 Let's get into some examples so I can show you how this is done in products today. 1:13 First step, let's look at a carousel. 1:19 These are very popular, and you've probably seen them before. 1:22 This is Asana's onboarding for business users. 1:27 Their business tier offers additional features that are not available 1:30 in the free tier. 1:34 So, it's important for 1:35 users to understand the value they're getting from this paid subscription. 1:36 The screens provide an overview of these features. 1:41 An onboarding carousel is great for high level overviews, but 1:44 you have to keep the copywriting concise and limit the slides to five or less. 1:48 After all, you don't want users to get frustrated or 1:54 overwhelmed and dismiss the carousel modal. 1:57 Another consideration is that there isn't typically an obvious way for 2:01 users to revisit a carousel they've exited. 2:06 Another common pattern is a step-by-step tour. 2:09 Here's the tour for Treehouse tracks. 2:13 My favorite part of this approach is how it is contextual. 2:16 Each comment points to a specific part of the app. 2:20 This enables you to design tips that directly point users attention to a place 2:23 in the UI. 2:28 Just like with the previous example, as soon as the tour is completed or skipped, 2:29 it is no longer to be seen again. 2:34 You can solve this of course, by including a button in the UI that toggles the tour. 2:37 Here's an example of an even more interactive approach in Airtable, 2:42 an app that sort of like a spreadsheet and database rolled into one. 2:47 I just signed up and I'm presented with the tour. 2:52 As I go through each step, there are clickable annotations in the UI. 2:57 The whole tour is interactive in this way, and 3:02 I like how it gets the user engaged with the UI. 3:05 I also appreciate how the final step in the tour lets users know where to find 3:08 the help section in case they need additional information later. 3:12 The next pattern is called coachmarks. 3:18 Coachmarks are annotated notes that appear as an overlay on top of UI. 3:21 Morning Stars iPad app provides comprehensive investment data. 3:27 So as you can imagine, it gets quite complicated. 3:31 Here, you can see they've used coachmarks to explain the functionality on 3:35 the screen. 3:39 Coachmarks can usually be toggled on and off, making them easy to refer back to. 3:40 You can also use inline hints to direct the user towards certain actions. 3:45 Grammarly, a tool that helps improve writing uses inline hints. 3:52 In this demo document, 3:57 you can see this flashing blue dot which draws my attention to the goal section. 3:58 When clicked, it explains the feature. 4:04 So, now that I understand the feature, I can click the button to select my goal for 4:07 this document. 4:11 Grammarly's advice will update based on this selection. 4:14 inline hints are great for encouraging users to do a specific action. 4:17 Once the action is complete, the hint is no longer needed and 4:22 the value of the action is apparent. 4:26 Alternatively, you can take a show don't tell approach. 4:29 For example, when you sign up for the note taking app, Notion, 4:33 you're presented with the demo document that contains a variety of content. 4:37 The content explains the formatting options and 4:41 other available functionalities. 4:44 That way I can instantly interact with the page and 4:47 see the possibilities of a full featured document. 4:50 This hands-on learn-by-doing approach is very smart. 4:55 However, you'd be hard-pressed to add demo content to a banking app. 4:59 Users would be confused about seeing demo money in their bank account. 5:05 So, put this solution in your toolkit and use it selectively when it makes sense. 5:09 For the last example in this section, let's look at Pinterest, 5:15 an image sharing app. 5:19 When they rearranged the UI, they provided an onboarding tour to explain the changes. 5:21 All right, I hope that gives you insight in to how to improve the user onboarding 5:26 experience to explain a product. 5:31 As you consider these solutions, think about how important it is for 5:33 the user to know about a feature or complete a task. 5:38 If it's crucial to the experience, choose a more direct and 5:42 focused approach such as a guided tour. 5:45 If it's optional or something to simply be aware of, 5:49 you can use a less direct approach such as an inline hit. 5:53 Up next, I'll show UI patterns for guided actions. 5:57
You need to sign up for Treehouse in order to download course files.Sign up