1. Copyright © 2004 by Prentice Hall
User-Centered Website Development: A Human-Computer Interaction Approach
Chapter 7: Prototyping
Copyright © 2004 by Prentice Hall

2. Copyright © 2004 by Prentice Hall
Daniel D. McCracken
City College of New York
Rosalee J. Wolfe
DePaul University
With a foreword by:
Jared M. Spool, Founding Principal,
User Interface Engineering
PowerPoint slides by Dan McCracken, with thanks to Rosalee Wolfe and S. Jane Fritz, St. Joseph’s College
Chapter 7: Prototyping
Copyright © 2004 by Prentice Hall

3. Copyright © 2004 by Prentice Hall
Credits
Slides 20-25: DePaul University students:
Roy Calayo
Marek Dzik
Dan Jung
Connie Pappas
Jessica Watson
Slides 27-30: City College of New York students:
Ashford Charleus
Shahana Dewan
Khairul Kabir
Libai Qu
Chapter 7: Prototyping
Copyright © 2004 by Prentice Hall

4. Copyright © 2004 by Prentice Hall
7. Prototyping
In this chapter you will learn about:
What prototyping is
The benefits of prototyping
Low-fidelity and high-fidelity prototypes, and the advantages of each
How to build paper prototypes
Chapter 7: Prototyping
Copyright © 2004 by Prentice Hall

5. Copyright © 2004 by Prentice Hall
7.2 Why Prototype?
Traditional software development: you can’t test until you implement
Implementation is expensive, and there is nothing to test until you have made that expenditure of effort and schedule time
Result: any design errors are built in to the first thing you can test, and it is very expensive to make changes
Result: design errors, unless they are really bad, are left in the product
Chapter 7: Prototyping
Copyright © 2004 by Prentice Hall

6. Breaking this implementation paradox
Build a prototype of the basic functionality, especially the interface
Test the prototype, which will uncover design errors
Correct the errors
Repeat until you have a clean design
A major tool for improving usability
Heavily used in industry
Chapter 7: Prototyping
Copyright © 2004 by Prentice Hall

7. The views of the stakeholders
Software designers may not adequately understand prototyping
HCI practitioners may not adequately understand implementation
The two groups need to talk to each other—early—and prototyping facilitates communication
Chapter 7: Prototyping
Copyright © 2004 by Prentice Hall

8. The stages in website development
Design
One or more prototypes, each followed by testing and redesign
Implementation
Site goes live
Chapter 7: Prototyping
Copyright © 2004 by Prentice Hall

9. Two types of prototypes
Evolutionary: the prototype eventually becomes the product
Revolutionary, or throwaway: the prototype is used to get the specifications right, then discarded
Chapter 7: Prototyping
Copyright © 2004 by Prentice Hall

10. Horizontal prototype: broad but only top-level
Chapter 7: Prototyping
Copyright © 2004 by Prentice Hall

11. Vertical prototype: deep, but only some functions
Chapter 7: Prototyping
Copyright © 2004 by Prentice Hall

12. Benefits of prototyping
Improves the chances of creating a usable product, since mistakes and omissions are flushed out early in the development process, not after implementation
Higher user satisfaction
Users 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
Chapter 7: Prototyping
Copyright © 2004 by Prentice Hall

13. Benefits were 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.
Students—and others, perhaps—seem not to believe, at first, that all the kindergarten stuff with paper and glue and markers can be serious. I hope this isn’t too heavy-handed.
Chapter 7: Prototyping
Copyright © 2004 by Prentice Hall

14. Implementation is expensive
So expensive—in people time and schedule time—that in practice it is only done once
If 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
Chapter 7: Prototyping
Copyright © 2004 by Prentice Hall

15. Copyright © 2004 by Prentice Hall
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.
Chapter 7: Prototyping
Copyright © 2004 by Prentice Hall

16. Copyright © 2004 by Prentice Hall
Disadvantages
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.
Chapter 7: Prototyping
Copyright © 2004 by Prentice Hall

17. The right way: use low-fidelity prototypes
Inexpensive—in materials cost, people time, and schedule time
No risk of being mistaken for the final product
Simple and fast to repeat as lessons are learned
When interface testing of the prototype is complete, implementation can proceed with confidence
Chapter 7: Prototyping
Copyright © 2004 by Prentice Hall

18. Elements of a paper prototype
Menu Bar
Scroll Bar
Opening Contents
Secondary Menu
Chapter 7: Prototyping
Copyright © 2004 by Prentice Hall

19. Following are some pages by students
Thanks to Team Cairo, HCI 310, Fall 2001, DePaul University:
Roy Calayo
Marek Dzik
Dan Jung
Connie Pappas
Jessica Watson
permissions are on file, from each student. Prentice Hall takes the permissions issue very seriously, but so do we. And it is a pleasure to give credit to some fine students, who were a pleasure to work with.
Chapter 7: Prototyping
Copyright © 2004 by Prentice Hall

20. They started with an 18 x 12 drawing pad
Chapter 7: Prototyping
Copyright © 2004 by Prentice Hall

21. Copyright © 2004 by Prentice Hall
Their home page
I put in the ruler only to show the scale, of course.
Chapter 7: Prototyping
Copyright © 2004 by Prentice Hall

22. User “clicks on” (points to) Clubs button
Chapter 7: Prototyping
Copyright © 2004 by Prentice Hall

23. Copyright © 2004 by Prentice Hall
The Music page
Chapter 7: Prototyping
Copyright © 2004 by Prentice Hall

24. Copyright © 2004 by Prentice Hall
One Club page
Chapter 7: Prototyping
Copyright © 2004 by Prentice Hall

25. The Club Info page for Red No. 5
Chapter 7: Prototyping
Copyright © 2004 by Prentice Hall

26. A few pages from another student group
Thanks to Team 2, Computer Science 473, Spring 2003, City College of New York
Ashford Charleus
Shahana Dewan
Khairul Kabir
Libai Qu
Written permissions are on file, from each student. Another group of good students with whom I enjoyed working.
Chapter 7: Prototyping
Copyright © 2004 by Prentice Hall

27. Copyright © 2004 by Prentice Hall
The home page
Pulldown menu
This is a paper prototype, but the students used the computer to create a few elements of it. What looks like glare in the title graphic is actually their choice of a kind of gradient effect.
Chapter 7: Prototyping
Copyright © 2004 by Prentice Hall

28. Copyright © 2004 by Prentice Hall
A second-level page
Chapter 7: Prototyping
Copyright © 2004 by Prentice Hall

29. Another second-level page
Chapter 7: Prototyping
Copyright © 2004 by Prentice Hall

30. Copyright © 2004 by Prentice Hall
After prototyping and user testing, this is what their home page looked like
The intended message: prototyping pays off, in sites that work. And look good. All ten teams did work at this level. I can’t believe how hard they worked, and how effective the results were. If I had demanded this kind of effort there would have been delegations to the dean: “We’re being asked to do six hours work for three credits!” As it was, they simply got caught up in the excitement of doing good projects, and poured on the effort. Seeing early prototypes fostered just a bit of competition, which never hurts. (If not overdone.)
And it was a total delight to hear, in their presentations, what they learned in prototyping and in user testing. Validated the course, in their own words. Courses should always go so well.
Chapter 7: Prototyping
Copyright © 2004 by Prentice Hall

31. Materials for building a paper prototype
White, unlined heavy paper or card stock; 11 x 14 or 12 x 18 inches are good sizes
Regular 8.5 x 11 unlined paper
5x8 index cards, for taking notes
Colored paper if you wish
Chapter 7: Prototyping
Copyright © 2004 by Prentice Hall

32. Copyright © 2004 by Prentice Hall
Materials, continued
Adhesives: rubber cement, Scotch® tape, glue sticks
Markers of various colors
Sticky note pads, in various colors and sizes
Acetate sheets—a few
Scissors
Chapter 7: Prototyping
Copyright © 2004 by Prentice Hall

33. Evaluation of your prototype
Evaluation is the subject of the next chapter
There you will learn
The testing setup
Roles of people involved in testing
Procedure for testing
Interpreting the results
Reporting the results
Chapter 7: Prototyping
Copyright © 2004 by Prentice Hall

34. Copyright © 2004 by Prentice Hall
Summary
In this chapter you have seen:
What prototyping is
The benefits of prototyping: catching design errors early, when they are cheap to fix
The difference between low-fidelity and high-fidelity prototypes, and the advantages of each
How to build paper prototypes
Samples of the paper prototypes of two groups of students in HCI courses
Chapter 7: Prototyping
Copyright © 2004 by Prentice Hall