WEBVTT 00:00:01.011 --> 00:00:03.915 One of the most important elements of human-centered design 00:00:03.915 --> 00:00:07.129 is making sure that all the different design choices you make — 00:00:07.129 --> 00:00:11.049 what functionality is available and what interface elements, information architecture, 00:00:11.049 --> 00:00:14.203 and visual design [that] present that functionality 00:00:14.203 --> 00:00:20.899 harmoniously combine to fluidly support the activities that matter to people that are using your system. 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, 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. 00:00:32.714 --> 00:00:34.356 Achieving this harmony can be difficult 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. 00:00:40.322 --> 00:00:43.716 One of the best ways of ensuring that a coherent, human-centered vision 00:00:43.716 --> 00:00:47.110 drives your design and your design team 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. 00:00:52.254 --> 00:00:55.087 It’s also a lot of fun. 00:00:55.087 --> 00:00:58.021 To give you a sense of what I mean by this, 00:00:58.021 --> 00:01:03.378 I’d like to show you a video prototype that the walkabout team created at Stanford. 00:01:04.517 --> 00:01:05.952 (It’s time to go! 00:01:05.952 --> 00:01:12.251 With the click of a button, Carissa sets Walkabout in motion on her iPhone. 00:01:12.251 --> 00:01:15.283 She doesn’t have a lot of time for exercise in her day, 00:01:15.283 --> 00:01:19.189 but she likes to stay healthy by walking to and from her destinations. 00:01:19.189 --> 00:01:21.446 She’s got a couple of minutes before the bus comes, 00:01:21.446 --> 00:01:24.953 so she sits down to check her Walkabout progress. 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. 00:01:30.729 --> 00:01:35.055 Carissa is taking a personal journey up Mount Everest. 00:01:35.055 --> 00:01:38.336 She’s at 28,000 feet, about to reach the Hillary Step, 00:01:38.336 --> 00:01:41.876 and she decides to take a look around. 00:01:41.876 --> 00:01:44.896 Ryan’s feeling competitive. 00:01:44.896 --> 00:01:49.986 He pulls up Walkabout and challenges his friend Brendon to a walk-off: 00:01:49.986 --> 00:01:54.628 Whoever gets the most steps by the end of the day wins. 00:01:54.628 --> 00:01:59.929 Brendon decides he’s ready to accept the challenge. 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. 00:02:06.217 --> 00:02:10.341 He checks his Walkabout competition and sees that Ryan is in the lead. 00:02:10.680 --> 00:02:13.680 Brendon heads up the stairs. 00:02:13.680 --> 00:02:17.154 Should Ryan take the long way to work, or the short way? 00:02:17.154 --> 00:02:21.535 With more at stake than there used to be, he sets off. 00:02:21.535 --> 00:02:26.977 Carissa checks her phone: She’s been invited to a step-off for Obama. 00:02:26.977 --> 00:02:30.577 She’s happy to track her steps for a good cause. 00:02:30.577 --> 00:02:36.005 Ryan’s also been invited to the step-off; he decides to join too. 00:02:36.005 --> 00:02:40.059 Everyone’s steps are accumulated cooperatively. 00:02:40.059 --> 00:02:43.015 Joining up is a no-brainer for Brendon. 00:02:43.015 --> 00:02:48.466 He decides to post a group Walkabout status on his Facebook page. 00:02:48.466 --> 00:02:53.865 Walkabout: Small steps can lead to big change and big fun! 00:02:55.588 --> 00:02:57.535 Walkabout / an iPhone application by: / Carissa Carter / Ryan Mason / Brendon Wypich) 00:03:00.705 --> 00:03:05.500 Video prototypes offer four really important benefits for your design process. 00:03:05.500 --> 00:03:09.821 First, they can be really cheap and fast to make. 00:03:09.821 --> 00:03:12.962 Second, they serve as great communication tools. 00:03:12.962 --> 00:03:16.804 Among other things, it’s a wonderful way of showing the context of use, 00:03:16.804 --> 00:03:20.637 so that your entire design team can get on that same page. 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 00:03:26.902 --> 00:03:30.819 and that anybody, anytime can call up and look at. 00:03:31.881 --> 00:03:35.149 I also really like using video prototypes as a spec for a development team 00:03:35.149 --> 00:03:39.656 where you can say “any interface that accomplishes this goal is a good interface.” 00:03:39.656 --> 00:03:43.159 And these videos can make the interface design decisions come alive 00:03:43.159 --> 00:03:47.399 a lot more than a written long-word documentation. 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. 00:03:54.533 --> 00:03:58.499 This helps you align, orient, and prioritize your interface choices. 00:03:58.499 --> 00:04:00.562 And it makes sure you have a complete interface: 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? 00:04:05.830 --> 00:04:07.861 and also that there’s nothing extra? 00:04:07.861 --> 00:04:10.198 In the development process it’s really easy to find 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. 00:04:14.829 --> 00:04:17.541 And if it ultimately doesn’t help people accomplish goals, 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. 00:04:23.703 --> 00:04:27.697 You can use video prototyping throughout your design lifecycle. 00:04:27.697 --> 00:04:31.125 Really early on, when you’re first just starting to think around ideas, 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. 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. 00:04:43.311 --> 00:04:45.038 Or, if you have a design idea 00:04:45.038 --> 00:04:49.344 that you really need to get a lot of support behind from a large organization 00:04:49.344 --> 00:04:51.752 to sell something to management or investors, 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. 00:04:57.881 --> 00:05:01.635 A great example of this is Apple’s Knowledge Navigator, which, 20 years ago, 00:05:01.635 --> 00:05:08.054 introduced a number of ideas for a vision of a future smarter, more adaptive user interface. 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, 00:05:13.273 --> 00:05:17.246 a lot of my favorite uses of video prototypes comes early in the design process, 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. 00:05:22.510 --> 00:05:25.494 And in a lot of cases, you’ll use your paper prototypes 00:05:25.494 --> 00:05:29.616 as the interface that the video prototype is elaborating on. 00:05:29.616 --> 00:05:32.055 Here’s a great example of that that Lisa Seaman made 00:05:32.066 --> 00:05:35.924 when she was working on a smart energy-monitoring system at Stanford. 00:05:37.416 --> 00:05:41.346 (Abby Dinkenspiel is an economics professor at Stanford. 00:05:41.346 --> 00:05:45.016 She cares about her energy usage, but it’s not to the extent of her actions. 00:05:45.016 --> 00:05:47.049 She receives a monthly energy bill, 00:05:47.049 --> 00:05:51.374 but there’s little information about which activities or devices consume the most energy. 00:05:51.374 --> 00:05:56.297 She wants to be able to identify problem spots and correct them as best as possible. 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. 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. 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, 00:06:16.223 --> 00:06:20.373 and talk to her energy-saving buddy. 00:06:23.989 --> 00:06:27.362 Through the console, she is able to look at other rooms in her house. 00:06:27.362 --> 00:06:30.672 The house schematic shows where each of her appliances is located. 00:06:30.672 --> 00:06:35.619 She is also able to individually target rooms like the library, bathroom, bedroom and living room 00:06:35.619 --> 00:06:38.513 to see how much energy she is using in each. 00:06:38.513 --> 00:06:42.316 She’s able to select one — such as the bathroom — and control the devices. 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. 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. 00:06:51.721 --> 00:06:54.388 She can go to a personal website and access device info, 00:06:54.388 --> 00:06:57.547 check her progress, and chat with her energy saving buddy. 00:06:57.547 --> 00:07:01.516 She’s also able to control her devices via a smartphone 00:07:01.516 --> 00:07:05.898 in case she happens to leave the lights on or the air conditioning. 00:07:06.160 --> 00:07:08.551 With access to neighborhood consumption patterns, 00:07:08.551 --> 00:07:12.421 consumers can accurately compare their energy consumption to their neighbors. 00:07:12.421 --> 00:07:17.992 Neighborhoods can band together in the fight to reduce their collective carbon footprint. 00:07:18.838 --> 00:07:21.126 Another energy-saving tool is the buddy system, 00:07:21.126 --> 00:07:24.839 where you enlist a friend, colleague, or online friend to save energy together. 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. 00:07:31.062 --> 00:07:36.123 Stanford University / Initiative for a Sustainable Future) 00:07:37.000 --> 00:07:39.198 So what do you put in a video prototype? 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, 00:07:45.529 --> 00:07:50.042 including the upfront motivation, and the success outcome at the end. 00:07:50.042 --> 00:07:53.381 Establishing shots and narrative at the beginning can really help with this. 00:07:53.381 --> 00:07:58.245 For example, in the Walkabout video, Carissa begins by saying, “it’s time to go.” 00:07:58.245 --> 00:08:03.288 That introduces the task: She needs to head somewhere, and Walkabout is reminding her to walk. 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. 00:08:09.004 --> 00:08:13.722 Draw on the tasks that you observed and elaborate on them when making your prototype. 00:08:13.722 --> 00:08:17.653 When you think about the task that you want your system to perform especially well, 00:08:17.653 --> 00:08:20.986 those are things that you should showcase in the video prototype. 00:08:20.986 --> 00:08:24.159 And in this way a video prototype is a great way 00:08:24.159 --> 00:08:29.796 of figuring out what your minimal viable product is for something you’ll want to release — 00:08:29.796 --> 00:08:32.815 In the video, in the minimum viable product; 00:08:32.815 --> 00:08:35.869 Not in the video, doesn’t need to be in the first round. 00:08:35.869 --> 00:08:40.798 As you can see in making these prototypes, you’re making important and consequential design decisions. 00:08:40.798 --> 00:08:44.093 And in this way — making and viewing these prototypes — 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. 00:08:49.740 --> 00:08:51.795 Alright, you’re on board and ready to go. 00:08:51.795 --> 00:08:53.284 How do you do it? 00:08:53.284 --> 00:08:56.790 Well the first thing to do, like anything, start with an outline. 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. 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. 00:09:06.441 --> 00:09:08.511 It’s also fine to extemporize. 00:09:08.511 --> 00:09:12.931 Turn on the camera. Make up a bunch of stuff. See what happens. 00:09:12.931 --> 00:09:16.867 Don’t worry about a fancy camera: It doesn’t matter; It’s not that important. 00:09:16.867 --> 00:09:20.632 And in fact, fancy gadgets can often be a distraction here, 00:09:20.632 --> 00:09:24.375 because it’s easy to spend a lot of time on the production side of things. 00:09:24.375 --> 00:09:27.638 If you, or anyone you know, has a a camera phone, 00:09:27.638 --> 00:09:32.039 you’ve got the equipment that you need probably to make a video prototype. 00:09:32.039 --> 00:09:34.528 The other main ingredients you’ll need of course are people: 00:09:34.528 --> 00:09:37.594 Get your friends to be actors or you can be actors yourself. 00:09:37.594 --> 00:09:41.052 Great way to build to build empathy with the people that’ll use your system. 00:09:41.052 --> 00:09:42.400 And you’ll need a real location. 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. 00:09:47.703 --> 00:09:51.035 And I can’t emphasize enough how the goal of a video prototype 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, 00:09:56.708 --> 00:10:00.559 because it really is easy to spend far too long on that. 00:10:00.974 --> 00:10:03.596 When planning your prototype, think about a couple of things: 00:10:03.596 --> 00:10:05.790 One of the most important ones is: 00:10:05.790 --> 00:10:10.349 Are you going to make it with audio, or make it silent movie style? 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. 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. 00:10:23.974 --> 00:10:27.737 And you can also use things like Post-It notes to communicate stuff about your users — 00:10:27.737 --> 00:10:31.173 so, give people a name tag that has their name, or role, 00:10:31.173 --> 00:10:34.429 or something that the audience ought to know about what they care about. 00:10:34.429 --> 00:10:36.940 As we talked about, the interface can be anything you want — 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; 00:10:43.068 --> 00:10:45.292 or the interface can even be invisible. 00:10:45.292 --> 00:10:49.355 So for example, if I was going to build a presentation tool interface, 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, 00:10:54.945 --> 00:10:56.773 and I really like that as a strategy 00:10:56.773 --> 00:11:01.823 because it absolutely emphasizes what the person using the system can accomplish. 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?” 00:11:07.590 --> 00:11:09.633 And finally, if I can give you one tip 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: 00:11:13.584 --> 00:11:19.108 Edit as little as possible because editing is hugely time-consuming. 00:11:19.108 --> 00:11:22.316 My TA for this class, Robbie, knows that far too well. 00:11:22.316 --> 00:11:25.626 If you can, do the whole thing in one take, and if that’s not reasonable, 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, 00:11:30.227 --> 00:11:32.035 and you’re off and running. 00:11:32.035 --> 00:11:34.697 For more information, see Wendy Mackay’s material. 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. 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 00:11:42.501 --> 00:11:45.644 is based on her teaching of this stuff over the years. 00:11:45.659 --> 00:11:49.751 Have fun!