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