SLIDE 1
CS102: Monsoon 2015
CS102: Monsoon 2015
Course progress
Human subjects training certificates due today Studio class Wednesday Balsamiq prototypes for shuttle app due next Monday
2
1 Course progress Human subjects training certi fi cates due today - - PowerPoint PPT Presentation
1 Course progress Human subjects training certi fi cates due today - - PowerPoint PPT Presentation
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
SLIDE 2
SLIDE 3
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
SLIDE 4
CS102: Monsoon 2015
Recap
4
SLIDE 5
CS102: Monsoon 2015
User personas
5 How to create personas
SLIDE 6
CS102: Monsoon 2015
Facebook’s Origami
6
SLIDE 7
CS102: Monsoon 2015
Prototyping
7
SLIDE 8
CS102: Monsoon 2015
What to prototype?
8 What do Prototypes Prototpe?
SLIDE 9
CS102: Monsoon 2015
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?
9
SLIDE 10
CS102: Monsoon 2015
Purposes of a prototype
Shared communication Usability testing Working through a design Selling your idea (internally) Checking technical feasibility
10 Prototyping: A Practitioner’s Guide
SLIDE 11
CS102: Monsoon 2015
A cardboard prototype
11
SLIDE 12
CS102: Monsoon 2015
Paper prototype demo
12 https://www.youtube.com/watch?v=GrV2SZuRPv0
SLIDE 13
CS102: Monsoon 2015
An excellent reference
13
SLIDE 14
CS102: Monsoon 2015
Wizard of Oz technique
14
SLIDE 15
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
SLIDE 16
CS102: Monsoon 2015
Storyboards
From movies - just show cartoon depictions of action sequences
16 Interactive Sketching for the Early Stages…
SLIDE 17
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
SLIDE 18
CS102: Monsoon 2015
Wireframes: example
18
SLIDE 19
CS102: Monsoon 2015
Digital mockups
Visually detailed, often created with Powerpoint, Photoshop, etc.
19
SLIDE 20
CS102: Monsoon 2015
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?
20
SLIDE 21
CS102: Monsoon 2015
Technical Prototypes
21 Source: Intel
45nm prototype Actual 45nm CPU
SLIDE 22
CS102: Monsoon 2015
Video prototyping
Often quite sophisticated Meant for a general audience Quite powerful (you can edit/Wiz of Oz a lot)
22
SLIDE 23
CS102: Monsoon 2015
Knowledge Navigator
23 https://www.youtube.com/watch?v=hb4AzF6wEoc
SLIDE 24
CS102: Monsoon 2015
Tesla charger
24 https://www.youtube.com/watch?v=uMM0lRfX6YI
SLIDE 25
CS102: Monsoon 2015
Parallel prototyping
25
SLIDE 26
CS102: Monsoon 2015
Parallel prototyping
33 ad designers in 2 conditions: 6 sequential prototypes
- vs. 3 - 2 - 1
26 Steven Dow et al
SLIDE 27
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
SLIDE 28
CS102: Monsoon 2015
Parallel prototyping
How to get high-quality feedback from users? Simultaneously evaluated three designs for temperature controlled system. Some users shown one interface;
- thers shown all 3.
28 28 http://www.billbuxton.com/rightDesign.pdf
SLIDE 29
CS102: Monsoon 2015
Parallel prototyping
29
Circular Tabular Linear
SLIDE 30
CS102: Monsoon 2015
Parallel prototyping
30
Mean Rating (higher is better) Lower ratings from people who saw all 3 interfaces
SLIDE 31
CS102: Monsoon 2015
Parallel prototyping
31
More negative and fewer positive comments from people who saw all 3 interfaces
SLIDE 32
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