1
00:00:01,077 --> 00:00:02,904
Hi there, welcome back!

2
00:00:02,904 --> 00:00:08,483
Early on the course, I outlined a design process that favours rapid exploration early on.

3
00:00:08,483 --> 00:00:11,466
Now let’s learn how to actually accomplish that.

4
00:00:11,466 --> 00:00:16,249
In this video, we’ll dive into three techniques for rapidly producing prototypes.

5
00:00:17,233 --> 00:00:22,915
Over the course of your project, the fidelity of the prototypes that you create is going to increase,

6
00:00:22,915 --> 00:00:27,298
and you’ll want to pick tools that reflect where you’re at in terms of the design process,

7
00:00:27,298 --> 00:00:31,942
not using stuff that’s too high-fidelity and too time-consuming early on.

8
00:00:31,942 --> 00:00:37,059
So, for example, you might start out by storyboarding, which is the first technique we’ll learn today.

9
00:00:37,059 --> 00:00:40,909
That will give you a sense of the tasks and the scenarios you’d like to support.

10
00:00:40,909 --> 00:00:45,366
Then you might move on to paper prototypes, and from there digital mockups.

11
00:00:45,366 --> 00:00:49,331
Then, if you’re in the web domain, some static HTML.

12
00:00:49,331 --> 00:00:54,410
And, only then, get dynamic — add in the database and the other fancy parts.

13
00:00:54,410 --> 00:00:57,887
Picking the right tool for the job helps you focus on the questions that you have

14
00:00:57,887 --> 00:01:00,991
at that particular stage of the design process.

15
00:01:00,991 --> 00:01:03,617
So, in the video we’re going to talk about storyboarding,

16
00:01:03,617 --> 00:01:05,873
creating and testing paper prototypes,

17
00:01:05,873 --> 00:01:08,391
and moving on to digital mockups.

18
00:01:08,391 --> 00:01:11,794
One of the easiest mistakes to make in interface design

19
00:01:11,794 --> 00:01:18,586
is to focus on the user interface before you focused on the tasks that the interface’s going to support.

20
00:01:18,586 --> 00:01:21,650
And, if you got one thing out of storyboarding,

21
00:01:21,650 --> 00:01:26,714
the piece to understand is that storyboarding is all about tasks.

22
00:01:26,714 --> 00:01:33,630
Here’s an example from the “Lifealyfics” project team from my Stanford HCI class in the Fall of 2011.

23
00:01:33,630 --> 00:01:36,745
They were interested in user interfaces for behaviour tracking,

24
00:01:36,745 --> 00:01:39,948
and here are a couple of the early storyboards that they produced.

25
00:01:39,948 --> 00:01:41,639
What’s nice about a storyboard is

26
00:01:41,639 --> 00:01:46,712
in just a few panels you can convey what the user interface will help a person accomplish.

27
00:01:46,712 --> 00:01:51,301
And a good storyboard is nearly always going to have an actual person in there.

28
00:01:51,301 --> 00:01:55,203
Another thing that you can see in these storyboards is that they communicate flow:

29
00:01:55,203 --> 00:02:00,130
Much like a comic strip, it’s showing what’s happening at key points in time.

30
00:02:00,130 --> 00:02:05,179
One of the biggest worries about creating storyboards is that they’d tell me “Ugh, I can’t draw!”

31
00:02:05,179 --> 00:02:09,839
But storyboarding isn’t about beautiful drawing; it’s about communicating ideas,

32
00:02:09,839 --> 00:02:14,283
and I think that <i>everyone</i> can learn how to visually communicate ideas.

33
00:02:14,283 --> 00:02:20,326
In some ways, bad drawing is actually an asset, because then all you can do is focus on the content.

34
00:02:20,326 --> 00:02:25,265
I said that good storyboards nearly always include a person who’s actually using the interface,

35
00:02:25,265 --> 00:02:30,007
and so, to get you started, I’d like to teach you my favourite trick for storyboarding.

36
00:02:30,007 --> 00:02:34,817
I learnt this from Bill Verplank. Bill and I taught together at Stanford for several years.

37
00:02:34,817 --> 00:02:40,909
And Bill, [inaudible] for generations, has taught people how to draw “Star People”, and it goes like this:

38
00:02:40,909 --> 00:02:41,861
[Professor Klemmer starts drawing a “star person”]

39
00:02:43,045 --> 00:02:46,949
We call it a “star person” because the body of the person is kind of like a star,

40
00:02:46,949 --> 00:02:51,590
and you can have them doing all sorts of things, so somebody can be holding something,

41
00:02:51,590 --> 00:02:58,460
or they can be reaching up to touch maybe something on a big screen.

42
00:02:58,460 --> 00:03:01,302
You can add any dynamics that you want.

43
00:03:01,302 --> 00:03:04,373
If you need to, you can show where people are looking.

44
00:03:04,373 --> 00:03:06,777
If you want, you can distinguish different people in the scenes —

45
00:03:06,777 --> 00:03:14,502
so you can colour them in a little bit, or you can add a sheriff’s badge.

46
00:03:15,641 --> 00:03:17,978
And, when you put it all together, you can get something like this.

47
00:03:17,978 --> 00:03:22,957
These are some images from the storyboarding guide that we’ve linked from your assignment.

48
00:03:22,957 --> 00:03:27,117
One of the very first things a storyboard should do is to illustrate a goal.

49
00:03:27,117 --> 00:03:30,999
Like in this storyboard, it’s “Let’s check out places in SF!”

50
00:03:30,999 --> 00:03:35,050
You can show how a task unfolds, and here you can see some “star people”,

51
00:03:35,050 --> 00:03:39,246
and they’re explaining what they’re doing, so here they’s saying “Here we’re in San Francisco.”

52
00:03:39,246 --> 00:03:43,563
And by the end of the storyboard you’ll want to show how they accomplished what their goal was,

53
00:03:43,563 --> 00:03:48,999
or, in some other way, have a satisfactory outcome at the end of the storyboard.

54
00:03:49,523 --> 00:03:50,978
And as a mall shows,

55
00:03:50,978 --> 00:03:55,682
even with a really simple visual language, there’s a whole lot you can do to get your point across.

56
00:03:56,113 --> 00:03:58,233
So, storyboards should accomplish three things:

57
00:03:58,233 --> 00:04:02,155
First, it should accomplish the setting: Who are the people involved?

58
00:04:02,155 --> 00:04:05,819
what’s the environment? and what tasks are they trying to do?

59
00:04:05,819 --> 00:04:12,535
Next, it should show the sequence: What are the steps that they do to accomplish the task? —

60
00:04:12,535 --> 00:04:17,211
Not necessarily what user interface’s exactly where the buttons and widgets are,

61
00:04:17,211 --> 00:04:23,289
but what role the user interface plays in helping them get their goal achieved.

62
00:04:23,289 --> 00:04:28,711
And one the the first steps is going to be: What leads somebody to use the app?

63
00:04:28,711 --> 00:04:34,479
In the mall’s example, that began with somebody saying “Let’s check out places in San Francisco!”

64
00:04:34,479 --> 00:04:38,046
That’s the springboard that clearly motivates people to go to the application.

65
00:04:38,046 --> 00:04:46,629
And then your app can easily and clearly show what’s the task that the idea you have is supporting.

66
00:04:46,629 --> 00:04:49,613
And then finally, at the end, you’ve got the satisfaction —

67
00:04:49,613 --> 00:04:53,285
How does what motivated them to use the app in the first place,

68
00:04:53,285 --> 00:04:58,640
how does that connect to their achieving that in the end of the sequence?

69
00:04:58,640 --> 00:05:02,124
Questions your storyboard can help you think about are:

70
00:05:02,124 --> 00:05:06,819
“What is it that enables people to accomplish, and what need does your application fill?”

71
00:05:06,819 --> 00:05:10,318
I really like storyboards for their holistic focus;

72
00:05:10,318 --> 00:05:14,108
it enables you to think through how you might support a task

73
00:05:14,108 --> 00:05:17,620
without committing to a particular user interface —

74
00:05:17,620 --> 00:05:23,203
that’s the magic, and this is especially important when you’re designing as a team,

75
00:05:23,203 --> 00:05:29,207
because the idea that’s in your head may or may not be the same as the idea that’s in somebody else’s head.

76
00:05:29,207 --> 00:05:33,095
Or, you may have this great idea, but people don’t know what you’re talking about yet.

77
00:05:33,095 --> 00:05:38,271
Once you’ve got it out on paper and concrete, it makes it much easier for poeple to have common ground,

78
00:05:38,271 --> 00:05:41,013
and agree on how to move forward.

79
00:05:41,013 --> 00:05:44,872
When you’re storyboarding, I suggest imposing extremely harsh time limits on yourself,

80
00:05:44,872 --> 00:05:47,727
like 10 minutes for a storyboard.

81
00:05:47,727 --> 00:05:52,892
It can be easy to try and get everything beautiful even if you’re sketching out with pen and paper,

82
00:05:52,892 --> 00:05:54,828
but that’s not the point!

83
00:05:54,828 --> 00:05:58,163
Once you’ve got a rough idea of what your application’s going to accomplish,

84
00:05:58,163 --> 00:06:00,953
you can start to think about how you’re going to implement that,

85
00:06:00,953 --> 00:06:04,844
and by implement I mean “What’s it going to look and feel like to the user?

86
00:06:04,844 --> 00:06:07,378
What’s the actual user interface is going to be?”

87
00:06:07,378 --> 00:06:10,558
And for figuring out the user interface at an early stage,

88
00:06:10,558 --> 00:06:15,405
the very best technique that I know is to use paper prototyping.

89
00:06:15,405 --> 00:06:18,096
Paper prototyping is exactly what it sounds like:

90
00:06:18,096 --> 00:06:23,372
You’re going to make a mockup of the user interface, and, instead of doing it on the computer,

91
00:06:23,372 --> 00:06:27,784
which can take a lot of time and encourage you to try to get it beautiful and exact,

92
00:06:27,784 --> 00:06:32,736
you’re going to use paper, Post-It notes, and markers, to sketch things out really quickly.

93
00:06:32,736 --> 00:06:36,021
Here’s an example, it’s again from the “Lifealyfics” team.

94
00:06:36,021 --> 00:06:39,382
These are the paper prototypes that they made:

95
00:06:39,390 --> 00:06:40,767
(Lifealyfics / Discover What Makes You Happy / (Begin)

96
00:06:40,767 --> 00:06:42,067
Here’s How It Works / 1. We’ll send you random texts throughout the day, at the frequency you select. / 2. You input your [illegible] and activity / (Then What?)

97
00:06:42,067 --> 00:06:43,398
3. At the end of the week, we’ll send you your results, and you’ll realize what makes you happy and fulfilled! / (Start)

98
00:06:43,398 --> 00:06:46,036
Step 1 of 3 / Enter phone number [text field] / (Next)

99
00:06:46,052 --> 00:06:48,229
The more texts you respond to, the more accurate your personal graph will be! / How many texts per day do you want to receive? [dropdown]

100
00:06:48,229 --> 00:06:49,532
Step 2 of 3 / How many times per day do you want to get a text?

101
00:06:49,532 --> 00:06:50,821
Step 2 of 3 / How many times per day do you want to get a text? / (Next)

102
00:06:50,821 --> 00:06:53,167
Step 3 of 3 / Earliest text: [dropdown] / Latest text: [dropdown] / (Next) )

103
00:07:07,049 --> 00:07:10,585
Here’s some tips for making effective paper prototypes:

104
00:07:10,585 --> 00:07:13,245
First, store all your materials in one place.

105
00:07:13,245 --> 00:07:20,528
You’re going to want to get a bucket of markers, maybe some Post-It notes or index cards.

106
00:07:20,528 --> 00:07:26,190
If you’ve got a mobile device that you’re simulating, you might even make a mockup of something like that,

107
00:07:26,190 --> 00:07:29,166
and you can slide in and out different interface widgets.

108
00:07:29,658 --> 00:07:32,602
Just like the storyboards, it’s important to work quickly.

109
00:07:32,602 --> 00:07:34,738
And if you had a widget that you’re going to use a lot of —

110
00:07:34,738 --> 00:07:38,291
like radio buttons or sliders or something like that —

111
00:07:38,310 --> 00:07:41,239
sometimes it can be faster to photocopy them on a photocopier,

112
00:07:41,239 --> 00:07:48,829
so you can make one version and then photocopy it to have a whole bunch.

113
00:07:48,829 --> 00:07:52,586
Sometimes, good paper prototyping is kind of like playing make-believe as a kid.

114
00:07:52,586 --> 00:07:56,242
So, if you’ve got something that’s complicated or highly interactive,

115
00:07:56,242 --> 00:07:58,307
you can just imagine what it would be like,

116
00:07:58,307 --> 00:08:02,699
and so you can role-play that out with the person who’s trying out your application.

117
00:08:02,884 --> 00:08:05,561
It can be helpful to have a frame to put your interface widgets in.

118
00:08:05,561 --> 00:08:07,836
Here we have a mobile frame.

119
00:08:07,836 --> 00:08:12,344
You can also stick things right on the device itself,

120
00:08:12,344 --> 00:08:16,512
So, if you want to make a mobile screen shot here,…

121
00:08:21,943 --> 00:08:24,850
Mobile user interface!

122
00:08:25,558 --> 00:08:30,508
Or, if you have a desktop user interface, you can take, like, a 11-by-14 sheet of poster board

123
00:08:30,508 --> 00:08:32,769
and put all of your elements on that.

124
00:08:32,769 --> 00:08:36,215
Good paper prototyping is also like collage — you can mix and match fidelities.

125
00:08:36,215 --> 00:08:41,234
So you can use printouts of actual screen shots; draw and annotate on top of that —

126
00:08:41,234 --> 00:08:43,989
anything that you want that can get your point quickly.

127
00:08:43,989 --> 00:08:46,780
And to help the person who’s trying out the prototype

128
00:08:46,780 --> 00:08:51,435
make the conceptual leap between the sketch on paper and an interactive system,

129
00:08:51,435 --> 00:08:55,339
you can add in a little widgets and chrome of your user interface

130
00:08:55,339 --> 00:08:58,122
to convey that it’s part of a larger operating system.

131
00:08:58,122 --> 00:09:01,839
Paper prototyping is not only fast and efficient;

132
00:09:01,839 --> 00:09:08,184
it’s also really fun, and you can get really creative in figuring out different ways to convey interactions.

133
00:09:08,184 --> 00:09:12,953
If you’ve got layers in your user interface, you can use transparencies as a way of showing them.

134
00:09:13,861 --> 00:09:16,541
If you have popup menus, you can make the back sticky,

135
00:09:16,541 --> 00:09:20,551
so that can stay on the right place on top of the main interface.

136
00:09:20,551 --> 00:09:23,090
You [can] use any kind of marker or pen you want;

137
00:09:23,090 --> 00:09:29,192
you can have things be coloured, [or] just black-and-white — Anything you can think of.

138
00:09:29,192 --> 00:09:37,014
You can use poster board (like this), or cardboard, index cards, foamcore —

139
00:09:37,014 --> 00:09:40,766
anything you want as a backing material.

140
00:09:40,766 --> 00:09:43,730
Things like tape are handy to have around.

141
00:09:43,730 --> 00:09:49,002
If you’d like to be able to have repeatable user input, you can use whiteboard markers or transparency pens,

142
00:09:49,002 --> 00:09:53,145
and have a whiteboard or a sheet or transparency that the user input goes on,

143
00:09:53,145 --> 00:09:55,811
and then you can take it away when you’re done.

144
00:09:55,811 --> 00:10:00,647
To be able to add structure to your user interface, you can have line widths of different thicknesses.

145
00:10:00,647 --> 00:10:07,443
So, you can have a thicker line that’s for the major elements, and a thinner line for the minor elements.

146
00:10:09,319 --> 00:10:15,130
And you can have a stack or either Post-It notes or index cards to show the tab panes of your user interface.

147
00:10:15,130 --> 00:10:19,396
So, the different layers can be on sheets beneath.

148
00:10:19,396 --> 00:10:22,345
Here you can see a wonderful widget from the “Lifealyfics” team,

149
00:10:22,345 --> 00:10:27,017
where they’ve created a sliding window inside a mobile phone mockup

150
00:10:27,017 --> 00:10:32,234
as a way of conveying how something would change over time and in response to user input.

151
00:10:32,234 --> 00:10:35,920
The other thing that I’m going to show here, and I’ll touch on several times in this course,

152
00:10:35,920 --> 00:10:39,338
is the importance of trying out multiple different alternative prototypes

153
00:10:39,338 --> 00:10:42,196
as a way of getting more valuable feedback from the user.

154
00:10:42,196 --> 00:10:48,372
So, here are different ways that you could present the data that a live logging system is gathering.

155
00:10:48,372 --> 00:10:52,397
Another reason I really like paper prototyping is that <i>everybody</i> can be involved.

156
00:10:52,397 --> 00:10:57,666
So, if you try out designs with users, give them a pen and have them modify the interface!

157
00:10:57,666 --> 00:11:01,179
Or if they’ve got stuck or think something is weird,

158
00:11:01,179 --> 00:11:05,218
grab a sheet of paper and make any modifications that you need.

159
00:11:05,218 --> 00:11:11,057
You can bring paper prototyping tools into the boardroom, you can bring to clients —

160
00:11:11,057 --> 00:11:13,609
any of the stakeholders that are involved in user interface design,

161
00:11:13,609 --> 00:11:16,160
you can get them involved in paper prototyping.

162
00:11:16,160 --> 00:11:18,682
That helps them get their ideas into the system

163
00:11:18,682 --> 00:11:22,444
and empowers them to play a more active role in the design process.

164
00:11:22,444 --> 00:11:28,425
Once you’re ready to move on from paper prototyping, a useful next step can be to make a digital mockup.

165
00:11:28,425 --> 00:11:30,282
Here’s an example of some mockups

166
00:11:30,282 --> 00:11:35,934
that my research team made for a collaboration with anesthesiologists in the medical school at Stanford.

167
00:11:36,673 --> 00:11:38,465
The first thing I’d like to point out about this

168
00:11:38,465 --> 00:11:42,232
is that you can see that a lot more time went into this digital mockup

169
00:11:42,232 --> 00:11:45,402
than into the paper prototypes that we’ve been talking about so far.

170
00:11:45,402 --> 00:11:49,103
And that’s one of the reasons why I think paper prototyping is so important.

171
00:11:49,103 --> 00:11:53,020
But there does come a time where you’ll want to get more specific about pixels,

172
00:11:53,020 --> 00:11:56,803
and that’s when digital mockups can play an important role.

173
00:11:56,803 --> 00:12:02,133
As your prototypes increase in fidelity — from storyboards, to paper prototypes, to digital mockups —

174
00:12:02,133 --> 00:12:07,084
the kinds of evaluation and feedback that you’re going to get from people are going to evolve also.

175
00:12:07,084 --> 00:12:10,439
So, early on, you might be talking about scenarios with people.

176
00:12:10,439 --> 00:12:12,245
And then, with the paper prototype,

177
00:12:12,245 --> 00:12:16,755
you might be running these informal “Try these out, here’s three alternatives” tests.

178
00:12:17,294 --> 00:12:21,183
These prototypes can also be useful for critiques within your design team.

179
00:12:21,183 --> 00:12:23,754
And as you get to higher and higher fidelity mockups,

180
00:12:23,754 --> 00:12:28,466
you can have the opportunity to get to more formal experimentation techniques.

181
00:12:29,374 --> 00:12:32,853
Rapid prototyping techniques are probably the most valuable weapon you’ll have

182
00:12:32,853 --> 00:12:34,864
in a human-centred design process.

183
00:12:34,864 --> 00:12:38,586
And if you’re interested in learning more, here are some resources that I recommend.

184
00:12:38,586 --> 00:12:41,524
I’ll see you next time.