1. CSCD 487/587 Human Computer Interface Winter 2013 Lecture 17 Prototypes and Design

2. Overview After requirements is design phase Design is an iterative process within User Centered design paradigm Prototypes play an important role in this process Once users can see and maybe touch product, their responses can be incorporated back into the design

3. Prototyping and Design What is a prototype? Why do we prototype? Different kinds of prototyping Low fidelity High fidelity Compromises in prototyping Some details of Paper Prototyping

4. Phases of Design Two phases of Design Conceptual Early stages of design, shows users basic concepts of a product Physical Actually designing final product and building it

5. Conceptual Design Prototypes Early prototypes can differ substantially from actual product Can be paper, cardboard or other non-technical medium Later, prototypes will more closely resemble the final product Be an actual representation perhaps created in the same manner Software system – Interface will be software !

6. What is a Prototype? In other design fields a prototype can be a small- scale model: a miniature car a miniature building or town the example here comes from a 3D printer

7. What is a Prototype? In interaction design it can be (among other things): a set of screen sketches a storyboard, i.e. a cartoon-like series of scenes a Powerpoint slide show a video simulating the use of a system a lump of wood (e.g. PalmPilot) a cardboard mock-up a piece of software with limited functionality written in the target language or in another language

8. Prototypes What is the main purpose of prototypes? Allows us to try out our design ideas and get feedback Plus, iterate through several possibilities Can be used for several groups Users Designers Investors/Managers

9. Prototypes Users We assume users can't tell you what they want If they can see something tangible, they can tell you what they don't want Useful to discuss ideas with users Important part of design process

10. Prototypes Designers Communicate with team members Everyone needs to be on the same page and in agreement with the product being developed Investors or Management Serves as a tangible representation of the product Can use it to generate more resources for project

11. Merits of Prototyping - 1 Captures functional and interface requirements Interface and functional requirements Reveals problems/prevents gross mistakes Allows evaluation/discussion to foster innovative ideas from designers and users Allows better communication

12. Merits of Prototyping - 2 Users enjoy prototyping and feel involved in design More likely to accept/understand final system Suggests level of user support needed Help, tutorials, documentation, training Results in better usability Economical way of testing designs, less effort

13. User Testing in Practice

14. What to prototype? Technical issues Work flow, task design Screen layouts and information display Difficult, controversial or critical areas

15. Low-Fidelity Prototypes Doesn't have to look much like final product Simple, cheap and quick to produce For exploration only, in the early stages of design

16. Low-Fidelity Prototypes Paper Sketching Hand drawn sketches Simple – stick figures, outlines of things Index Cards One card per task

17. Low-Fidelity Prototypes Sketching Sketching is important to low-fidelity prototyping Don’t be inhibited about drawing ability. Practice simple symbols

18. Low-Fidelity Prototypes Card-based Index cards (3 X 5 inches) Each card represents one screen or part of screen Often used in website development

19. Low-Fidelity Prototypes Storyboarding Often used together with specific Use Case Scenarios Shows how user can progress through a task Users can then role play through a scenario

20. Low-Fidelity Prototypes A storyboard is Series of panels that depict key scenes, actions, visuals, and annotations that define the highlights of a user experience Imagine a comic strip with explanations adjacent to each panel According to wikipedia, storyboarding was developed by animators at Walt Disney studio I have not verified this is true ….

21. Storyboard Example Example from MIT Course project http://web.mit.edu/2.744/www/Project/Assignments/userEx perienceDesign/mleong/index.html

22. High-fidelity prototyping Uses materials that you would expect to be in final product Prototype looks more like final system than a low-fidelity version For a high-fidelity software prototype common environments include Macromedia Director, Visual Basic, Visual Studio Danger is that users think they have a full system May be frustrated when it does not all work !!!!

23. Details Paper Prototyping

24. Words from Professionals Paper Prototypes User Interface Engineering Still the “Simplest” method A Team-Building Tool A Design and Testing Tool A Communication Tool Facilitates Regular Testing (valuable long-term benefit!)

25. Words from the Book Author “Paper Prototyping” Carolyn Snyder: Fast mockup – no coding required Finds problems, including serious ones Refines design base on user feedback before implementation (Risk Management!) Team and communication tool Encourages creativity!

26. Benefits Summary Quick to build/refine, thus enabling rapid design interactions. Requires minimal resources and materials. Detects usability problems at a very early stage before implementation. Promotes communication between stakeholders.

27. One Designers Experience Paper Prototyping of Menu Design Theories on a Small Screen Device Mockup design was fast and flexible Data of path-finding behavior was visible Excluded variables we didn’t want It’s fun!

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

29. Another Example The home page Pulldown menu

30. A second-level page

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

32. How to Test a Paper Prototype Standard Usability Evaluation Procedure People you need: real users, the “computer”, the facilitator, the observer, and usability consultants Laboratory setting Good Example here: http://www.youtube.com/watch?v=9wQkLthhHKA

33. Tools Many tools out there for digital paper prototyping and storyboarding PowerStory Powerpoint plugin http://www.youtube.com/watch?v=lAj7LmCaP WA Google Sketchup for Storyboarding http://www.youtube.com/watch?v=1Gb9uffSFUE PowerMockup uses powerpoint to create digital stories http://usabilitygeek.com/wireframing- storyboarding-powerpoint-powermockup/

34. References Paper Prototyping Google Search – Paper Prototyping – YouTube http://www.youtube.com/results?search_query=paper+prototyping &oq=paper+prototyping&gs_l=youtube.3..0l4j0i5.21292370.213 00010.0.21300219.21.18.2.1.1.0.167.1193.16j2.18.0...0.0...1ac. 1.3pYQyWh3-kE Prototyping Low and Hi Fidelity Today – Really Good Set of Slides http://www.slideshare.net/memmel/user-interface-prototyping Storyboarding tools http://uxmag.com/articles/storyboarding-in-the-software-design- process Paper Prototyping: Getting User Data Before You Code Jakob Nielsen, April 14, 2003: http://www.useit.com/alertbox/20030414.html Paper prototyping Usability Net http://www.usabilitynet.org/tools/prototyping.htm Paper Prototyping: The Fast and Easy Way to Design and Refine User Interfaces Carolyn Snyder – Book Site http://www.paperprototyping.com/ Paper Prototyping Shawn Medero http://alistapart.com/article/paperprototyping Six Signs That You Should Use Paper Prototyping Carolyn Snyder 12/23/2003 http://today.java.net/pub/a/today/2003/12/23/sixSigns.html

35. 35 End Look for New Date on Project Deliverable !!!