Lecture 3.3: Faking it – Video Prototyping (11:48)

One of the most important elements of human-centered design

is making sure that all the different design choices you make —

what functionality is available and what interface elements, information architecture,

and visual design [that] present that functionality

harmoniously combine to fluidly support the activities that matter to people that are using your system.

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

and that a lot of the interfaces that you find frustrating lack this coherence and feel jumbled.

Achieving this harmony can be difficult

because it’s easy to get sucked into implementation details and miss the forest for the trees.

One of the best ways of ensuring that a coherent, human-centered vision

drives your design and your design team

is to create a video prototype showing what you imagine it’ll be like to use your system.

It’s also a lot of fun.

To give you a sense of what I mean by this,

I’d like to show you a video prototype that the walkabout team created at Stanford.

(It’s time to go!

With the click of a button, Carissa sets Walkabout in motion on her iPhone.

She doesn’t have a lot of time for exercise in her day,

but she likes to stay healthy by walking to and from her destinations.

She’s got a couple of minutes before the bus comes,

so she sits down to check her Walkabout progress.

Walkabout counts the steps that she makes in her everyday life and converts them into a personal journey.

Carissa is taking a personal journey up Mount Everest.

She’s at 28,000 feet, about to reach the Hillary Step,

and she decides to take a look around.

Ryan’s feeling competitive.

He pulls up Walkabout and challenges his friend Brendon to a walk-off:

Whoever gets the most steps by the end of the day wins.

Brendon decides he’s ready to accept the challenge.

As he heads off to his next class, he has to decide whether or not he’s going to take the elevator.

He checks his Walkabout competition and sees that Ryan is in the lead.

Brendon heads up the stairs.

Should Ryan take the long way to work, or the short way?

With more at stake than there used to be, he sets off.

Carissa checks her phone: She’s been invited to a step-off for Obama.

She’s happy to track her steps for a good cause.

Ryan’s also been invited to the step-off; he decides to join too.

Everyone’s steps are accumulated cooperatively.

Joining up is a no-brainer for Brendon.

He decides to post a group Walkabout status on his Facebook page.

Walkabout: Small steps can lead to big change and big fun!

Walkabout / an iPhone application by: / Carissa Carter / Ryan Mason / Brendon Wypich)

Video prototypes offer four really important benefits for your design process.

First, they can be really cheap and fast to make.

Second, they serve as great communication tools.

Among other things, it’s a wonderful way of showing the context of use,

so that your entire design team can get on that same page.

And because it’s a standalone video, it’s an explanation of your design ideas that’s completely portable

and that anybody, anytime can call up and look at.

I also really like using video prototypes as a spec for a development team

where you can say “any interface that accomplishes this goal is a good interface.”

And these videos can make the interface design decisions come alive

a lot more than a written long-word documentation.

And finally, video prototypes force you to tie all of your interface design decisions to actual user tasks.

This helps you align, orient, and prioritize your interface choices.

And it makes sure you have a complete interface:

Do you have all of the elements that somebody would need to accomplish the task that they’d like to?

and also that there’s nothing extra?

In the development process it’s really easy to find

all sorts of bells and whistles and shiny things that you want to be able to add into the system.

And if it ultimately doesn’t help people accomplish goals,

a video prototype can be a great way to remind yourself that maybe it’s best to leave it out.

You can use video prototyping throughout your design lifecycle.

Really early on, when you’re first just starting to think around ideas,

you can use video prototypes as a brainstorming aid, and these can take just a few minutes.

You can take paper prototypes that you’ve built and, in an hour or two, put together a video really quickly.

Or, if you have a design idea

that you really need to get a lot of support behind from a large organization

to sell something to management or investors,

you can make a really slick video prototype as a way of selling and explaining your ideas.

A great example of this is Apple’s Knowledge Navigator, which, 20 years ago,

introduced a number of ideas for a vision of a future smarter, more adaptive user interface.

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

a lot of my favorite uses of video prototypes comes early in the design process,

where you’re using video as a way of communicating to the design team and debating design ideas.

And in a lot of cases, you’ll use your paper prototypes

as the interface that the video prototype is elaborating on.

Here’s a great example of that that Lisa Seaman made

when she was working on a smart energy-monitoring system at Stanford.

(Abby Dinkenspiel is an economics professor at Stanford.

She cares about her energy usage, but it’s not to the extent of her actions.

She receives a monthly energy bill,

but there’s little information about which activities or devices consume the most energy.

She wants to be able to identify problem spots and correct them as best as possible.

Using her home monitoring system, Abby’s able to see how much electricity each of her appliances is using.

Starting in the kitchen, she’s able to compare the usage of each of her appliances to the national average.

She’s also able to look at the other rooms of the house, check her progress statistics,

and talk to her energy-saving buddy.

Through the console, she is able to look at other rooms in her house.

The house schematic shows where each of her appliances is located.

She is also able to individually target rooms like the library, bathroom, bedroom and living room

to see how much energy she is using in each.

She’s able to select one — such as the bathroom — and control the devices.

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

Abby is also able to check her home monitoring system remotely while she is in the office.

She can go to a personal website and access device info,

check her progress, and chat with her energy saving buddy.

She’s also able to control her devices via a smartphone

in case she happens to leave the lights on or the air conditioning.

With access to neighborhood consumption patterns,

consumers can accurately compare their energy consumption to their neighbors.

Neighborhoods can band together in the fight to reduce their collective carbon footprint.

Another energy-saving tool is the buddy system,

where you enlist a friend, colleague, or online friend to save energy together.

This is a good way to check progress and motivate each other in a positive yet competitive way.

Stanford University / Initiative for a Sustainable Future)

So what do you put in a video prototype?

Like a storyboard, you’ll want to make sure that the video prototype shows the entire task,

including the upfront motivation, and the success outcome at the end.

Establishing shots and narrative at the beginning can really help with this.

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

That introduces the task: She needs to head somewhere, and Walkabout is reminding her to walk.

Video prototypes are also a great time for you to take what you learned in the field and put it to use.

Draw on the tasks that you observed and elaborate on them when making your prototype.

When you think about the task that you want your system to perform especially well,

those are things that you should showcase in the video prototype.

And in this way a video prototype is a great way

of figuring out what your minimal viable product is for something you’ll want to release —

In the video, in the minimum viable product;

Not in the video, doesn’t need to be in the first round.

As you can see in making these prototypes, you’re making important and consequential design decisions.

And in this way — making and viewing these prototypes —

changes what the design teams argue about and I think do so in a really good way.

Alright, you’re on board and ready to go.

How do you do it?

Well the first thing to do, like anything, start with an outline.

Plan out your shots, what the video prototype is going to show and how the tasks will accomplish that.

You can use the storyboards that you’d made to help you do that; those will be really valuable here.

It’s also fine to extemporize.

Turn on the camera. Make up a bunch of stuff. See what happens.

Don’t worry about a fancy camera: It doesn’t matter; It’s not that important.

And in fact, fancy gadgets can often be a distraction here,

because it’s easy to spend a lot of time on the production side of things.

If you, or anyone you know, has a a camera phone,

you’ve got the equipment that you need probably to make a video prototype.

The other main ingredients you’ll need of course are people:

Get your friends to be actors or you can be actors yourself.

Great way to build to build empathy with the people that’ll use your system.

And you’ll need a real location.

Its fun to shoot these out in the world, or wherever you think people will be using your system.

And I can’t emphasize enough how the goal of a video prototype

is really about the message and story that you’re trying to get across, and not about high production values,

because it really is easy to spend far too long on that.

When planning your prototype, think about a couple of things:

One of the most important ones is:

Are you going to make it with audio, or make it silent movie style?

A big advantage of having it be silent movie style, is that audio can just be a pain to deal with.

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

And you can also use things like Post-It notes to communicate stuff about your users —

so, give people a name tag that has their name, or role,

or something that the audience ought to know about what they care about.

As we talked about, the interface can be anything you want —

You can make a paper prototype, or digital mockups; or, if you have code, go with that;

or the interface can even be invisible.

So for example, if I was going to build a presentation tool interface,

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

and I really like that as a strategy

because it absolutely emphasizes what the person using the system can accomplish.

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

And finally, if I can give you one tip

that will make this a whole lot more fun and save you a whole lot more time:

Edit as little as possible because editing is hugely time-consuming.

My TA for this class, Robbie, knows that far too well.

If you can, do the whole thing in one take, and if that’s not reasonable,

just use the pause button in your camera to be able to do your in-camera editing,

and you’re off and running.

For more information, see Wendy Mackay’s material.

She’s done a lot of work on video prototyping over the years and has a lot of great suggestions.

I’d also like to thank her because a lot of the stuff that I shared with you today

is based on her teaching of this stuff over the years.

Have fun!