[PPT] - Human-Computer Interaction Bjrn Hartmann University of California, PowerPoint Presentation

SLIDE 1

Björn Hartmann University of California, Berkeley EECS, Computer Science Division CS10, Spring 2012

Human-Computer Interaction

SLIDE 2

CS10 - UC Berkeley Spring 2012

My Background

2

SLIDE 3

CS10 - UC Berkeley Spring 2012 3

UPenn- NOT in Computer Science

(cc) SnapsterMax http://www.flickr.com/photos/myworldinpixels/558060045

1997-2002

SLIDE 4

CS10 - UC Berkeley Spring 2012 4

1999-2004

Jay Haze Club Milk, Tokyo, 2003

SLIDE 5

CS10 - UC Berkeley Spring 2012 5

2004-2009

SLIDE 6

CS10 - UC Berkeley Spring 2012 6

2010

SLIDE 7

CS10 - UC Berkeley Spring 2012 7

What is HCI?

SLIDE 8

Human-Computer Interaction (HCI)

Human

End-user of program
Others (friends, collaborators,

coworkers)

Computer

Machine program runs on
Often split: clients & servers

Interaction

User tells the computer

what they want

Computer communicates results

SLIDE 9

User Interfaces (UIs)

Part of application that allows

People to interact with computer
Computer to communicate

results

Can include hardware design

Buttons, sliders, other sensors

HCI = design, prototyping, implementation & evaluation of UIs

htp://www.reactable.com

SLIDE 10

CS10 - UC Berkeley Spring 2012 10

Design Computer Science Applied Psychology

SLIDE 11

CS10 - UC Berkeley Spring 2012 11

Rich Gold, The Plenitude, MIT Press

SLIDE 12

CS10 - UC Berkeley Spring 2012

Iterative Design Cycle

Getting it right the first time is hard!

Design Prototype Evaluate

SLIDE 13

CS10 - UC Berkeley Spring 2012

Understanding Users

Observe existing practices Create scenarios of actual use Build models to gain insight into work processes

13

http://www-personal.umich.edu/~chrisli/m2.html CS247, Stanford, 2006

SLIDE 14

CS10 - UC Berkeley Spring 2012

Prototyping Interfaces

Rapidly build a mockup

f your UI

Low-fidelity techniques:

Paper prototyping Video prototypes

Interactive prototypes:

HTML, Javascript, Flash, ...

14

http://www.balsamiq.com/products/mockups/examples#wiki Moggridge, Designing Interactions, p.704

SLIDE 15

CS10 - UC Berkeley Spring 2012

Storyboarding

SLIDE 16

SLIDE 17

CS10 - UC Berkeley Spring 2012

Evaluation

Formative

Are we building the right thing? What should be different in the next iteration?

Summative

Does it work? Is it better than existing solutions? Can this teach us something about how people

r the world work?

SLIDE 18

CS10 - UC Berkeley Spring 2012 18

Techniques

Analytically, expert walkthroughs, laboratory studies,...

htp://www.laurasmith.info/UsabilityTest.jpg

SLIDE 19

CS10 - UC Berkeley Spring 2012 20

Why study user interfaces?

“The results show that in today's applications, an average of 48% of the code is devoted to the user interface portion. The average time spent on the user interface portion is 45% during the design phase, 50% during the implementation phase, and 37% during the maintenance phase. ” – Myers & Rosson, CHI’92

SLIDE 20

CS10 - UC Berkeley Spring 2012

History

21

SLIDE 21

CS10 - UC Berkeley Spring 2012 22

ENIAC, UPenn, 1946

SLIDE 22

CS10 - UC Berkeley Spring 2012 24

Doug Engelbart & Bill English, SRI, 1963

SLIDE 23

CS10 - UC Berkeley Spring 2012 25

(cc) Flickr user John Chuang http://www.flickr.com/photos/13184584@N08/1362760884/

SLIDE 24

CS10 - UC Berkeley Spring 2012 27

Ivan Sutherland, Sketchpad, MIT, 1963/64

SLIDE 25

CS10 - UC Berkeley Spring 2012 28

SLIDE 26

CS10 - UC Berkeley Spring 2012 29

digibarn.com

SLIDE 27

CS10 - UC Berkeley Spring 2012 30

Earlier today...

SLIDE 28

CS10 - UC Berkeley Spring 2012 31

GRiD Compass in Space (1985)

SLIDE 29

CS10 - UC Berkeley Spring 2012 32

IBM Simon 1992

SLIDE 30

CS10 - UC Berkeley Spring 2012 33

http://www.dipity.com/bjoern/personal

SLIDE 31

CS10 - UC Berkeley Spring 2012

What has changed?

34

“For every ant in the world today, there are 100 transistors. ”

Gordon Moore, 2003

SLIDE 32

CS10 - UC Berkeley Spring 2012 35

SLIDE 33

CS10 - UC Berkeley Spring 2012 36

Era Ratio

Computers:People

HCI Focus

Mainframe Computing 1:many Human Factors Personal Computing 1:1 Psychology, Cog. Science Ubiquitous Computing many:1 Collaboration, Rich Interaction

SLIDE 34

CS10 - UC Berkeley Spring 2012

Research Directions

37

SLIDE 35

CS10 - UC Berkeley Spring 2012 38

(c) Dan O’Sullivan

SLIDE 36

CS10 - UC Berkeley Spring 2012 39

Some saponas / Chris Harrison thing

SLIDE 37

CS10 - UC Berkeley Spring 2012 40

SLIDE 38

CS10 - UC Berkeley Spring 2012 41

SLIDE 39

CS10 - UC Berkeley Spring 2012 42

SLIDE 40

Are you my friend?

yes no

I'like'you I'really'like'you I'kind'of'like'you I'feel'socially'obligated'to'link'to'you I'know'you I'wish'I'knew'you I'like'your'picture You'are'cool I'was'paid'to'link'to'you I'want'your'reflected'glory Everybody'else'links'to'you I’d'vote'for'you We'met'at'a'conference'and'it'seemed'like'the'thing'to'do. Can'I'date'you? I'beat'you'on'Xbox'Live Hi,'Mom I'have'fake'alter'egos

SLIDE 41

SLIDE 42

Zipf / Power Law Distribution

Source: Ed Chi, PARC

SLIDE 43

CS10 - UC Berkeley Spring 2012

HCI Research at Berkeley

46

SLIDE 44

Crowds & Collective Intelligence Design & Development Tools Touch & Physical Computing

SLIDE 45

Crowds & Collective Intelligence Design & Development Tools Touch & Physical Computing

Expertise Sharing Tools (HelpMeOut CHI10, HyperSource CHI11) Multitouch Applications & Toolkits (Eden CHI11, Pictionaire CSCW10, Proton CHI12) Crowd Work Platforms (Shepherd CSCW12, Turkomatic CSCW12) Improved Tutorials (ShowMeHow UIST11, d.mix CHI10) Smarter Code Editors (Stacksplorer UIST11) Prototyping & Manufacturing Tools (d.tools UIST06, Exemplar CHI07, Fabbit) Local Crowd Work (Umati CHI12) Crowd Applications (BribeCaster) Empirical Analyses (Stack Overflow CHI11)

SLIDE 46

Crowds & Collective Intelligence Design & Development Tools Touch & Physical Computing

Multitouch Applications & Toolkits (Eden, Pictionaire, Proton)

SLIDE 47

Supporting Co-Located Design

50

SLIDE 48

51

How might we help design team members manage information more fluidly across digital and physical boundaries ?

Question:

SLIDE 49

52

SLIDE 50

53

SLIDE 51

54

SLIDE 52

CS10 - UC Berkeley Spring 2012

Table Infrastructure

55

SLIDE 53

CS10 - UC Berkeley Spring 2012

The FourBySix Table

56

SLIDE 54

XY Translation Z Translation Arcball Rotation

Object Manipulation

Local Z Rotation World Z Rotation Uniform Scale One-Dimensional Scale Throw-and-Catch

57

SLIDE 55

58

SLIDE 56

Crowds & Collective Intelligence Design & Development Tools Touch & Physical Computing

Local Crowd Work (Umati)

SLIDE 57

CS10 - UC Berkeley Spring 2012 60

SLIDE 58

CS10 - UC Berkeley Spring 2012 61

SLIDE 59

CS10 - UC Berkeley Spring 2012 62

Typical tasks

image labeling comment spam detection business listing verification human OCR

SLIDE 60

CS10 - UC Berkeley Spring 2012 63

Can we crowdsource expert tasks by motivating groups of local experts?

SLIDE 61

CS10 - UC Berkeley Spring 2012 64

SLIDE 62

CS10 - UC Berkeley Spring 2012 65

How about peer grading?

SLIDE 63

CS10 - UC Berkeley Spring 2012 66

SnackShop 4600

SLIDE 64

CS10 - UC Berkeley Spring 2012 67

SLIDE 65

CS10 - UC Berkeley Spring 2012 68

SLIDE 66

CS10 - UC Berkeley Spring 2012 69

SLIDE 67

CS10 - UC Berkeley Spring 2012 70

SLIDE 68

CS10 - UC Berkeley Spring 2012 71

SLIDE 69

CS10 - UC Berkeley Spring 2012 72

1 Week 300+ Unique Users 7500+ Answers Graded $200 of Candy

SLIDE 70

CS10 - UC Berkeley Spring 2012 73

How Good are the Answers?

Gold Standard: 11 Expert Graders (TAs, CS PhD students) Sanity Check: Mechanical Turk (w/ and w/o qualification)

SLIDE 71

CS10 - UC Berkeley Spring 2012 74

Worse than chance (20%)

SLIDE 72

CS10 - UC Berkeley Spring 2012 75

11 Umatiers are better than 1 expert! More Turkers = more noise

SLIDE 73

CS10 - UC Berkeley Spring 2012 76

www.cs.berkeley.edu/~bjoern

SLIDE 74

CS10 - UC Berkeley Spring 2012

Human-Computer Interaction Redux

...is concerned with the design, implementation, and evaluation of user interfaces. Mobile, social & ubiquitous computing: now is an incredibly exciting time to work in HCI! Want more? CS160 User Interface Design Course Thread in Human-Centered Design http://coursethreads.berkeley.edu

77

SLIDE 75

Human-Computer Interaction

My Background

What is HCI?

Human-Computer Interaction (HCI)

User Interfaces (UIs)

Design Computer Science Applied Psychology

Iterative Design Cycle

Understanding Users

Observe existing practices Create scenarios of actual use Build models to gain insight into work processes

Prototyping Interfaces

Rapidly build a mockup

Low-fidelity techniques:

Interactive prototypes:

Storyboarding

Evaluation

Formative

Summative

Why study user interfaces?

History

ENIAC, UPenn, 1946

What has changed?

“For every ant in the world today, there are 100 transistors. ”

Research Directions

Are you my friend?

Zipf / Power Law Distribution

HCI Research at Berkeley

Supporting Co-Located Design

Table Infrastructure

The FourBySix Table

Object Manipulation

Typical tasks

image labeling comment spam detection business listing verification human OCR

Can we crowdsource expert tasks by motivating groups of local experts?

How about peer grading?

SnackShop 4600

1 Week 300+ Unique Users 7500+ Answers Graded $200 of Candy

How Good are the Answers?

Gold Standard: 11 Expert Graders (TAs, CS PhD students) Sanity Check: Mechanical Turk (w/ and w/o qualification)

www.cs.berkeley.edu/~bjoern

Human-Computer Interaction Redux

bjoern@eecs.berkeley.edu www.cs.berkeley.edu/~bjoern