Chapter 7: PrototypingCopyright © 2004 by Prentice Hall 7. Prototyping In this chapter you will learn about: What prototyping is The benefits of prototyping

Chapter 7: Prototyping Copyright © 2004 by Prentice Hall

7. Prototyping

In this chapter you will learn about:What prototyping isThe benefits of prototypingLow-fidelity and high-fidelity prototypes, and the advantages of eachHow to build paper prototypes


7.2 Why Prototype?Traditional software development: you can’t test until you implementImplementation is expensive, and there is nothing to test until you have made that expenditure of effort and schedule timeResult: any design errors are built in to the first thing you can test, and it is very expensive to make changesResult: design errors, unless they are really bad, are left in the product


Breaking this implementation paradox

Build a prototype of the basic functionality, especially the interfaceTest the prototype, which will uncover design errorsCorrect the errorsRepeat until you have a clean designA major tool for improving usabilityHeavily used in industry


The views of the stakeholders

Software designers may not adequately understand prototypingHCI practitioners may not adequately understand implementationThe two groups need to talk to each other—early—and prototyping facilitates communication


The stages in website development

DesignOne or more prototypes, each followed by testing and redesignImplementationSite goes live


Two types of prototypes

Evolutionary: the prototype eventually becomes the productRevolutionary, or throwaway: the prototype is used to get the specifications right, then discarded


Horizontal prototype: broad but only top-level


Vertical prototype: deep, but only some functions


Benefits of prototyping

Improves chance of creating usable product; mistakes & omissions are flushed out early, in development, not after implementation Higher user satisfactionUsers are good at criticizing an existing system; they are much less able to imagine how specifications would translate into a product

Prototyping brings the users into the process at a much earlier stage


Benefits recognized two decades ago

Maryam Alavi. An Assessment of the Prototyping Approach to Information Systems Development. Communications of the ACM. June, 1984.Barry Boehm et. al. Prototyping vs. Specification: A Multi-Project Experiment. IEEE Transactions on Software Engineering. May, 1984.Wasserman and Shewmake. The Role of Prototypes in the User Software Engineering Methodology. In Advances in Human-Computer Interaction, H. R. Hartson, Ed. Norwood, NJ: Ablex, 1985.


Implementation is expensive

So expensive — in people time and schedule time — in practice, it is only done onceIf testing is postponed until implementation is complete, there are no resources and no time to do it over when a interface design mistake is uncovered


The core of the problem

“The vast majority of usability problems come from a single cause: the development team was lacking a key piece of information. If team members had known it earlier, they would have designed to accommodate it and the usability problem would never have occurred.”

Jared Spool, Tara Scanlon, and Carolyn Snyder. Product Usability: Survival Techniques. Proceedings of ACM CHI 98 Conference on Human Factors in Computing Systems.


Disadvantages of Prototyping

Users may be unfamiliar with the technique. But this situation is improving.If the prototype is “too good,” management may think that the project is nearly finished, or that the prototype can be converted into the final product.


The right way: use Low-Fidelity prototypes

Inexpensive—in materials cost, people time, and schedule timeNo risk of being mistaken for the final productSimple and fast to repeat as lessons are learnedWhen interface testing of the prototype is complete, implementation can proceed with confidence


Elements of a paper prototypeMenu Bar

ScrollBar

Secondary Menu

Opening Contents


Following are some pages by students

Thanks to Team Cairo, HCI 310, Fall 2001, DePaul University:Roy CalayoMarek DzikDan JungConnie PappasJessica Watson


They started with an 18 x 12 drawing pad


Their home page


User “clicks on” (points to) Clubs button


The Music page


One Club page


The Club Info page for Red No. 5


A few pages from another student group

Thanks to Team 2, Computer Science 473, Spring 2003, City College of New YorkAshford CharleusShahana DewanKhairul KabirLibai Qu


The home page

Pulldown menu


A second-level page


Another second-level page


After prototyping and user testing, this is what their home page looked like


Materials for building a paper prototype

White, unlined heavy paper or card stock; 11 x 14 or 12 x 18 inches are good sizesRegular 8.5 x 11 unlined paper5x8 index cards, for taking notesColored paper if you wish


Materials, continued

Adhesives: rubber cement, Scotch® tape, glue sticksMarkers of various colorsSticky note pads, in various colors and sizesAcetate sheets—a fewScissors


Evaluation of your prototype

Evaluation is the subject of the next chapterThere you will learn

The testing setupRoles of people involved in testing Procedure for testingInterpreting the resultsReporting the results


Summary

What prototyping isThe benefits of prototyping: catching design errors early, when they are cheap to fixThe difference between low-fidelity and high-fidelity prototypes, and the advantages of eachHow to build paper prototypesSamples of the paper prototypes of two groups of students in HCI courses

Documents

Chapter 7: PrototypingCopyright © 2004 by Prentice Hall 7. Prototyping In this chapter you will learn about: What prototyping is The benefits of prototyping