1
00:00:00,510 --> 00:00:03,630
When a user jumps into a phone app or
a web application for

2
00:00:03,630 --> 00:00:06,740
the first time,
they need to be given some guidance.

3
00:00:06,740 --> 00:00:10,300
Using familiar design patterns
in iconography can help but

4
00:00:10,300 --> 00:00:14,260
hardly ever is a user
interface self explanatory.

5
00:00:14,260 --> 00:00:17,230
And if you do think your
app is intuitive and

6
00:00:17,230 --> 00:00:20,360
obvious, I recommend doing
some user testing and

7
00:00:20,360 --> 00:00:24,870
putting it in front of real people
without providing your own explanation.

8
00:00:24,870 --> 00:00:27,870
Chances are people will get
lost pretty quickly, and

9
00:00:27,870 --> 00:00:31,030
you'll realize that you need
some kind of tutorialization.

10
00:00:32,530 --> 00:00:36,100
In app tutorials,
which are sometimes called on boarding,

11
00:00:36,100 --> 00:00:39,180
should guide the users
through their first steps and

12
00:00:39,180 --> 00:00:43,030
help elevate them to intermediate
users as quickly as possible.

13
00:00:43,030 --> 00:00:45,230
Let's take a look at few
patterns that can help.

14
00:00:46,620 --> 00:00:51,520
When you first log in to an application
for the first time, what do users see?

15
00:00:51,520 --> 00:00:54,200
Here, I've created a simple mock-up for

16
00:00:54,200 --> 00:00:59,150
a web application where users
can upload photos to a gallery.

17
00:00:59,150 --> 00:01:01,070
But there's one thing missing,

18
00:01:01,070 --> 00:01:06,050
users haven't put in any of their data yet
and there's no photos here.

19
00:01:06,050 --> 00:01:08,150
So what do they see instead?

20
00:01:08,150 --> 00:01:10,950
When an application doesn't
have any user data yet,

21
00:01:10,950 --> 00:01:14,830
this is often referred
to as the blank slate.

22
00:01:14,830 --> 00:01:17,370
Here we want to do two things.

23
00:01:17,370 --> 00:01:18,970
First, we want to give users and

24
00:01:18,970 --> 00:01:23,040
idea of what the app might look
like once it's populated with data.

25
00:01:23,040 --> 00:01:29,104
So let's add some placeholder photos
along with some text that says just that.

26
00:01:29,104 --> 00:01:34,403
So I'll add some text, and it'll say

27
00:01:34,403 --> 00:01:39,369
Here's what your gallery will look

28
00:01:39,369 --> 00:01:44,679
like after you've uploaded photos.

29
00:01:46,828 --> 00:01:52,192
And we'll mix this a little bit, larger,

30
00:01:52,192 --> 00:01:57,258
that's good and then let's add a couple

31
00:01:57,258 --> 00:02:01,431
of image placeholders here, and

32
00:02:01,431 --> 00:02:06,944
I'll just sort of paste these right along,

33
00:02:06,944 --> 00:02:14,860
center them, let's make another row and
that's good.

34
00:02:14,860 --> 00:02:17,230
This is a good start but

35
00:02:17,230 --> 00:02:22,940
the second thing we need to do is guide
the user toward the first action.

36
00:02:22,940 --> 00:02:27,220
This gets into other patterns that
are sometimes called a walk-through or

37
00:02:27,220 --> 00:02:28,760
a guided tour.

38
00:02:28,760 --> 00:02:31,310
As they go through each step for
the first time,

39
00:02:31,310 --> 00:02:36,190
we can provide some additional helper
text that calls out the action and

40
00:02:36,190 --> 00:02:39,740
intentionally looks
incongruent with the design.

41
00:02:39,740 --> 00:02:44,240
So let's add some text here and we'll say,

42
00:02:44,240 --> 00:02:50,060
Upload your first photo.

43
00:02:50,060 --> 00:02:54,650
And we don't want the text to be kind of
straight with the rest of the design.

44
00:02:54,650 --> 00:02:59,630
We'll put it on a bit of an angle,
maybe make it bold and

45
00:02:59,630 --> 00:03:06,070
a little larger in size so
that it stands out a bit more as some

46
00:03:06,070 --> 00:03:11,240
meta instructions that are not necessarily
part of the interface normally.

47
00:03:11,240 --> 00:03:18,980
Next, I will type in arrow
into a search box up there.

48
00:03:18,980 --> 00:03:23,330
And we want this arrow to be
pointing at the Upload button from

49
00:03:23,330 --> 00:03:25,240
this instructional text.

50
00:03:25,240 --> 00:03:26,740
So in the inspector here,

51
00:03:26,740 --> 00:03:32,320
I can remove the arrow head on
the left side, so it's just pointing.

52
00:03:32,320 --> 00:03:36,920
And then I can just drag
these handles here and

53
00:03:36,920 --> 00:03:41,690
I'll even pull this middle handle to
make it a little bit curvy there.

54
00:03:41,690 --> 00:03:46,920
Again, to make it with
the rest of the design.

55
00:03:46,920 --> 00:03:54,080
So again, in this case, notice how the
text and the arrow are curvy and organic.

56
00:03:54,080 --> 00:03:56,930
They don't follow the straight
geometric lines of the app.

57
00:03:56,930 --> 00:04:00,900
This helps draw attention to them,
and it also informs the user

58
00:04:00,900 --> 00:04:04,490
that these are meta elements
that are not normally present.

59
00:04:05,610 --> 00:04:09,140
That about wraps things up for
tutorialization patterns and for

60
00:04:09,140 --> 00:04:10,380
UI patterns.

61
00:04:10,380 --> 00:04:13,332
There are dozens and
even hundreds more, but

62
00:04:13,332 --> 00:04:17,692
that should help get you started
thinking in the right direction.

63
00:04:17,692 --> 00:04:21,999
In the next several videos, we're going to
shift our focus away from UI patterns and

64
00:04:21,999 --> 00:04:23,890
take a look at persuasive patterns.