Spring 2008 6.831 User Interface Design and Implementation 1Lecture 10: Prototyping UI Hall of Fame or Shame?Fall 2006 6.831 UI Design and Implementation 2 Today’s candidate for the Halls of Fame and Shame is the Windows calculator. It looks and works just like a familiar desk calculator, a stable interface that many people are familiar with. It’s a familiar metaphor, and trivial for calculator users to pick up and use. - Where does it deviate from a real desktop calculator? This interface adheres to its metaphor so carefully that it passes up some tremendous opportunities to improve on the desk calculator interface. Think about: - visibility - learnability (say, for kids who start with this interface, not with a calculator) Today’s Topics• Paper prototypes• Computer prototypes• Wizard of Oz prototypesSpring 2008 6.831 User Interface Design and Implementation 3 Today we’re going to talk about protototyping: producing cheaper, less accurate renditions of your target interface. Prototyping is essential in the early iterations of a spiral design process, and it’s useful in later iterations too.Why Prototype?• Get feedback earlier, cheaper• Experiment with alternatives• Easier to change or throw awaySpring 2008 6.831 User Interface Design and Implementation 4 We build prototypes for several reasons, all of which largely boil down to cost. First, prototypes are much faster to build than finished implementations, so we can evaluate them sooner and get early feedback about the good and bad points of a design. Second, if we have a design decision that is hard to resolve, we can build multiple prototypes embodying the different alternatives of the decision. Third, if we discover problems in the design, a prototype can be changed more easily, for the same reasons it could be built faster. Prototypes are more malleable. Most important, if the design flaws are serious, a prototype can be thrown away. It’s important not to commit strongly to design ideas in the early stages of design. Unfortunately, writing and debugging a lot of code creates a psychological sense of commitment which is hard to break. You don’t want to throw away something you’ve worked hard on, so you’re tempted to keep some of the code around, even if it really should be scrapped. The prototyping techniques we’ll see in this lecture actually force you to throw the prototype away. For example, a paper mockup won’t form any part of a finished software implementation. This is a good mindset to have in early iterations, since it maximizes your creative freedom. Prototype Fidelity• Low fidelity: omits details• High fidelity: more like finished productSpring 2008 6.831 User Interface Design and Implementation 5 An essential property of a prototyping technique is its fidelity, which is simply how similar it is to the finished interface. Low-fidelity prototypes omit details, use cheaper materials, or use different interaction techniques. High-fidelity prototypes are very similar to the finished product.Fidelity is Multidimensional• Breadth: % of features covered– Only enough features for certain tasks• Depth: degree of functionality– Limited choices, canned responses, no error handlingSpring 2008 6.831 User Interface Design and Implementation 6horizontalprototypeverticalprototypescenariofront enddifferent featuresback end Fidelity is not just one-dimensional, however. Prototypes can be low- or high-fidelity in various different ways (Carolyn Snyder, Paper Prototyping, 2003). Breadth refers to the fraction of the feature set represented by the prototype. A prototype that is low-fidelity in breadth might be missing many features, having only enough to accomplish certain specific tasks. A word processor prototype might omit printing and spell-checking, for example. Depth refers to how deeply each feature is actually implemented. Is there a backend behind the prototype that’s actually implementing the feature? Low-fidelity in depth may mean limited choices (e.g., you can’t print double-sided), canned responses (always prints the same text, not what you actually typed), or lack of robustness and error handling (crashes if the printer is offline). A diagrammatic way to visualize breadth and depth is shown (following Nielsen, Usability Engineering, p. 94). A horizontal prototype is all breadth, and little depth; it’s basically a frontend with no backend. A vertical prototype is the converse: one area of the interface is implemented deeply. The question of whether to build a horizontal or vertical prototype depends on what risks you’re trying to mitigate. In user interface design, horizontal prototypes are more common, since they address usability risk. But if some aspect of the application is a risky implementation – you’re not sure if it can be implemented to meet the requirements – then you may want to build a vertical prototype to test that. A special case lies at the intersection of a horizontal and a vertical prototype. A scenario shows how the frontend would look for a single concrete task. Scenarios are great for visualizing a design, but they’re hard to evaluate with users.More Dimensions of Fidelity• Look: appearance, graphic design– Sketchy, hand-drawn• Feel: input method– Pointing & writing feels very different from mouse & keyboardSpring 2008 6.831 User Interface Design and Implementation 7 Two more crucial dimensions of a prototype’s fidelity are, loosely, its look and its feel. Look is the appearance of the prototype. A hand-sketched prototype is low-fidelity in look, compared to a prototype that uses the same widget set as the finished implementation. Feel refers to the physical methods by which the user interacts with the prototype. A user interacts with a paper mockup by pointing at things to represent mouse clicks, and writing on the paper to represent keyboard input. This is a low-fidelity feel for a desktop application (but it may not be far off for a tablet PC application). Paper Prototype• Interactive paper mockup– Sketches of screen appearance– Paper pieces show windows, menus, dialog boxes• Interaction is natural– Pointing with a finger = mouse click– Writing = typing• A person simulates the computer’s operation– Putting down & picking up pieces– Writing responses on the “screen”– Describing effects that are hard to show on paper• Low fidelity in look & feel• High fidelity in
View Full Document
Unlocking...