View
4
Download
0
Category
Preview:
Citation preview
CS102: Monsoon 2015
CS 102 Human-Computer Interaction
Lecture 7: Prototyping
1
CS102: Monsoon 2015
Course progress
Human subjects training certificates due today
Studio class Wednesday
Balsamiq prototypes for shuttle app due next Monday
2
CS102: Monsoon 2015
Project teams
3
Mohit Deva
Koishore Aania Ujjwal
Ayushree Himanshu
Rhea
Yash Dhairyya
Arjun
Shivangi Apuroop Samriddh
Minchu Anirban
Urvin
Kshitij Kamal Ishika
Vijay Yaswanth Manisha
Mihika Anvi
Paras
Sankalp Paul
Shreyash
CS102: Monsoon 2015
Recap
4
CS102: Monsoon 2015
User personas
5 How to create personas
CS102: Monsoon 2015
Facebook’s Origami
6
CS102: Monsoon 2015
Prototyping
7
human
CS102: Monsoon 2015
What to prototype?
8 What do Prototypes Prototpe?
CS102: Monsoon 2015
Key variablesForm: On-paper, physical, software, mock-up, …
Fidelity: informal to polished
Functionality: minimal to detailed
Aspect: which aspect of the design?
Throw-away or iterative?
9
CS102: Monsoon 2015
Purposes of a prototypeShared communication
Usability testing
Working through a design
Selling your idea (internally)
Checking technical feasibility
10 Prototyping: A Practitioner’s Guide
CS102: Monsoon 2015
A cardboard prototype
11
CS102: Monsoon 2015
Paper prototype demo
12 https://www.youtube.com/watch?v=GrV2SZuRPv0
CS102: Monsoon 2015
An excellent reference
13
CS102: Monsoon 2015
Wizard of Oz technique
14
CS102: Monsoon 2015
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 effective short-cut, e.g. for speech recognition
15
CS102: Monsoon 2015
StoryboardsFrom movies - just show cartoon depictions of action sequences
16 Interactive Sketching for the Early Stages…
CS102: Monsoon 2015
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
17
CS102: Monsoon 2015
Wireframes: example
18
CS102: Monsoon 2015
Digital mockupsVisually detailed, often created with Powerpoint, Photoshop, etc.
19
CS102: Monsoon 2015
Technical PrototypesMuch of CS research leads to a prototype
Technology dipstick, e.g.
Is the performance/memory usage acceptable?
Is the power consumption within limits?
20
CS102: Monsoon 2015
Technical Prototypes
21 Source: Intel
45nm prototype Actual 45nm CPU
CS102: Monsoon 2015
Video prototypingOften quite sophisticated
Meant for a general audience
Quite powerful (you can edit/Wiz of Oz a lot)
22
CS102: Monsoon 2015
Knowledge Navigator
23 https://www.youtube.com/watch?v=hb4AzF6wEoc
CS102: Monsoon 2015
Tesla charger
24 https://www.youtube.com/watch?v=uMM0lRfX6YI
CS102: Monsoon 2015
Parallel prototyping
25
human
CS102: Monsoon 2015
Parallel prototyping33 ad designers in 2 conditions: 6 sequential prototypes vs. 3 - 2 - 1
26 Steven Dow et al
CS102: Monsoon 2015
Parallel prototyping
27
Together-comparisons lead to better learning
Avoids fixations
Parallel condition leads to better ads, diverse designs
Designers respond better to critique
Steven Dow et al
CS102: Monsoon 2015
Parallel prototypingHow to get high-quality feedback from users?
Simultaneously evaluated three designs for temperature controlled system. Some users shown one interface; others shown all 3.
2828 http://www.billbuxton.com/rightDesign.pdf
CS102: Monsoon 2015
Parallel prototyping
29
Circular Tabular
Linear
CS102: Monsoon 2015
Parallel prototyping
30
Mean Rating (higher is better)
Lower ratings from people who saw all 3 interfaces
CS102: Monsoon 2015
Parallel prototyping
31
More negative and fewer positive comments from people who saw all 3 interfaces
CS102: Monsoon 2015
Prototypes: wrap-up
You will develop prototypes often
Look for clever ways to maximize learning with minimal time/effort
Try to get genuine user feedback
Ask your friends in companies how they prototype
32
Recommended