Welcome back. With this lecture we begin talking about prototyping, the process of actually putting together an interactive application from the prototype of prior work that the designer has collected, and in order to understand the design problem and understand what kind of solution might be effective for the target users. So, an interaction design prototype is a representation of a design made before the final solution exists. This is the quote from Bill Moggridge. But really the piece to pay attention to here is that a prototype is really a plan for the solution before any kind of system is coded up in software. So the question is, why would you actually want to prototype? Why not as soon as the designer has a good sense of what needs to be created, just start programming? The reason for that is two-fold. One is you often don't know how exactly the system should work. A lot of the ideas that we have for how the system should work when we begin a project, even after extensive formative work, is still not detailed enough to be able to provide the level of granularity that is needed to program an effective system. At the same time, engineering and software development are both expensive and time consuming. It is never fun to program something up, spend a lot of resources and time developing an application, just to find out that that application is not actually meeting the needs of the end-users. Prototyping allows a designer to avoid both of these problems by creating a detailed plan of how the system should work in advance before anything is programmed. The designer is able to get feedback on that plan, to refine it over time and only send it to the engineers for development once the details of how the system should be worked can be fully worked out. So prototyping is really intended to help the designer get feedback about the overall concept for the solution that they're trying to develop, the functionality of different components of the system for the various user interaction, layouts as well as at the end of the process the fine-grain design details like fonts and colors. Each prototype then should be seen as a representation that is intended to help a designer answer one or more questions, that allow the designer to make decisions that are needed to move the design process forward. So, really prototypes are processor presentations that are allowing the designer to find answers on things that the designer is uncertain about in order to be able to progress with the design process. The multiple types of prototypes that are created in the course of an interaction design process, some of these which you've already seen. Storyboards can act as prototypes and in their role as visual stories about what the technology concept is and how it is used. Sketches are probably the single simplest type of prototype as they allow a designer to do visual ideation around different approaches and come up with different concepts for the solution. Wireframes are visual representations of individual screens of a system and are probably the single most common type of a prototype that a UX designer creates. Finally, there are different kinds of interactive prototypes that capture multiple states of a design and transitions among them, so that the designer can get feedback about how those transitions are working for the end users. So let's look at these in more detail, a storyboard can act both as a representation of the formative work as well as a prototype. In the sense that it allows the designer to get some feedback about the concept for the application that the designer is creating, as well as feedback on the various contexts and environment in which that application is going to be used. Like sketches, storyboards are easy to create,they're quick to make and they allow the designer to get feedback on their concepts relatively early in the design process. Sketches are another type of prototype that can be used to get early feedback on design concepts and individual chunks of functionality that the designer is intending to include in the system. In this case, what you see on the screen is a sketch of a particular part of the next version of Heart Steps that we have been working on that we're calling a good morning message, that provides users with a set of useful information every morning when they first wake up. This was something that was jotted out in just a few seconds, but that allow us to actually consider whether this is a good idea for including in the intervention. Wireframes allow designers to get feedback on their layouts on the individual screens of the application, as well as on the information that is being presented on those screens. At their simplest form like the ones that you see on the screen here, wireframes are relatively low fidelity. So they do not include many of the aspects that you see in a more polished type of prototype like colors or spacing that has been worked out. They're really there just to allow the designer to get feedback about what exactly are the pieces of information that need to be on each screen and how those pieces of information might be laid out. Finally, interactive prototypes. Take wireframes and combine them with various kinds of transition that allow the designer to have something that starts acting like a functional application, so that designers can get feedback on those transitions. They can get feedback on the flow through the application or whether the user knows in what state that they're in, how to go back, how to cancel an operation and all of the various activities that a user performs within the application, can then be more thoroughly tested in something that is more fully interactive and allows the user to progress through the various activities that the application is intended to support. Another key concept to think about is the notion of prototype fidelity. This really has to do with how detailed and how worked out the details within the prototype are. What you see on the screen here are two versions of the same general concept, the good morning message that we were discussing just a few seconds ago. On the left side is an early sketch of what that component was going to look like and on the right side is a more polished wireframe. One of the things that you will note is that the level of detail but also the level of polish is very different between these two images. What that means is that the kind of feedback we can get on these is going to be very different as well. This is really important to understand. Low-fidelity prototypes are things like the sketch on the left, are really good at getting end users to provide feedback about the concept itself. Is this even a good idea? Is this something on which the designers should be spending more time? Something that looks as polished as the thing on the right, on the other hand, creates a state of mind in the end users who are looking at this that this is something that's already decided on. That the designer has already made a lot of decisions that have already committed to a particular line of how the design is going to function, and that the end user is supposed to be giving feedback about finer level details. Things like the font is large enough, is the color scheme attractive and really sort of playing at the margins of the design versus really commenting on the concept as a whole. Because once something seems like it's set in stone and the fidelity of this particular prototype provides that information to users, it becomes much harder to get feedback on the overall concept versus this fine level details of the design. To reiterate, prototyping maximizes the number of times that the designer can revise and refine the design before the design is committed to code. It allows the designer to get feedback early, as soon as some of the concepts for the solution that's being designed are ready, and then to continue getting feedback as the solution evolves and the designer becomes more confident in how the product is supposed to work. By doing that, the solutions that the designer is able to come up with become much more robust since they have been thoroughly tested before a single line of code is written. This is really what makes prototyping such an important and such an effective part of the design practice. Starting next week, we will look at the process of prototyping in more detail. Thanks for watching and see you next time.
