0:00:01.011,0:00:03.915
One of the most important elements of human-centered design

0:00:03.915,0:00:07.129
is making sure that all the different design choices you make —

0:00:07.129,0:00:11.049
what functionality is available and what interface elements, information architecture,

0:00:11.049,0:00:14.203
and visual design [that] present that functionality

0:00:14.203,0:00:20.899
harmoniously combine to fluidly support the activities that matter to people that are using your system.

0:00:20.899,0:00:27.217
I bet that a lot of the systems that you find most inspiring benefit from this coherent, user-centered approach,

0:00:27.217,0:00:32.714
and that a lot of the interfaces that you find frustrating lack this coherence and feel jumbled.

0:00:32.714,0:00:34.356
Achieving this harmony can be difficult

0:00:34.356,0:00:40.322
because it’s easy to get sucked into implementation details and miss the forest for the trees.

0:00:40.322,0:00:43.716
One of the best ways of ensuring that a coherent, human-centered vision

0:00:43.716,0:00:47.110
drives your design and your design team

0:00:47.110,0:00:52.254
is to create a video prototype showing what you imagine it’ll be like to use your system.

0:00:52.254,0:00:55.087
It’s also a lot of fun.

0:00:55.087,0:00:58.021
To give you a sense of what I mean by this,

0:00:58.021,0:01:03.378
I’d like to show you a video prototype that the walkabout team created at Stanford.

0:01:04.517,0:01:05.952
(It’s time to go!

0:01:05.952,0:01:12.251
With the click of a button, Carissa sets Walkabout in motion on her iPhone.

0:01:12.251,0:01:15.283
She doesn’t have a lot of time for exercise in her day,

0:01:15.283,0:01:19.189
but she likes to stay healthy by walking to and from her destinations.

0:01:19.189,0:01:21.446
She’s got a couple of minutes before the bus comes,

0:01:21.446,0:01:24.953
so she sits down to check her Walkabout progress.

0:01:24.953,0:01:30.729
Walkabout counts the steps that she makes in her everyday life and converts them into a personal journey.

0:01:30.729,0:01:35.055
Carissa is taking a personal journey up Mount Everest.

0:01:35.055,0:01:38.336
She’s at 28,000 feet, about to reach the Hillary Step,

0:01:38.336,0:01:41.876
and she decides to take a look around.

0:01:41.876,0:01:44.896
Ryan’s feeling competitive.

0:01:44.896,0:01:49.986
He pulls up Walkabout and challenges his friend Brendon to a walk-off:

0:01:49.986,0:01:54.628
Whoever gets the most steps by the end of the day wins.

0:01:54.628,0:01:59.929
Brendon decides he’s ready to accept the challenge.

0:01:59.929,0: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.[br]

0:02:06.217,0:02:10.341
He checks his Walkabout competition and sees that Ryan is in the lead.

0:02:10.680,0:02:13.680
Brendon heads up the stairs.

0:02:13.680,0:02:17.154
Should Ryan take the long way to work, or the short way?

0:02:17.154,0:02:21.535
With more at stake than there used to be, he sets off.

0:02:21.535,0:02:26.977
Carissa checks her phone: She’s been invited to a step-off for Obama.[br]

0:02:26.977,0:02:30.577
She’s happy to track her steps for a good cause.

0:02:30.577,0:02:36.005
Ryan’s also been invited to the step-off; he decides to join too.

0:02:36.005,0:02:40.059
Everyone’s steps are accumulated cooperatively.

0:02:40.059,0:02:43.015
Joining up is a no-brainer for Brendon.

0:02:43.015,0:02:48.466
He decides to post a group Walkabout status on his Facebook page.

0:02:48.466,0:02:53.865
Walkabout: Small steps can lead to big change and big fun!

0:02:55.588,0:02:57.535
Walkabout / an iPhone application by: / Carissa Carter / Ryan Mason / Brendon Wypich)

0:03:00.705,0:03:05.500
Video prototypes offer four really important benefits for your design process.

0:03:05.500,0:03:09.821
First, they can be really cheap and fast to make.

0:03:09.821,0:03:12.962
Second, they serve as great communication tools.

0:03:12.962,0:03:16.804
Among other things, it’s a wonderful way of showing the context of use,

0:03:16.804,0:03:20.637
so that your entire design team can get on that same page.

0:03:20.637,0:03:26.902
And because it’s a standalone video, it’s an explanation of your design ideas that’s completely portable[br]

0:03:26.902,0:03:30.819
and that anybody, anytime can call up and look at.

0:03:31.881,0:03:35.149
I also really like using video prototypes as a spec for a development team

0:03:35.149,0:03:39.656
where you can say “any interface that accomplishes this goal is a good interface.”

0:03:39.656,0:03:43.159
And these videos can make the interface design decisions come alive

0:03:43.159,0:03:47.399
a lot more than a written long-word documentation.

0:03:47.399,0:03:53.979
And finally, video prototypes force you to tie all of your interface design decisions to actual user tasks.

0:03:54.533,0:03:58.499
This helps you align, orient, and prioritize your interface choices.

0:03:58.499,0:04:00.562
And it makes sure you have a complete interface:

0:04:00.562,0:04:05.830
Do you have all of the elements that somebody would need to accomplish the task that they’d like to?

0:04:05.830,0:04:07.861
and also that there’s nothing extra?

0:04:07.861,0:04:10.198
In the development process it’s really easy to find

0:04:10.198,0:04:14.829
all sorts of bells and whistles and shiny things that you want to be able to add into the system.[br]

0:04:14.829,0:04:17.541
And if it ultimately doesn’t help people accomplish goals,

0:04:17.541,0:04:23.703
a video prototype can be a great way to remind yourself that maybe it’s best to leave it out.

0:04:23.703,0:04:27.697
You can use video prototyping throughout your design lifecycle.

0:04:27.697,0:04:31.125
Really early on, when you’re first just starting to think around ideas,

0:04:31.125,0:04:36.251
you can use video prototypes as a brainstorming aid, and these can take just a few minutes.[br]

0:04:36.251,0:04:43.311
You can take paper prototypes that you’ve built and, in an hour or two, put together a video really quickly.[br]

0:04:43.311,0:04:45.038
Or, if you have a design idea

0:04:45.038,0:04:49.344
that you really need to get a lot of support behind from a large organization

0:04:49.344,0:04:51.752
to sell something to management or investors,

0:04:51.752,0:04:57.881
you can make a really slick video prototype as a way of selling and explaining your ideas.

0:04:57.881,0:05:01.635
A great example of this is Apple’s Knowledge Navigator, which, 20 years ago,

0:05:01.635,0:05:08.054
introduced a number of ideas for a vision of a future smarter, more adaptive user interface.

0:05:08.054,0:05:13.273
And while it can be appealing to try and channel your inner Steven Spielberg and make a big-budget epic film,

0:05:13.273,0:05:17.246
a lot of my favorite uses of video prototypes comes early in the design process,

0:05:17.246,0:05:22.510
where you’re using video as a way of communicating to the design team and debating design ideas.

0:05:22.510,0:05:25.494
And in a lot of cases, you’ll use your paper prototypes

0:05:25.494,0:05:29.616
as the interface that the video prototype is elaborating on.

0:05:29.616,0:05:32.055
Here’s a great example of that that Lisa Seaman made

0:05:32.066,0:05:35.924
when she was working on a smart energy-monitoring system at Stanford.

0:05:37.416,0:05:41.346
(Abby Dinkenspiel is an economics professor at Stanford.[br]

0:05:41.346,0:05:45.016
She cares about her energy usage, but it’s not to the extent of her actions.

0:05:45.016,0:05:47.049
She receives a monthly energy bill,

0:05:47.049,0:05:51.374
but there’s little information about which activities or devices consume the most energy.

0:05:51.374,0:05:56.297
She wants to be able to identify problem spots and correct them as best as possible.

0:06:00.112,0:06:05.817
Using her home monitoring system, Abby’s able to see how much electricity each of her appliances is using.[br]

0:06:05.817,0:06:11.439
Starting in the kitchen, she’s able to compare the usage of each of her appliances to the national average.[br]

0:06:11.439,0:06:16.223
She’s also able to look at the other rooms of the house, check her progress statistics,

0:06:16.223,0:06:20.373
and talk to her energy-saving buddy.

0:06:23.989,0:06:27.362
Through the console, she is able to look at other rooms in her house.

0:06:27.362,0:06:30.672
The house schematic shows where each of her appliances is located.

0:06:30.672,0:06:35.619
She is also able to individually target rooms like the library, bathroom, bedroom and living room

0:06:35.619,0:06:38.513
to see how much energy she is using in each.

0:06:38.513,0:06:42.316
She’s able to select one — such as the bathroom — and control the devices.

0:06:42.316,0:06:46.851
Here she can set the shower time, so that the hot water will gradually turn off after ten minutes.

0:06:46.851,0:06:51.721
Abby is also able to check her home monitoring system remotely while she is in the office.

0:06:51.721,0:06:54.388
She can go to a personal website and access device info,

0:06:54.388,0:06:57.547
check her progress, and chat with her energy saving buddy.

0:06:57.547,0:07:01.516
She’s also able to control her devices via a smartphone

0:07:01.516,0:07:05.898
in case she happens to leave the lights on or the air conditioning.

0:07:06.160,0:07:08.551
With access to neighborhood consumption patterns,

0:07:08.551,0:07:12.421
consumers can accurately compare their energy consumption to their neighbors.

0:07:12.421,0:07:17.992
Neighborhoods can band together in the fight to reduce their collective carbon footprint.

0:07:18.838,0:07:21.126
Another energy-saving tool is the buddy system,

0:07:21.126,0:07:24.839
where you enlist a friend, colleague, or online friend to save energy together.

0:07:24.839,0:07:30.324
This is a good way to check progress and motivate each other in a positive yet competitive way.

0:07:31.062,0:07:36.123
Stanford University / Initiative for a Sustainable Future)

0:07:37.000,0:07:39.198
So what do you put in a video prototype?

0:07:40.091,0:07:45.529
Like a storyboard, you’ll want to make sure that the video prototype shows the entire task,[br]

0:07:45.529,0:07:50.042
including the upfront motivation, and the success outcome at the end.

0:07:50.042,0:07:53.381
Establishing shots and narrative at the beginning can really help with this.

0:07:53.381,0:07:58.245
For example, in the Walkabout video, Carissa begins by saying, “it’s time to go.”

0:07:58.245,0:08:03.288
That introduces the task: She needs to head somewhere, and Walkabout is reminding her to walk.[br]

0:08:03.965,0: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.

0:08:09.004,0:08:13.722
Draw on the tasks that you observed and elaborate on them when making your prototype.

0:08:13.722,0:08:17.653
When you think about the task that you want your system to perform especially well,

0:08:17.653,0:08:20.986
those are things that you should showcase in the video prototype.

0:08:20.986,0:08:24.159
And in this way a video prototype is a great way

0:08:24.159,0:08:29.796
of figuring out what your minimal viable product is for something you’ll want to release —

0:08:29.796,0:08:32.815
In the video, in the minimum viable product;

0:08:32.815,0:08:35.869
Not in the video, doesn’t need to be in the first round.

0:08:35.869,0:08:40.798
As you can see in making these prototypes, you’re making important and consequential design decisions.[br]

0:08:40.798,0:08:44.093
And in this way — making and viewing these prototypes —

0:08:44.093,0:08:49.740
changes what the design teams argue about and I think do so in a really good way.

0:08:49.740,0:08:51.795
Alright, you’re on board and ready to go.

0:08:51.795,0:08:53.284
How do you do it?

0:08:53.284,0:08:56.790
Well the first thing to do, like anything, start with an outline.

0:08:56.790,0:09:02.216
Plan out your shots, what the video prototype is going to show and how the tasks will accomplish that.[br]

0:09:02.216,0:09:06.441
You can use the storyboards that you’d made to help you do that; those will be really valuable here.[br]

0:09:06.441,0:09:08.511
It’s also fine to extemporize.

0:09:08.511,0:09:12.931
Turn on the camera. Make up a bunch of stuff. See what happens.[br]

0:09:12.931,0:09:16.867
Don’t worry about a fancy camera: It doesn’t matter; It’s not that important.

0:09:16.867,0:09:20.632
And in fact, fancy gadgets can often be a distraction here,

0:09:20.632,0:09:24.375
because it’s easy to spend a lot of time on the production side of things.

0:09:24.375,0:09:27.638
If you, or anyone you know, has a a camera phone,

0:09:27.638,0:09:32.039
you’ve got the equipment that you need probably to make a video prototype.

0:09:32.039,0:09:34.528
The other main ingredients you’ll need of course are people:

0:09:34.528,0:09:37.594
Get your friends to be actors or you can be actors yourself.

0:09:37.594,0:09:41.052
Great way to build to build empathy with the people that’ll use your system.

0:09:41.052,0:09:42.400
And you’ll need a real location.

0:09:42.400,0:09:47.703
Its fun to shoot these out in the world, or wherever you think people will be using your system.[br]

0:09:47.703,0:09:51.035
And I can’t emphasize enough how the goal of a video prototype

0:09:51.035,0:09:56.708
is really about the message and story that you’re trying to get across, and not about high production values,[br]

0:09:56.708,0:10:00.559
because it really is easy to spend far too long on that.

0:10:00.974,0:10:03.596
When planning your prototype, think about a couple of things:

0:10:03.596,0:10:05.790
One of the most important ones is:

0:10:05.790,0:10:10.349
Are you going to make it with audio, or make it silent movie style?

0:10:10.349,0:10:16.721
A big advantage of having it be silent movie style, is that audio can just be a pain to deal with.[br]

0:10:16.721,0:10:23.974
You can make title cards on sheets of paper at home, so, you can use these to title the scenes.

0:10:23.974,0:10:27.737
And you can also use things like Post-It notes to communicate stuff about your users —

0:10:27.737,0:10:31.173
so, give people a name tag that has their name, or role,

0:10:31.173,0:10:34.429
or something that the audience ought to know about what they care about.

0:10:34.429,0:10:36.940
As we talked about, the interface can be anything you want —

0:10:36.940,0:10:43.068
You can make a paper prototype, or digital mockups; or, if you have code, go with that;

0:10:43.068,0:10:45.292
or the interface can even be invisible.

0:10:45.292,0:10:49.355
So for example, if I was going to build a presentation tool interface,

0:10:49.355,0:10:54.945
you could show me working at this tablet right here, without actually showing any of what I see on the screen,

0:10:54.945,0:10:56.773
and I really like that as a strategy

0:10:56.773,0:11:01.823
because it absolutely emphasizes what the person using the system can accomplish.

0:11:01.823,0:11:07.590
And then later, you can think about “What UI would we need to enable them to do that?”

0:11:07.590,0:11:09.633
And finally, if I can give you one tip

0:11:09.633,0:11:13.584
that will make this a whole lot more fun and save you a whole lot more time:[br]

0:11:13.584,0:11:19.108
Edit as little as possible because editing is hugely time-consuming.

0:11:19.108,0:11:22.316
My TA for this class, Robbie, knows that far too well.

0:11:22.316,0:11:25.626
If you can, do the whole thing in one take, and if that’s not reasonable,

0:11:25.626,0:11:30.227
just use the pause button in your camera to be able to do your in-camera editing,

0:11:30.227,0:11:32.035
and you’re off and running.

0:11:32.035,0:11:34.697
For more information, see Wendy Mackay’s material.

0:11:34.697,0:11:39.396
She’s done a lot of work on video prototyping over the years and has a lot of great suggestions.

0:11:39.396,0:11:42.501
I’d also like to thank her because a lot of the stuff that I shared with you today

0:11:42.501,0:11:45.644
is based on her teaching of this stuff over the years.

0:11:45.659,0:11:49.751
Have fun!