CS -213 Human Computer Interaction Spring 2015 07 Prototyping Imran Ihsan Assistant Professor (CS) Air University, Islamabad www.imranihsan.com www.opuseven.com opuseven iimranihsan imranihsan iimranihsan iihsan iimranihsan START
Dilemma You can t evaluate a design until it s built But After building, changes to the design are difficult Simulate the design, in low-cost manner 07 Prototyping HCI Spring 2015 Imran Ihsan - www.imranihsan.com 2
Design Artifacts Expressing design ideas: Make it fast!!! Allow lots of flexibility for radically different designs Make it cheap Promote valuable feedback Facilitate iterative design and evaluation 07 Prototyping HCI Spring 2015 Imran Ihsan - www.imranihsan.com 3
Prototype Representation How to represent the prototype? Mockup Storyboard Sketches Scenarios Screenshots Functional interface 07 Prototyping HCI Spring 2015 Imran Ihsan - www.imranihsan.com 4
Prototype Scope How much to represent? Vertical - Deep prototyping Show much of the interface, but in a shallow manner Horizontal - Broad prototyping Show only portion of interface, but large amount of those portions How to make Prototype Mature Low fidelity vs. High fidelity Amount of polish should reflect maturity of the prototype 07 Prototyping HCI Spring 2015 Imran Ihsan - www.imranihsan.com 5
Design Description Can simply have a textual description of a system design Obvious weakness is that it s so far from eventual system Doesn t do a good job representing visual aspects of interface Good for accompanying visual description in report (*hint hint*) 07 Prototyping HCI Spring 2015 Imran Ihsan - www.imranihsan.com 6
Scenarios Fictional stories with characters, products, events and environments. Typically narratives, but can be videos, simulations Jane likes to take walks every morning. This morning, as she places her hand on the door, she hears 75% chance of rain, better bring your umbrella. Thankful for the notice, she grabs her umbrella and heads out for her morning walk. Scenario Utility Engaging and interesting Another person s shoes Present to different people Facilitates feedback and opinions Explore errors or mistakes Good for accompanying sketches, mockups, etc. 07 Prototyping HCI Spring 2015 Imran Ihsan - www.imranihsan.com 7
Storyboard Determine the story A very iterative process through a lot of initial drafts Includes a lot of brainstorming Sketch on pen + paper Generate more polished art for presentation Develop Use Taglines / Captions Keep it short: show as much as necessary but not more 07 Prototyping HCI Spring 2015 Imran Ihsan - www.imranihsan.com 8
Drawing is hard But it doesn t have to be 07 Prototyping HCI Spring 2015 Imran Ihsan - www.imranihsan.com 9
Remember Different presentation format means you can do more! Think about how long you have a captive audience Think about how much you want to tell Think about options for presenting sequences of drawing 07 Prototyping HCI Spring 2015 Imran Ihsan - www.imranihsan.com 10
Sketches Generally for depicting physical aspects of system 07 Prototyping HCI Spring 2015 Imran Ihsan - www.imranihsan.com 11
Mockups / Wireframes Good for brainstorming Focuses people on high-level design notions Not so good for illustrating flow and the details 07 Prototyping HCI Spring 2015 Imran Ihsan - www.imranihsan.com 12
Paper Prototyping Paper prototyping is a variation of usability testing where representative users perform realistic tasks by interacting with a paper version of the interface that is manipulated by a person playing computer, who doesn t explain how the interface is intended to work. Taken from Paper Prototyping by Carolyn Snyder http://www.paperprototyping.com/ The "Computer" highlights the item the user has just selected. A member of the development team observes and takes notes. (Photo courtesy of Timo Jokela.) 07 Prototyping HCI Spring 2015 Imran Ihsan - www.imranihsan.com 13
Draw/Paint Programs Draw each screen, good for look IP Address OK Cancel Thin, horizontal prototype Photoshop, Paint,... 07 Prototyping HCI Spring 2015 Imran Ihsan - www.imranihsan.com 14
Simulations Put storyboard-like views down with (animated) transitions between them Can give user very specific script to follow Often called chauffeured prototyping Examples: PowerPoint, Hypercard, Macromedia Director, HTML 07 Prototyping HCI Spring 2015 Imran Ihsan - www.imranihsan.com 15
Interface Builders Tools for laying out windows, controls, etc. of interface Easy to develop & modify screens Supports type of interface you are developing Good look and feel Can add back-end functionality Examples: Visual Basic,.NET, many apps for various languages 07 Prototyping HCI Spring 2015 Imran Ihsan - www.imranihsan.com 16
Specialized SILK (Sketching Interfaces Like Krazy) / DENIM Sketch-based GUI builder http://dub.washington.edu/denim/ http://www.open-video.org/details.php?videoid=5018 by James Landay s and his former group at UC Berkeley 07 Prototyping HCI Spring 2015 Imran Ihsan - www.imranihsan.com 17
Wizard of OZ Method: Behavior should be algorithmic Good for voice recognition systems Advantages: Allows designer to immerse oneself in situation See how people respond, how specify tasks 07 Prototyping HCI Spring 2015 Imran Ihsan - www.imranihsan.com 18