CS 102 Human-Computer Interaction Lecture 7: Prototyping CS102: Monsoon 2015 1
Course progress Human subjects training certi fi cates due today Studio class Wednesday Balsamiq prototypes for shuttle app due next Monday CS102: Monsoon 2015 2
Project teams Koishore Ayushree Yash Shivangi Mohit Aania Himanshu Dhairyya Apuroop Deva Ujjwal Rhea Arjun Samriddh Minchu Kshitij Vijay Mihika Sankalp Anirban Kamal Yaswanth Anvi Paul Urvin Ishika Manisha Paras Shreyash CS102: Monsoon 2015 3
Recap CS102: Monsoon 2015 4
User personas CS102: Monsoon 2015 5 How to create personas
Facebook’s Origami CS102: Monsoon 2015 6
Prototyping 7 CS102: Monsoon 2015
What to prototype? CS102: Monsoon 2015 8 What do Prototypes Prototpe?
Key variables Form: On-paper, physical, software, mock-up, … Fidelity: informal to polished Functionality: minimal to detailed Aspect: which aspect of the design? Throw-away or iterative? CS102: Monsoon 2015 9
Purposes of a prototype Shared communication Usability testing Working through a design Selling your idea (internally) Checking technical feasibility CS102: Monsoon 2015 10 Prototyping: A Practitioner’s Guide
A cardboard prototype CS102: Monsoon 2015 11
Paper prototype demo CS102: Monsoon 2015 12 https://www.youtube.com/watch?v=GrV2SZuRPv0
An excellent reference CS102: Monsoon 2015 13
Wizard of Oz technique CS102: Monsoon 2015 14
Wizard of Oz technique Often used to work around unavailable parts of the system Human simulator (often called The Computer) Presence may or may not be obvious to the user Very e ff ective short-cut, e.g. for speech recognition CS102: Monsoon 2015 15
Storyboards From movies - just show cartoon depictions of action sequences CS102: Monsoon 2015 16 Interactive Sketching for the Early Stages…
Wireframes Represents structure, elements, placement on screen Flow between screens (may be partially interactive) Useful to show users or communicate design between technical and functional team members No technical skills needed CS102: Monsoon 2015 17
Wireframes: example CS102: Monsoon 2015 18
Digital mockups Visually detailed, often created with Powerpoint, Photoshop, etc. CS102: Monsoon 2015 19
Technical Prototypes Much of CS research leads to a prototype Technology dipstick, e.g. Is the performance/memory usage acceptable? Is the power consumption within limits? CS102: Monsoon 2015 20
Technical Prototypes 45nm prototype Actual 45nm CPU CS102: Monsoon 2015 21 Source: Intel
Video prototyping Often quite sophisticated Meant for a general audience Quite powerful (you can edit/Wiz of Oz a lot) CS102: Monsoon 2015 22
Knowledge Navigator CS102: Monsoon 2015 23 https://www.youtube.com/watch?v=hb4AzF6wEoc
Tesla charger CS102: Monsoon 2015 24 https://www.youtube.com/watch?v=uMM0lRfX6YI
Parallel prototyping 25 CS102: Monsoon 2015
Parallel prototyping 33 ad designers in 2 conditions: 6 sequential prototypes vs. 3 - 2 - 1 CS102: Monsoon 2015 26 Steven Dow et al
Parallel prototyping Together-comparisons lead to better learning Avoids fi xations Parallel condition leads to better ads, diverse designs Designers respond better to critique CS102: Monsoon 2015 27 Steven Dow et al
Parallel prototyping How to get high-quality feedback from users? Simultaneously evaluated three designs for temperature controlled system. Some users shown one interface; others shown all 3. CS102: Monsoon 2015 28 28 http://www.billbuxton.com/rightDesign.pdf
Parallel prototyping Circular Tabular Linear CS102: Monsoon 2015 29
Parallel prototyping Mean Rating (higher is better) Lower ratings from people who saw all 3 interfaces CS102: Monsoon 2015 30
Parallel prototyping More negative and fewer positive comments from people who saw all 3 interfaces CS102: Monsoon 2015 31
Prototypes: wrap-up You will develop prototypes often Look for clever ways to maximize learning with minimal time/e ff ort Try to get genuine user feedback Ask your friends in companies how they prototype CS102: Monsoon 2015 32
Recommend
More recommend
