1. CEN3722 Human Computer Interaction Prototyping Dr. Ron Eaglin

2. Objectives Define the term prototype Describe why prototypes are important in ensuring usability Define the terms: Participatory design Parallel design Define the “PICTIVE” prototyping method, and be able to demonstrate its use in prototyping

3. Objectives Describe several ways of speeding up the prototyping process Describe the differences between horizontal and vertical prototypes Define the term scenario, and describe how scenarios can be used in prototyping

4. Design Examples

5. Prototyping Also called “Design Mockups” Solves problems of the waterfall “traditional” software engineering method. Users do not see program/product until end of project Difficult to accommodate interface/functional changes at that stage

6. Prototypes Do not have to have full functionality of the system Do not have to cover entire scope of software (just parts) Does not have performance constraints of system Can allow users to explore and test (user testing) Saves money (quick design turnaround) Allows for alternative designs to be presented Allows for fixes before back-end code is written USER CENTRIC

7. Sketch based designs

8. Behaviors modeled

9. Fidelity in Prototyping Fidelity refers to the level of detail High fidelity prototypes look like the final product Low fidelity Paper sketches with many details missing

10. Parallel Prototyping Two, three, or four designers working independently on initial prototype Goal is to explore different design alternatives before settling on initial prototype Initial parallel designs should take no longer than a few hours to two days Allows for better designs based on alternatives Can use ideas from each of the parallel design (not stuck on one alternative)

11. Diversified Parallel Design Multiple designers work on different parts of the system Inexpensive way of exploring overall design space Many ideas will not be implemented – cost of “throw-away” designs is low.

12. Participatory Design Users bring up questions designers miss It is impossible to know everything about your users It is best if users can be involved in the design process Users are not designers – should not expect them to come up with designs Users are good at reacting to design options Should be presented prototypes and get feedback

13. Vertical Prototypes Reduced number of features Narrow system with depth of functionality for only a few selected features Only limited parts of the system available These parts are tested in depth

14. Horizontal Prototypes Reduced level of functionality Full surface layer (appears to be a full featured system) No underlying functionality

15. Vertical vs. Horizontal Prototypes Functionality Different Features Full System Vertical Horizontal Scenario Nielsen, 1993

16. Iterative Design Design Prototype Evaluate

17. Speeding up Prototypes Reduce emphasis on efficiency of implementation Disk Space, Speed, Memory – premature optimization Accept less reliable code No error checking, no test suites, reduced code standards Simplified algorithms Less robust, don’t handle special cases (like leap year)

18. Speeding up Prototyping Wizard of Oz Human behind the scenes to handle tasks that were not coded into the system Different Target Platform Prototype in different language or platform that target (hypercard, VB) Use low-fidelity media Use scanned images rather than video Use fake data or dummy content Paper mock-ups

19. PICTIVE (Muller, BellCore) Plastic Interface for Collaborative Technology InitiatiVEs Tool for creating prototypes Involves paper mockups (low-fi prototypes) Gets people with diverse experience involved Design with realization that it will be extensively modified in real-time by users. Design: Run it by users : Get feedback : Modify

20. PICTIVE Method Post-It NotesIndex CardsColored Pens

21. PICTIVE Method

23. Set forth a task scenario Implement the functions in that scenario Set a deadline (30 minutes) Everything must be implemented on paper Forces you to think about design interface issues

24. PICTIVE Implement models, not illustrations Make something easy to control by the person playing the computer. Anything that moves, changes appearance, or comes and goes should be on it’s own stock (menus = sticky notes, dialog boxes = note cards, etc.) Don’t worry about being fancy or pretty. Don’t even use a straight edge for first try. Testing with participants, that is, users

25. PICTIVE 30 minutes for design 10 minutes for user testing Same task scenario 10 minutes for modification 5 minutes for user testing Same task scenario

26. Scenarios Ultimate minimalist prototype Describes a single interaction session No flexibility for the user. Combine elements of horizontal and vertical prototype Users can’t interact with real data: horizontal Users can’t move freely throughout system: vertical

27. Scenarios Ultimate minimalist prototype Describes a single interaction session No flexibility for the user. Combine elements of horizontal and vertical prototype Users can’t interact with real data: horizontal Users can’t move freely throughout system: vertical

28. Scenario A scenario is an encapsulated description of: An individual user… using a specific set of computer facilities… to achieve a specific outcome… under specific circumstances… over a certain time interval

29. Scenario - ATM Example User inserts bank card. Works correctly no matter what side is up. ATM asks user for 4 digit PIN. User does so using standard numeric keypad User presented with four options: Withdraw $100 Withdraw other amounts Make a deposit Other transactions

30. ATM Scenario User presses button for “Withdraw $100” Machine pays out $$$, deducting it from user’s account. Machine returns bank card to customer Problems? Other amounts? Closure…

31. Scenarios Two main uses Used during design as a way of expressing and understanding the way users will eventually interact with the future system Used during early evaluation to get user feedback without the expense of constructing a running prototype

32. Objectives Define the term prototype Describe why prototypes are important in ensuring usability Define the terms: Participatory design Parallel design Define the “PICTIVE” prototyping method, and be able to demonstrate its use in prototyping

33. Objectives Describe several ways of speeding up the prototyping process Describe the differences between horizontal and vertical prototypes Define the term scenario, and describe how scenarios can be used in prototyping