Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed User Onboarding!
You have completed User Onboarding!
Preview
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
- carousel
- step-by-step tour
- annotated UI
- coachmarks
- inline hints
- show by example
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
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 upYou need to sign up for Treehouse in order to set up Workspace
Sign up