1. Prototyping ● What prototyping is ● The benefits of prototyping ● Low-fidelity prototypes ● High-fidelity prototypes, – And the advantages of each ● How to build paper prototypes

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 – design errors, unless they are really bad, are left in the product

3. 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

4. User-centered development cycle ● Design --> prototype --> evaluate ● Prototyping is a technique, not an specific tool – Supports successive refinements – Based on user input – Goal is to provide ways to observe aspects of the website ● To evaluate design ideas ● Consider alternatives – Before committing to implementation

5. 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

6. The stages in website development ● Design ● One or more prototypes, – Each followed by testing and redesign ● Implementation ● Site goes live

7. 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

8. Horizontal prototype: broad but only top-level

9. Vertical prototype: deep, but only some functions

10. Functionality & Range of prototypes ● Horizontal : – Little depth of functionality, but broad in terms of features ● Vertical: – only limited features but functionality fully developed ● Global: – has breadth and depth ● Local or scenario: – Models a very small part of the site

11. Benefits of prototyping ● Improves the chances of creating a usable product, – 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

12. 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.

13. Implementation is expensive ● So expensive – in people time and schedule time – that in practice it is only done once ● If testing waits to complete implementation – there are no resources and no time to do it over when a interface design mistake is uncovered

14. 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.

15. 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.

16. 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

17. Paper prototype to generate user reactions ● Team constructs paper prototype ● Test it with user – One team member “plays computer” in response to user actions ● Another takes careful notes ● At the end of the session, team distils notes to see what aspects need to be changed

18. Elements of a paper prototype Opening Contents Menu Bar Scroll Bar Secondary Menu

19. Advantages of paper prototype ● Easier to build ● Not necessary to wait for developers to code ● Fast to change Erasing a link and writing another faster than re-coding ● Maximizes # of times design is refined before committing to implementation ● Lack of polish does not affect user opinion of prototype

20. Problems with High-Fidelity Prototype ● Correctly functioning software takes too long to build ● Changes take too long ● One bug can destroy a user test ● Creates unrealistic expectations in management ● When testing, users tend to comment on “fit and finish” issues having little effect on usability ● Once implemented, developers have an investment on it

21. Disadvantages of Low-Fidelity ● May need to create convention to indicate “clickable” items ● Do not show well to management –lack polish ● Does not simulate response time

22. 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

23. They started with an 18 x 12 drawing pad

24. Their home page

25. User “clicks on” (points to) Clubs button

26. The Music page

27. One Club page

28. The Club Info page for Red No. 5

29. 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

30. The home page Pulldown menu

31. A second-level page

32. Another second-level page

33. After prototyping and user testing, their home page looked like this

34. 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

35. 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

36. Steps for building a paper prototype ● Assemble materials ● Set a firm deadline and stick to it ● Construct the prototype – Construct a model –not an illustration – Include representation of every element that the user will encounter – Create stock for anything that moves, changes or appears/disappears – Done by hand – not over concerned with “prettiness”

37. Evaluation of your prototype ● Evaluation is the subject of the next chapter ● There you will learn – The testing set up – Roles of people involved in testing – Procedure for testing – Interpreting the results – Reporting the results

38. Prototyping ● What prototyping is ● The benefits of prototyping: – catching design errors early, ● when they are cheap to fix ● The difference between and the advantages of Low-fidelity prototypes High-fidelity prototypes ● How to build paper prototypes ● Samples of the paper prototypes of two groups of students in HCI courses