1. Prototyping Lecture #4 - February 5th, 2008 213: User Interface Design and Development

2. Today’s Outline 1)Low-fidelity techniques 2)High-fidelity techniques 3)Role of a Prototype

3. Design Prototype Evaluate

4. Design Iteration The goal is to test as many ideas as possible Formative as opposed to summative evaluation - especially with early stage prototypes

5. Low-Fidelity Prototypes Provide an early, concrete representation of a design idea Provide hands-on experience for all stakeholders (design teams, users, customers, etc.) Everyone understands their limitations Can be made cheaply, and can be fun to make and use

6. Lo-Fi Techniques Scenarios Storyboards Design Sketch Paper Flipbook Cardboard / Foam Mock-up

7. Pre-history Previously, “user” features were described as functional requirements, and metrics of usability The system should provide the following ten user functions The X function should be executed by an average college-educated user in a maximum of ten seconds, with an acceptable error rate of 0.1%

8. Limitations Focus on quantitative, as opposed to qualitative, requirements - which are not always germane Is the time it takes to download a song the most important criterion for judging an online music store? It is also difficult to assess quantitative metrics until relatively late in the design process

9. Scenarios “Scenarios are stories about people and their activities” Focuses developers on the most important user activities that should be supported Does not focus on implementation Can either describe current practice, or a future hypothetical scenario

10. Example Scenario John wants to take notes while in class. Even though the slides will be posted online later, he wants to make sure he captures the most important points. Before the professor starts the lecture, he starts the note-taking application on his phone. The application automatically notes the current date, time and class. During the class he can press one of two buttons - to start recording audio or to take a picture. After recording, the application allows him to tag the recording with keywords. Later, when he is home, he can review his notes, synchronized with the powerpoint slides downloaded from the course web site. He can search by keyword, follow the lecture linearly, or sped up in time.

11. Elements of a Scenario Agents / Actors Setting Goals / Objectives Actions / Events

12. Example Scenario John wants to take notes while in class. Even though the slides will be posted online later, he wants to make sure he captures the most important points. Before the professor starts the lecture, he starts the note-taking application on his phone. The application automatically notes the current date, time and class. During the class he can press one of two buttons - to start recording audio or to take a picture. After recording, the application allows him to tag the recording with keywords. Later, when he is home, he can review his notes, synchronized with the powerpoint slides downloaded from the course web site. He can search by keyword, follow the lecture linearly, or sped up in time.

13. Example Scenario John wants to take notes while in class. Even though the slides will be posted online later, he wants to make sure he captures the most important points. Before the professor starts the lecture, he starts the note-taking application on his phone. The application automatically notes the current date, time and class. During the class he can press one of two buttons - to start recording audio or to take a picture. After recording, the application allows him to tag the recording with keywords. Later, when he is home, he can review his notes, synchronized with the powerpoint slides downloaded from the course web site. He can search by keyword, follow the lecture linearly, or sped up in time.

14. Ways to Present a Scenario Text paragraph Storyboard (Comic book) Video

15. Source: http://vis.berkeley.edu/courses/cs160-fa06/wiki/index.php/InteractivePrototype-Group:4Cornersa

16. Source: http://best.me.berkeley.edu/~lora/images/process_photos/ses_storyboard.jpg

17. Video Scenario Apple’s Knowledge Navigator (1987) Source: Apple Computer, http://www.billzarchy.com/clips/clips_apple_nav_navigator.htm

18. Lo-Fi Techniques Scenarios Storyboards Design Sketch Paper Flipbook Cardboard / Foam Mock-up

19. Slide from Jake Wobbrock

21. Two strips of paper Post-It® notes too

22. Slide from Jake Wobbrock

23. Materials for Lo-Fi Prototyping Large, heavy white paper Colored paper Thumbtacks Cardboard or foam core Index cards Tape or glue Pencils, pens, markers Overhead transparencies Scissors Exacto knife Slide from Jake Wobbrock

24. Hi-Fidelity Prototypes Provide increasing amounts of functionality and refinement Usually involve some amount of programming and interactivity Can provide functionality to be empirically tested with users Take more time and resources to build Users can be distracted by limitations

25. Tools for Hi-Fidelity Prototyping Powerpoint Flash Director Visual Basic Hypercard Photoshop D/HTML Video Phidgets Slide from Jake Wobbrock

26. Source: Kelly, Maureen. “Interactive Prototypes with PowerPoint”. http://www.boxesandarrows.com/view/interactive (adapted from Scott Klemmer)

27. Source: Brunette, Kynthia, et. al. “Meeteetse”. Indiana University. Student Contest Entry. CHI 2005 (adapted from Scott Klemmer)

29. Source: IDEO (adapted from Scott Klemmer)

30. Slide from Jake Wobbrock

31. Source: Hisaab Project

32. 32

33. 33

34. 34

35. Wizard of Oz Technique Human operator mimics advanced computational functionality –Speech recognition, gesture recognition, vision, etc. Allows for testing advanced functionality without full implementation

36. The Rights of a Prototype I am Disposable I am easy to Change I do not need to be Complete I do not need to be Updated Adapted from Scott Klemmer

37. Two Key Questions What do I want to Learn? What do I want to Communicate? Adapted from Scott Klemmer

38. Prototyping Techniques Scenario  Storyboard  Video Design Sketch  Screenshot Paper  Cardboard  Foam Mockups Wizard of Oz Interactive Prototypes Vision Experience Lo-Fi Hi-Fi

39. Kinds of Prototypes Role - “are built primarily to answer questions of what an artifact could do for a user” Look and Feel - “explore and demonstrate options for the concrete experience” Implementation - “experiments… to demonstrate to their organization the technical feasibility of the artifact” Integration - “verify that the design is complete and coherent, and to find synergy” Source: Houde and Hill, “What do Prototypes Prototype”

42. Cultures of Prototyping “Small, entrepreneurial companies tend to be prototype-driven” “Companies that manage a large installed base of users tend to be specification-driven” “Organizations intending to be innovative need to move from specification-driven prototypes to prototype-driven specifications" Source: Michael Schrage, “Cultures of Prototyping”

43. Testing Prototypes Heuristic Evaluation Focus Group Presentation Cognitive Walkthrough Think Aloud Usability Testing etc… more on this later!

44. For Next Time Assignment 1 - present your scenarios and personas in class on Feb 17th Assignment 2 will be posted soon Waitlisted students should be enrolled Guest lecture by Bill Buxton on Feb 10 - come prepared - attend his talk, read his writings, be ready to ask questions

45. Show and Tell Further reactions to the last lecture?