WEBVTT 00:00:00.702 --> 00:00:04.871 In my opinion, the single most important idea that you could get out of this class 00:00:04.871 --> 00:00:10.424 is the idea that prototyping is a tremendously valuable strategy for effective design. 00:00:10.424 --> 00:00:15.239 In this video, I’ll introduce what I mean by prototyping and why I think it is so tremendously important. 00:00:15.239 --> 00:00:20.262 This is going to serve as a framing for later videos that we’ll use to introduce concrete techniques. 00:00:21.355 --> 00:00:24.556 In this class, when we talk about prototyping, what we mean is 00:00:24.556 --> 00:00:29.857 rapidly creating an approximation of a design idea so that you can quickly get feedback and learn. 00:00:29.857 --> 00:00:35.241 Prototyping is the pivotal activity in structured innovation, collaboration and creativity in design. 00:00:35.241 --> 00:00:39.020 Prototypes embody design hypotheses and enable designers to get feedback. 00:00:39.020 --> 00:00:42.731 It’s what Donald Schon calls “a reflective conversation with materials”. 00:00:42.731 --> 00:00:48.023 By trying things out and learning — from that exploration — you are able to improve your design 00:00:48.023 --> 00:00:52.144 and be able to gain insights that you otherwise may not have. 00:00:52.144 --> 00:00:57.081 It’s important to remember that the goal in prototyping is not the artefact; it’s feedback: 00:00:57.081 --> 00:01:02.048 Build some prototypes, try them out, and usually you’d learn to try to in the next design. 00:01:02.048 --> 00:01:06.048 One way to think about a prototype is that it’s a question rendered as an artefact. 00:01:06.048 --> 00:01:11.246 It’s something that you make as a way of communicating with other stakeholders: 00:01:11.246 --> 00:01:15.706 These can be clients. These can be other people on your design team. 00:01:15.706 --> 00:01:19.864 These can be users in an interactive system. They can even be yourself. 00:01:19.864 --> 00:01:25.162 And the role of the prototype in this communication is it serves as a common ground 00:01:25.162 --> 00:01:29.715 to help people understand really concretely what everybody is talking about. 00:01:29.731 --> 00:01:33.897 Here’s an example of what I mean by a prototype, courtesy of the design firm IDEO: 00:01:33.897 --> 00:01:41.158 In the mid-90’s, Kodak approached IDEO, asking them to help design an early consumer digital camera. 00:01:41.158 --> 00:01:44.190 Digital cameras were a very interesting technology, 00:01:44.190 --> 00:01:49.623 because they offered new opportunities for being able to review and edit your photos on the camera 00:01:49.623 --> 00:01:51.658 that wasn’t possible with the film camera. 00:01:51.658 --> 00:01:57.251 IDEO was tasked with a way to make sense of possible interactions that you could do on a digital camera 00:01:57.251 --> 00:02:01.146 and to render those on a concrete user interface. 00:02:01.146 --> 00:02:06.684 What they came up with ultimately became this: the Kodak DC-210 digital camera. 00:02:06.684 --> 00:02:09.265 Here’s the user interface on the back: 00:02:09.265 --> 00:02:13.344 There’s a screen and several buttons for being able to naigate through the photographs. 00:02:13.344 --> 00:02:18.953 It also has a dial here for several modes, and a zoom controller right here. 00:02:18.953 --> 00:02:21.574 Now let’s look at the prototype on the screen: 00:02:21.574 --> 00:02:25.140 You’ll probably notice some similarities but also some differences. 00:02:25.140 --> 00:02:29.684 The prototype on the screen and the final product both have buttons. 00:02:29.684 --> 00:02:34.187 They have a screen. They are of similar functionalities in this case. 00:02:34.187 --> 00:02:39.938 However, there’re also some important differences between this prototype and this final version. 00:02:39.938 --> 00:02:41.888 The first one is that the prototype is a lot bigger: 00:02:41.888 --> 00:02:45.978 In order to be able to build a version quickly, they couldn’t make everything miniturized. 00:02:45.978 --> 00:02:51.503 So it takes more a lot more physical space; the layout is similar but the scale has changed. 00:02:51.503 --> 00:02:56.513 Second, one of the most important things about a digital camera is that you be able to take it with you as it is mobile; 00:02:57.682 --> 00:03:01.431 This prototype camera here had an umbilical cord going back to a Macintosh 00:03:01.431 --> 00:03:04.578 that actually ran all of the computations and interactions, 00:03:04.593 --> 00:03:07.737 so there were no computation on the device itself. 00:03:07.737 --> 00:03:12.629 And finally, this was a prototype of a digital camera where you couldn’t take pictures. 00:03:12.629 --> 00:03:16.477 There’s no lens; there’s no photographic elements in this prototype; 00:03:16.477 --> 00:03:23.034 it’s purely a way to understand better the back of camera interactions for reviewing and editing photos. 00:03:23.034 --> 00:03:26.008 And I think this is a really important point about prototypes: 00:03:26.008 --> 00:03:31.714 It’s that prototypes nearly always are and ought to be incomplete. 00:03:32.822 --> 00:03:35.048 To pop back up from that example: 00:03:35.048 --> 00:03:40.123 Prototyping is a strategy for efficiently dealing with things that are hard to predict. 00:03:40.123 --> 00:03:43.145 And these hard-to-predict things are both 00:03:43.145 --> 00:03:49.072 things that you wonder whether there’ll be an issue but don’t know what the answers’s going to be — your “known unknowns — 00:03:49.072 --> 00:03:54.866 and the things that you don’t know, that you never got to think about — those are your “unknown unknowns”. 00:03:54.866 --> 00:03:58.828 And what’s valuable about prototyping is it helps you to get feedback quickly, 00:03:58.828 --> 00:04:01.846 so you don’t spend time heading down the wrong path. 00:04:01.846 --> 00:04:06.898 If you’ve ever taken an art class, you’ll know the experience of sketching before you make a painting. 00:04:06.898 --> 00:04:09.935 It’s not just for novices: Picasso did the same thing. 00:04:09.935 --> 00:04:14.655 One of the things that we know about human psychology is that 00:04:14.655 --> 00:04:18.308 people are notoriously bad at being able to estimate the space of possible outcomes. 00:04:18.308 --> 00:04:22.571 We often consider far fewer options than are actually likely to happen. 00:04:22.571 --> 00:04:26.595 And this is just as true in the financial world as it is in the creative world. 00:04:26.595 --> 00:04:32.364 For any complex system, whether it is finance or design, the interactions of all these ingredients 00:04:32.364 --> 00:04:38.379 far dominate the things that you can easily predict, and consequently our intuitions are often wrong. 00:04:38.949 --> 00:04:42.414 The strategy that we are going to teach you in this class is to encourage you to focus on 00:04:42.414 --> 00:04:47.390 the goals of the design rather than to think about a particular design itself 00:04:47.390 --> 00:04:50.904 and trying to railroad that strategy forward. 00:04:50.904 --> 00:04:54.243 A classic novice error is to come up with one idea for a design: 00:04:54.243 --> 00:04:59.531 You think you’ve got something that’s super cool and just keep arguing for that particular option. 00:04:59.531 --> 00:05:02.801 Instead of having that concrete thing you want to argue for, 00:05:02.801 --> 00:05:07.508 think about what you hope to achieve with that design idea — what’s your goal there. 00:05:08.385 --> 00:05:14.637 In this class we’re going to teach how to set goals early and evolve them and revise your design using data. 00:05:14.637 --> 00:05:19.112 As Bill Buxton points out in his excellent book « Sketching User Interfaces », 00:05:19.112 --> 00:05:23.287 the kinds of alternatives that you’re going to consider at different points of the design process 00:05:23.287 --> 00:05:25.151 are going to be different. 00:05:25.151 --> 00:05:30.006 Early on, you may be thinking about a really broad range of possibilities. 00:05:30.713 --> 00:05:33.772 And then you might narrow in for a little while. 00:05:33.772 --> 00:05:36.606 Then you might consider some alternatives and narrow in. 00:05:36.606 --> 00:05:41.991 And this alternating flair and focus is a hallmark of an effective design process. 00:05:41.991 --> 00:05:45.492 Later on in the design, as you get toward the final product, 00:05:45.492 --> 00:05:51.141 you’re going to be thinking about small variations like fonts or colours or micro changes in layout. 00:05:51.141 --> 00:05:54.530 Early on you might be thinking about much broader ideas like: 00:05:54.530 --> 00:05:57.822 Is this going to be a mobile service or a desktop service? 00:05:57.822 --> 00:06:01.168 And what kind of thing is this going to be anyhow? 00:06:01.168 --> 00:06:08.140 Recognizing the need for and value of this oscillation can help you prepare for an effective design process. 00:06:08.140 --> 00:06:13.351 The Palm Pilot’s design process provides us with a wonderful example of prototyping. 00:06:13.351 --> 00:06:18.714 The Palm Pilot was one of the first digital PDA’s — personal digital assistants — 00:06:18.714 --> 00:06:24.044 and it helped you handle your to-do lists, and calendar, and contact information and notes. 00:06:25.137 --> 00:06:30.564 Its lead inventor was Jeff Hawkins; and Jeff, when he first envisioned the Palm Pilot, 00:06:30.564 --> 00:06:37.111 one of the first things that he did was create a block of wood that was the size of the device that he envisioned. 00:06:37.111 --> 00:06:42.678 And what he would do is carry this block of wood around with him and he would use it as if it were a real device: 00:06:42.678 --> 00:06:48.470 So he would tap on it and enter information, add contacts, record things in his calendar, 00:06:48.470 --> 00:06:53.222 take notes, furiously scribbling the whole time. 00:06:53.222 --> 00:06:56.584 So what did Jeff and his team learn from this prototype? 00:06:56.584 --> 00:07:01.870 Well, they obviously didn’t learn anything about the silicone or the battery life or anything of the Palm Pilot 00:07:01.870 --> 00:07:04.038 because the whole thing was made out of wood! 00:07:04.038 --> 00:07:08.113 What they learned was about the form factor, and what we can see here 00:07:08.113 --> 00:07:14.194 is that this was a great example of the rights and roles that a prototype can play in the design process. 00:07:14.194 --> 00:07:20.106 A prototype should not be required to be complete; it’s going to be incomplete in strategic and important ways. 00:07:20.506 --> 00:07:26.266 It should be easy to change — Don’t like the size of your Palm Pilot? Just cut it off a different size! 00:07:26.866 --> 00:07:28.682 And finally, it should get to retire: 00:07:28.682 --> 00:07:34.708 That, when you move on to a later phase in the design process, you no longer need the early prototypes. 00:07:35.324 --> 00:07:39.807 Given that we are in a class about designing computer systems and we’re talking about a block of wood, 00:07:39.807 --> 00:07:46.288 you might reasonably ask, “What’s going on here?” or maybe, “What is it that prototypes prototype?” 00:07:46.288 --> 00:07:50.525 And the answer is that there are several things that a prototype can prototype. 00:07:50.525 --> 00:07:56.268 One kind of prototype prototypes the feel — “What does this look like?” 00:07:56.268 --> 00:08:01.397 Another kind prototypes the implementation — “What might this work like?” 00:08:01.397 --> 00:08:05.016 And yet another kind of prototype prototypes the role — 00:08:05.016 --> 00:08:08.635 “What might the experience of using this interactive system be like?” 00:08:08.635 --> 00:08:12.966 This course will teach you a number of strategies that cover a bit of each of these categories. 00:08:12.966 --> 00:08:15.604 You can plot a prototype in two dimensions. 00:08:15.604 --> 00:08:18.645 You can think about how much you’ll learn from that prototype, 00:08:18.645 --> 00:08:21.388 and you can think about how long it took you to create it. 00:08:21.388 --> 00:08:24.466 And what you want to able to do, especially early on in the design process, 00:08:24.466 --> 00:08:28.638 is to be able to maximize the amount of learning that you are being able to get from that prototype, 00:08:28.638 --> 00:08:31.719 and minimize the amount of time that it is going to take you to create it, 00:08:32.380 --> 00:08:35.665 because — remember — a prototype is going to be incomplete, 00:08:35.665 --> 00:08:39.488 and it’s going to be something that you are going to get rid of most likely at some point in the process, 00:08:39.488 --> 00:08:44.240 and so there’s no point in sinking a lot of time into something that you’re soon going to throw away. 00:08:45.886 --> 00:08:50.473 Prototyping is not just for small things. In your prototyping you can think big — really big. 00:08:50.473 --> 00:08:54.155 Here’s an example from Walter Dorwin Teague, this guy right here. 00:08:54.770 --> 00:08:58.340 He is one of America’s foremost industrial designers. 00:08:58.340 --> 00:09:03.371 And he is standing inside of one of the very first Boeing cross-country airplanes. 00:09:03.371 --> 00:09:09.597 And what he’s doing is taking a look at the interior design that his company did for Boeing, 00:09:09.597 --> 00:09:12.910 (and they still work with Boeing to this day). 00:09:12.910 --> 00:09:17.747 What’s notable here is that you’ve got an interior of an aircraft, but there’s no aircraft! 00:09:17.747 --> 00:09:25.172 This is all mocked up in a warehouse. It’s the experience of an airplane without the airplane. 00:09:25.172 --> 00:09:30.878 In creating this prototype, they brought in a number of users, and had people come on with luggage 00:09:30.878 --> 00:09:36.898 and try out the experience of the airplane, where they would sit down, take their seats for the length 00:09:36.898 --> 00:09:42.127 of a cross-country flight, and flight attendants would come through to offer them food and other amenities, 00:09:42.127 --> 00:09:45.159 and you could see things like “Are the aisles wide enough?”, 00:09:45.159 --> 00:09:50.669 “Are the seats comfortable?”, “Will the luggage racks carry the luggage that’s necessary?” 00:09:50.669 --> 00:09:55.423 Walter Teague wasn’t the only industrial designer to be able to use these large prototypes of scale. 00:09:55.423 --> 00:10:00.793 Many of the designers creating ocean-going vessels tried the same strategy 00:10:00.793 --> 00:10:07.613 of prototyping interiors in warehouses, and in fact as Walter Isaacson’s biography of Steve Jobs reports, 00:10:07.613 --> 00:10:13.345 when Apple was creating its first retail stores, they got some warehouse space outside of San Jose, 00:10:13.345 --> 00:10:19.909 and every week went to a fake retail store to try out the retail experience in advance of first opening, 00:10:19.909 --> 00:10:25.672 and one of the things that that biography reports about the retail experience at Apple was, 00:10:25.672 --> 00:10:32.028 by the virtue of prototyping it and trying out different configurations of the store, the Apple team realized 00:10:32.028 --> 00:10:39.290 that the stores can be configured around activities — such as music — rather than around individual products, 00:10:39.290 --> 00:10:43.823 and this significantly changed the layout of the Apple Stores prior to their opening. 00:10:44.700 --> 00:10:48.679 Linus Pauling may be the premier chemist in the 20th century. 00:10:48.679 --> 00:10:53.138 He was awarded the Nobel Prize for his work on describing the nature of chemical bonds. 00:10:53.138 --> 00:10:56.900 What his work philosophy shares with that of professional designers 00:10:56.900 --> 00:11:02.714 is the practice of trying out multiple alternative ideas, approaches, and solution strategies. 00:11:02.714 --> 00:11:06.808 As he says here, “The best way to have a good idea is to have a lot of ideas.” 00:11:07.223 --> 00:11:12.670 And we see that here in a hundred different prototypes that the design firm IDEO produced for Microsoft 00:11:12.670 --> 00:11:15.495 when it was creating its first mouse. 00:11:15.495 --> 00:11:21.051 There are a number of form alternatives that it explored — symmetric versus assymetric designs, 00:11:21.051 --> 00:11:25.241 ones that emphasize ergonomics versus others that emphasize style — 00:11:25.241 --> 00:11:29.165 and being able to see all of these alternatives and hold them in one’s hand 00:11:29.165 --> 00:11:33.852 helped Microsoft figure out which design was the best fit for it to release the mouse with. 00:11:34.498 --> 00:11:39.910 For the geeks in the audience: You can think about this kind of rapid prototyping strategy that we’re talking about 00:11:39.910 --> 00:11:45.185 as being kind of like simulated annealing, where you have a space of possible options, 00:11:48.078 --> 00:11:53.687 some of them better than the others, and what often happens with serial iterative deisgn 00:11:53.687 --> 00:11:56.802 is that you can hillclimb to the best one. 00:11:56.802 --> 00:11:58.906 But local improvement isn’t enough: 00:11:58.906 --> 00:12:04.384 You need to be able to hop around the design space and try wildly different alternatives. 00:12:04.384 --> 00:12:07.323 That way you can find the global maximum. 00:12:07.323 --> 00:12:12.546 When you’re creating a prototyping strategy, it’s important to think about the cost of change over time. 00:12:12.546 --> 00:12:18.816 For physical products —— like a car, a toaster —, the cost of making changes rises dramatically over time 00:12:18.816 --> 00:12:23.393 throughout the design process, and even more significantly upon release. 00:12:24.655 --> 00:12:30.317 With desktop software that gets distributed on, say, a CDROM, the cost rises aren’t quite so dramatic, 00:12:30.317 --> 00:12:35.654 but it’s still pretty significant, harder to make changes as you go throughout the design process, 00:12:35.654 --> 00:12:39.091 and much more difficult once you’ve shipped it out to consumers. 00:12:41.798 --> 00:12:47.328 Web sites, and other forms of software as a service, make it much easier to make changes over time. 00:12:49.913 --> 00:12:55.269 But the costs and difficulty of making changes is still increasing for a number of reasons. 00:12:55.269 --> 00:13:00.631 One of the most important is that people get used to a particular piece of software over time. 00:13:00.631 --> 00:13:05.724 And so even if you could change it easily, you’d upset and confuse a significant user base. 00:13:05.724 --> 00:13:11.724 The same is true for developers [of] any software that has API’s that people are writing applications on top of. 00:13:11.724 --> 00:13:16.665 Once people get used to it, or have built things that rely on a piece of software, 00:13:16.665 --> 00:13:19.190 it becomes more difficult to change. 00:13:19.190 --> 00:13:22.507 Altogether, what this means is that you want to create a design process 00:13:22.507 --> 00:13:25.431 where you’re making your biggest changes early, 00:13:27.431 --> 00:13:31.411 and as you build momentum with users, you’re continuing to refine, 00:13:31.411 --> 00:13:34.777 and adapt, and tweak, and improve your system as it goes on. 00:13:36.792 --> 00:13:41.071 I think I can sum up the introductory message of this framing video in one sentence: 00:13:41.071 --> 00:13:47.186 It’s that “prototypes are questions; ask lots of them.” 00:13:47.186 --> 00:13:50.555 We’ll see you next time.