1
00:00:01,011 --> 00:00:03,915
One of the most important elements of human-centered design

2
00:00:03,915 --> 00:00:07,129
is making sure that all the different design choices you make —

3
00:00:07,129 --> 00:00:11,049
what functionality is available and what interface elements, information architecture,

4
00:00:11,049 --> 00:00:14,203
and visual design [that] present that functionality

5
00:00:14,203 --> 00:00:20,899
harmoniously combine to fluidly support the activities that matter to people that are using your system.

6
00:00:20,899 --> 00:00:27,217
I bet that a lot of the systems that you find most inspiring benefit from this coherent, user-centered approach,

7
00:00:27,217 --> 00:00:32,714
and that a lot of the interfaces that you find frustrating lack this coherence and feel jumbled.

8
00:00:32,714 --> 00:00:34,356
Achieving this harmony can be difficult

9
00:00:34,356 --> 00:00:40,322
because it’s easy to get sucked into implementation details and miss the forest for the trees.

10
00:00:40,322 --> 00:00:43,716
One of the best ways of ensuring that a coherent, human-centered vision

11
00:00:43,716 --> 00:00:47,110
drives your design and your design team

12
00:00:47,110 --> 00:00:52,254
is to create a video prototype showing what you imagine it’ll be like to use your system.

13
00:00:52,254 --> 00:00:55,087
It’s also a lot of fun.

14
00:00:55,087 --> 00:00:58,021
To give you a sense of what I mean by this,

15
00:00:58,021 --> 00:01:03,378
I’d like to show you a video prototype that the walkabout team created at Stanford.

16
00:01:04,517 --> 00:01:05,952
(It’s time to go!

17
00:01:05,952 --> 00:01:12,251
With the click of a button, Carissa sets Walkabout in motion on her iPhone.

18
00:01:12,251 --> 00:01:15,283
She doesn’t have a lot of time for exercise in her day,

19
00:01:15,283 --> 00:01:19,189
but she likes to stay healthy by walking to and from her destinations.

20
00:01:19,189 --> 00:01:21,446
She’s got a couple of minutes before the bus comes,

21
00:01:21,446 --> 00:01:24,953
so she sits down to check her Walkabout progress.

22
00:01:24,953 --> 00:01:30,729
Walkabout counts the steps that she makes in her everyday life and converts them into a personal journey.

23
00:01:30,729 --> 00:01:35,055
Carissa is taking a personal journey up Mount Everest.

24
00:01:35,055 --> 00:01:38,336
She’s at 28,000 feet, about to reach the Hillary Step,

25
00:01:38,336 --> 00:01:41,876
and she decides to take a look around.

26
00:01:41,876 --> 00:01:44,896
Ryan’s feeling competitive.

27
00:01:44,896 --> 00:01:49,986
He pulls up Walkabout and challenges his friend Brendon to a walk-off:

28
00:01:49,986 --> 00:01:54,628
Whoever gets the most steps by the end of the day wins.

29
00:01:54,628 --> 00:01:59,929
Brendon decides he’s ready to accept the challenge.

30
00:01:59,929 --> 00:02:06,217
As he heads off to his next class, he has to decide whether or not he’s going to take the elevator.


31
00:02:06,217 --> 00:02:10,341
He checks his Walkabout competition and sees that Ryan is in the lead.

32
00:02:10,680 --> 00:02:13,680
Brendon heads up the stairs.

33
00:02:13,680 --> 00:02:17,154
Should Ryan take the long way to work, or the short way?

34
00:02:17,154 --> 00:02:21,535
With more at stake than there used to be, he sets off.

35
00:02:21,535 --> 00:02:26,977
Carissa checks her phone: She’s been invited to a step-off for Obama.


36
00:02:26,977 --> 00:02:30,577
She’s happy to track her steps for a good cause.

37
00:02:30,577 --> 00:02:36,005
Ryan’s also been invited to the step-off; he decides to join too.

38
00:02:36,005 --> 00:02:40,059
Everyone’s steps are accumulated cooperatively.

39
00:02:40,059 --> 00:02:43,015
Joining up is a no-brainer for Brendon.

40
00:02:43,015 --> 00:02:48,466
He decides to post a group Walkabout status on his Facebook page.

41
00:02:48,466 --> 00:02:53,865
Walkabout: Small steps can lead to big change and big fun!

42
00:02:55,588 --> 00:02:57,535
Walkabout / an iPhone application by: / Carissa Carter / Ryan Mason / Brendon Wypich)

43
00:03:00,705 --> 00:03:05,500
Video prototypes offer four really important benefits for your design process.

44
00:03:05,500 --> 00:03:09,821
First, they can be really cheap and fast to make.

45
00:03:09,821 --> 00:03:12,962
Second, they serve as great communication tools.

46
00:03:12,962 --> 00:03:16,804
Among other things, it’s a wonderful way of showing the context of use,

47
00:03:16,804 --> 00:03:20,637
so that your entire design team can get on that same page.

48
00:03:20,637 --> 00:03:26,902
And because it’s a standalone video, it’s an explanation of your design ideas that’s completely portable


49
00:03:26,902 --> 00:03:30,819
and that anybody, anytime can call up and look at.

50
00:03:31,881 --> 00:03:35,149
I also really like using video prototypes as a spec for a development team

51
00:03:35,149 --> 00:03:39,656
where you can say “any interface that accomplishes this goal is a good interface.”

52
00:03:39,656 --> 00:03:43,159
And these videos can make the interface design decisions come alive

53
00:03:43,159 --> 00:03:47,399
a lot more than a written long-word documentation.

54
00:03:47,399 --> 00:03:53,979
And finally, video prototypes force you to tie all of your interface design decisions to actual user tasks.

55
00:03:54,533 --> 00:03:58,499
This helps you align, orient, and prioritize your interface choices.

56
00:03:58,499 --> 00:04:00,562
And it makes sure you have a complete interface:

57
00:04:00,562 --> 00:04:05,830
Do you have all of the elements that somebody would need to accomplish the task that they’d like to?

58
00:04:05,830 --> 00:04:07,861
and also that there’s nothing extra?

59
00:04:07,861 --> 00:04:10,198
In the development process it’s really easy to find

60
00:04:10,198 --> 00:04:14,829
all sorts of bells and whistles and shiny things that you want to be able to add into the system.


61
00:04:14,829 --> 00:04:17,541
And if it ultimately doesn’t help people accomplish goals,

62
00:04:17,541 --> 00:04:23,703
a video prototype can be a great way to remind yourself that maybe it’s best to leave it out.

63
00:04:23,703 --> 00:04:27,697
You can use video prototyping throughout your design lifecycle.

64
00:04:27,697 --> 00:04:31,125
Really early on, when you’re first just starting to think around ideas,

65
00:04:31,125 --> 00:04:36,251
you can use video prototypes as a brainstorming aid, and these can take just a few minutes.


66
00:04:36,251 --> 00:04:43,311
You can take paper prototypes that you’ve built and, in an hour or two, put together a video really quickly.


67
00:04:43,311 --> 00:04:45,038
Or, if you have a design idea

68
00:04:45,038 --> 00:04:49,344
that you really need to get a lot of support behind from a large organization

69
00:04:49,344 --> 00:04:51,752
to sell something to management or investors,

70
00:04:51,752 --> 00:04:57,881
you can make a really slick video prototype as a way of selling and explaining your ideas.

71
00:04:57,881 --> 00:05:01,635
A great example of this is Apple’s Knowledge Navigator, which, 20 years ago,

72
00:05:01,635 --> 00:05:08,054
introduced a number of ideas for a vision of a future smarter, more adaptive user interface.

73
00:05:08,054 --> 00:05:13,273
And while it can be appealing to try and channel your inner Steven Spielberg and make a big-budget epic film,

74
00:05:13,273 --> 00:05:17,246
a lot of my favorite uses of video prototypes comes early in the design process,

75
00:05:17,246 --> 00:05:22,510
where you’re using video as a way of communicating to the design team and debating design ideas.

76
00:05:22,510 --> 00:05:25,494
And in a lot of cases, you’ll use your paper prototypes

77
00:05:25,494 --> 00:05:29,616
as the interface that the video prototype is elaborating on.

78
00:05:29,616 --> 00:05:32,055
Here’s a great example of that that Lisa Seaman made

79
00:05:32,066 --> 00:05:35,924
when she was working on a smart energy-monitoring system at Stanford.

80
00:05:37,416 --> 00:05:41,346
(Abby Dinkenspiel is an economics professor at Stanford.


81
00:05:41,346 --> 00:05:45,016
She cares about her energy usage, but it’s not to the extent of her actions.

82
00:05:45,016 --> 00:05:47,049
She receives a monthly energy bill,

83
00:05:47,049 --> 00:05:51,374
but there’s little information about which activities or devices consume the most energy.

84
00:05:51,374 --> 00:05:56,297
She wants to be able to identify problem spots and correct them as best as possible.

85
00:06:00,112 --> 00:06:05,817
Using her home monitoring system, Abby’s able to see how much electricity each of her appliances is using.


86
00:06:05,817 --> 00:06:11,439
Starting in the kitchen, she’s able to compare the usage of each of her appliances to the national average.


87
00:06:11,439 --> 00:06:16,223
She’s also able to look at the other rooms of the house, check her progress statistics,

88
00:06:16,223 --> 00:06:20,373
and talk to her energy-saving buddy.

89
00:06:23,989 --> 00:06:27,362
Through the console, she is able to look at other rooms in her house.

90
00:06:27,362 --> 00:06:30,672
The house schematic shows where each of her appliances is located.

91
00:06:30,672 --> 00:06:35,619
She is also able to individually target rooms like the library, bathroom, bedroom and living room

92
00:06:35,619 --> 00:06:38,513
to see how much energy she is using in each.

93
00:06:38,513 --> 00:06:42,316
She’s able to select one — such as the bathroom — and control the devices.

94
00:06:42,316 --> 00:06:46,851
Here she can set the shower time, so that the hot water will gradually turn off after ten minutes.

95
00:06:46,851 --> 00:06:51,721
Abby is also able to check her home monitoring system remotely while she is in the office.

96
00:06:51,721 --> 00:06:54,388
She can go to a personal website and access device info,

97
00:06:54,388 --> 00:06:57,547
check her progress, and chat with her energy saving buddy.

98
00:06:57,547 --> 00:07:01,516
She’s also able to control her devices via a smartphone

99
00:07:01,516 --> 00:07:05,898
in case she happens to leave the lights on or the air conditioning.

100
00:07:06,160 --> 00:07:08,551
With access to neighborhood consumption patterns,

101
00:07:08,551 --> 00:07:12,421
consumers can accurately compare their energy consumption to their neighbors.

102
00:07:12,421 --> 00:07:17,992
Neighborhoods can band together in the fight to reduce their collective carbon footprint.

103
00:07:18,838 --> 00:07:21,126
Another energy-saving tool is the buddy system,

104
00:07:21,126 --> 00:07:24,839
where you enlist a friend, colleague, or online friend to save energy together.

105
00:07:24,839 --> 00:07:30,324
This is a good way to check progress and motivate each other in a positive yet competitive way.

106
00:07:31,062 --> 00:07:36,123
Stanford University / Initiative for a Sustainable Future)

107
00:07:37,000 --> 00:07:39,198
So what do you put in a video prototype?

108
00:07:40,091 --> 00:07:45,529
Like a storyboard, you’ll want to make sure that the video prototype shows the entire task,


109
00:07:45,529 --> 00:07:50,042
including the upfront motivation, and the success outcome at the end.

110
00:07:50,042 --> 00:07:53,381
Establishing shots and narrative at the beginning can really help with this.

111
00:07:53,381 --> 00:07:58,245
For example, in the Walkabout video, Carissa begins by saying, “it’s time to go.”

112
00:07:58,245 --> 00:08:03,288
That introduces the task: She needs to head somewhere, and Walkabout is reminding her to walk.


113
00:08:03,965 --> 00:08:09,004
Video prototypes are also a great time for you to take what you learned in the field and put it to use.

114
00:08:09,004 --> 00:08:13,722
Draw on the tasks that you observed and elaborate on them when making your prototype.

115
00:08:13,722 --> 00:08:17,653
When you think about the task that you want your system to perform especially well,

116
00:08:17,653 --> 00:08:20,986
those are things that you should showcase in the video prototype.

117
00:08:20,986 --> 00:08:24,159
And in this way a video prototype is a great way

118
00:08:24,159 --> 00:08:29,796
of figuring out what your minimal viable product is for something you’ll want to release —

119
00:08:29,796 --> 00:08:32,815
In the video, in the minimum viable product;

120
00:08:32,815 --> 00:08:35,869
Not in the video, doesn’t need to be in the first round.

121
00:08:35,869 --> 00:08:40,798
As you can see in making these prototypes, you’re making important and consequential design decisions.


122
00:08:40,798 --> 00:08:44,093
And in this way — making and viewing these prototypes —

123
00:08:44,093 --> 00:08:49,740
changes what the design teams argue about and I think do so in a really good way.

124
00:08:49,740 --> 00:08:51,795
Alright, you’re on board and ready to go.

125
00:08:51,795 --> 00:08:53,284
How do you do it?

126
00:08:53,284 --> 00:08:56,790
Well the first thing to do, like anything, start with an outline.

127
00:08:56,790 --> 00:09:02,216
Plan out your shots, what the video prototype is going to show and how the tasks will accomplish that.


128
00:09:02,216 --> 00:09:06,441
You can use the storyboards that you’d made to help you do that; those will be really valuable here.


129
00:09:06,441 --> 00:09:08,511
It’s also fine to extemporize.

130
00:09:08,511 --> 00:09:12,931
Turn on the camera. Make up a bunch of stuff. See what happens.


131
00:09:12,931 --> 00:09:16,867
Don’t worry about a fancy camera: It doesn’t matter; It’s not that important.

132
00:09:16,867 --> 00:09:20,632
And in fact, fancy gadgets can often be a distraction here,

133
00:09:20,632 --> 00:09:24,375
because it’s easy to spend a lot of time on the production side of things.

134
00:09:24,375 --> 00:09:27,638
If you, or anyone you know, has a a camera phone,

135
00:09:27,638 --> 00:09:32,039
you’ve got the equipment that you need probably to make a video prototype.

136
00:09:32,039 --> 00:09:34,528
The other main ingredients you’ll need of course are people:

137
00:09:34,528 --> 00:09:37,594
Get your friends to be actors or you can be actors yourself.

138
00:09:37,594 --> 00:09:41,052
Great way to build to build empathy with the people that’ll use your system.

139
00:09:41,052 --> 00:09:42,400
And you’ll need a real location.

140
00:09:42,400 --> 00:09:47,703
Its fun to shoot these out in the world, or wherever you think people will be using your system.


141
00:09:47,703 --> 00:09:51,035
And I can’t emphasize enough how the goal of a video prototype

142
00:09:51,035 --> 00:09:56,708
is really about the message and story that you’re trying to get across, and not about high production values,


143
00:09:56,708 --> 00:10:00,559
because it really is easy to spend far too long on that.

144
00:10:00,974 --> 00:10:03,596
When planning your prototype, think about a couple of things:

145
00:10:03,596 --> 00:10:05,790
One of the most important ones is:

146
00:10:05,790 --> 00:10:10,349
Are you going to make it with audio, or make it silent movie style?

147
00:10:10,349 --> 00:10:16,721
A big advantage of having it be silent movie style, is that audio can just be a pain to deal with.


148
00:10:16,721 --> 00:10:23,974
You can make title cards on sheets of paper at home, so, you can use these to title the scenes.

149
00:10:23,974 --> 00:10:27,737
And you can also use things like Post-It notes to communicate stuff about your users —

150
00:10:27,737 --> 00:10:31,173
so, give people a name tag that has their name, or role,

151
00:10:31,173 --> 00:10:34,429
or something that the audience ought to know about what they care about.

152
00:10:34,429 --> 00:10:36,940
As we talked about, the interface can be anything you want —

153
00:10:36,940 --> 00:10:43,068
You can make a paper prototype, or digital mockups; or, if you have code, go with that;

154
00:10:43,068 --> 00:10:45,292
or the interface can even be invisible.

155
00:10:45,292 --> 00:10:49,355
So for example, if I was going to build a presentation tool interface,

156
00:10:49,355 --> 00:10:54,945
you could show me working at this tablet right here, without actually showing any of what I see on the screen,

157
00:10:54,945 --> 00:10:56,773
and I really like that as a strategy

158
00:10:56,773 --> 00:11:01,823
because it absolutely emphasizes what the person using the system can accomplish.

159
00:11:01,823 --> 00:11:07,590
And then later, you can think about “What UI would we need to enable them to do that?”

160
00:11:07,590 --> 00:11:09,633
And finally, if I can give you one tip

161
00:11:09,633 --> 00:11:13,584
that will make this a whole lot more fun and save you a whole lot more time:


162
00:11:13,584 --> 00:11:19,108
Edit as little as possible because editing is hugely time-consuming.

163
00:11:19,108 --> 00:11:22,316
My TA for this class, Robbie, knows that far too well.

164
00:11:22,316 --> 00:11:25,626
If you can, do the whole thing in one take, and if that’s not reasonable,

165
00:11:25,626 --> 00:11:30,227
just use the pause button in your camera to be able to do your in-camera editing,

166
00:11:30,227 --> 00:11:32,035
and you’re off and running.

167
00:11:32,035 --> 00:11:34,697
For more information, see Wendy Mackay’s material.

168
00:11:34,697 --> 00:11:39,396
She’s done a lot of work on video prototyping over the years and has a lot of great suggestions.

169
00:11:39,396 --> 00:11:42,501
I’d also like to thank her because a lot of the stuff that I shared with you today

170
00:11:42,501 --> 00:11:45,644
is based on her teaching of this stuff over the years.

171
00:11:45,659 --> 00:11:49,751
Have fun!