1
00:00:00,690 --> 00:00:01,950
Welcome back.

2
00:00:01,950 --> 00:00:04,880
In this video,
I'll show you some onboarding patterns for

3
00:00:04,880 --> 00:00:07,000
welcoming a new user.

4
00:00:07,000 --> 00:00:11,150
You can think of onboarding as
being a good host to a guest.

5
00:00:11,150 --> 00:00:14,714
When users visit a product,
you want them to feel comfortable,

6
00:00:14,714 --> 00:00:16,497
give them a sense of belonging,

7
00:00:16,497 --> 00:00:18,630
and show them where they
can find what they need.

8
00:00:20,230 --> 00:00:24,520
For starters, welcome users
with a simple welcome message.

9
00:00:24,520 --> 00:00:27,932
Here's one on Behance,
a site where creatives share their work.

10
00:00:31,098 --> 00:00:36,560
Behance also inserts tips to explain
features throughout the website.

11
00:00:36,560 --> 00:00:42,100
These tooltips and hotspots are used on
their website as well as their mobile app.

12
00:00:42,100 --> 00:00:47,100
Some apps use the loading screen to show
a new tip each time the app is opened.

13
00:00:49,846 --> 00:00:54,457
new users often are faced
with blank UIs because there

14
00:00:54,457 --> 00:00:57,164
isn't any content to show them yet.

15
00:00:57,164 --> 00:00:59,529
These are called empty states.

16
00:00:59,529 --> 00:01:02,960
You can design for
these areas by making them useful.

17
00:01:02,960 --> 00:01:04,970
You can explain what will appear there.

18
00:01:05,970 --> 00:01:09,350
Look at this example in Asana,
a project management app.

19
00:01:10,670 --> 00:01:15,880
I don't have any files associated
with my tasks, so this tab is empty.

20
00:01:15,880 --> 00:01:19,590
The message lets me know that
all attachments to tasks and

21
00:01:19,590 --> 00:01:21,860
conversations in this
project will appear here.

22
00:01:23,250 --> 00:01:27,300
Here's another example from Dropbox,
a file storing app.

23
00:01:27,300 --> 00:01:31,710
Here, the user hasn't made any of
their files available offline.

24
00:01:31,710 --> 00:01:35,550
So they see this charming message
reminding them that they can specify

25
00:01:35,550 --> 00:01:38,600
which files they want
available on their device,

26
00:01:38,600 --> 00:01:41,200
even when they're not
connected to the Internet.

27
00:01:41,200 --> 00:01:45,140
Great, so these onboarding techniques
do a good job of welcoming and

28
00:01:45,140 --> 00:01:46,700
informing the user.

29
00:01:46,700 --> 00:01:51,220
They make use of white space,
turning it into an opportunity to delight,

30
00:01:51,220 --> 00:01:54,904
inspire, and
educate the user about the product.

31
00:01:54,904 --> 00:01:58,984
This is just the beginning of
what's possible with onboarding.

32
00:01:58,984 --> 00:02:02,714
Overtime, welcome messages
become irrelevant and

33
00:02:02,714 --> 00:02:04,814
empty states become replaced with content.