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

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

My Background CS10 - UC Berkeley Spring 2012 2

1997-2002 UPenn- NOT in Computer Science (cc) SnapsterMax CS10 - UC Berkeley Spring 2012 3 http://www.flickr.com/photos/myworldinpixels/558060045

1999-2004 Jay Haze Club Milk, Tokyo, 2003 CS10 - UC Berkeley Spring 2012 4

2004-2009 CS10 - UC Berkeley Spring 2012 5

2010 CS10 - UC Berkeley Spring 2012 6

What is HCI? CS10 - UC Berkeley Spring 2012 7

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

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 & h t p://www.reactable.com evaluation of UIs

Design Computer Science Applied Psychology CS10 - UC Berkeley Spring 2012 10

Rich Gold, The Plenitude , MIT Press CS10 - UC Berkeley Spring 2012 11

Iterative Design Cycle Design Evaluate Prototype Getting it right the first time is hard! CS10 - UC Berkeley Spring 2012

Understanding Users Observe existing practices Create scenarios of actual use CS247, Stanford, 2006 Build models to gain insight into work processes http://www-personal.umich.edu/~chrisli/m2.html CS10 - UC Berkeley Spring 2012 13

Prototyping Interfaces Rapidly build a mockup of your UI Low-fidelity techniques: Paper prototyping Video prototypes Moggridge, Designing Interactions, p.704 Interactive prototypes: HTML, Javascript, Flash, ... http://www.balsamiq.com/products/mockups/examples#wiki CS10 - UC Berkeley Spring 2012 14

Storyboarding 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 or the world work? CS10 - UC Berkeley Spring 2012

h t p://www.laurasmith.info/UsabilityTest.jpg Techniques Analytically, expert walkthroughs, laboratory studies,... CS10 - UC Berkeley Spring 2012 18

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 CS10 - UC Berkeley Spring 2012 20

History CS10 - UC Berkeley Spring 2012 21

ENIAC, UPenn, 1946 CS10 - UC Berkeley Spring 2012 22

Doug Engelbart & Bill English, SRI, 1963 CS10 - UC Berkeley Spring 2012 24

(cc) Flickr user John Chuang http://www.flickr.com/photos/13184584@N08/1362760884/ CS10 - UC Berkeley Spring 2012 25

Ivan Sutherland, Sketchpad, MIT, 1963/64 CS10 - UC Berkeley Spring 2012 27

CS10 - UC Berkeley Spring 2012 28

digibarn.com CS10 - UC Berkeley Spring 2012 29

Earlier today... CS10 - UC Berkeley Spring 2012 30

GRiD Compass in Space (1985) CS10 - UC Berkeley Spring 2012 31

IBM Simon 1992 CS10 - UC Berkeley Spring 2012 32

http://www.dipity.com/bjoern/personal CS10 - UC Berkeley Spring 2012 33

What has changed? “For every ant in the world today, there are 100 transistors. ” - Gordon Moore, 2003 CS10 - UC Berkeley Spring 2012 34

Ratio Era HCI Focus Computers:People Mainframe 1:many Human Factors Computing Personal Psychology, Cog. 1:1 Computing Science Ubiquitous Collaboration, Rich many:1 Computing Interaction CS10 - UC Berkeley Spring 2012 36

Research Directions CS10 - UC Berkeley Spring 2012 37

(c) Dan O’Sullivan CS10 - UC Berkeley Spring 2012 38

Some saponas / Chris Harrison thing CS10 - UC Berkeley Spring 2012 39

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 Can'I'date'you? Are you my friend? We'met'at'a'conference'and'it'seemed'like'the'thing'to'do. yes no I'kind'of'like'you I'like'you I'really'like'you I'feel'socially'obligated'to'link'to'you I'know'you I'beat'you'on'Xbox'Live Hi,'Mom I'have'fake'alter'egos

Zipf / Power Law Distribution Source: Ed Chi, PARC

HCI Research at Berkeley CS10 - UC Berkeley Spring 2012 46

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

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

Crowds & Collective Intelligence Design & Touch & Development Physical Tools Computing Multitouch Applications & Toolkits (Eden, Pictionaire, Proton)

Supporting Co-Located Design 50

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

Table Infrastructure CS10 - UC Berkeley Spring 2012 55

The FourBySix Table CS10 - UC Berkeley Spring 2012 56

Object Manipulation XY World Z Translation Rotation Z Translation Uniform Scale One-Dimensional Arcball Scale Rotation Throw-and-Catch Local Z Rotation 57

Crowds & Collective Intelligence Local Crowd Work (Umati) Design & Touch & Development Physical Tools Computing

Typical tasks image labeling comment spam detection business listing verification human OCR CS10 - UC Berkeley Spring 2012 62

Can we crowdsource expert tasks by motivating groups of local experts? CS10 - UC Berkeley Spring 2012 63

How about peer grading? CS10 - UC Berkeley Spring 2012 65

SnackShop 4600 CS10 - UC Berkeley Spring 2012 66

1 Week 300+ Unique Users 7500+ Answers Graded $200 of Candy CS10 - UC Berkeley Spring 2012 72

How Good are the Answers? Gold Standard: 11 Expert Graders (TAs, CS PhD students) Sanity Check: Mechanical Turk (w/ and w/o qualification) CS10 - UC Berkeley Spring 2012 73

Worse than chance (20%) CS10 - UC Berkeley Spring 2012 74

11 Umatiers are better than 1 expert! More Turkers = more noise CS10 - UC Berkeley Spring 2012 75

www.cs.berkeley.edu/~bjoern CS10 - UC Berkeley Spring 2012 76

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 CS10 - UC Berkeley Spring 2012 77

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

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

Human-Computer Interaction Bjrn Hartmann University of California, Berkeley EECS, Computer Science Division CS10, Spring 2012 My Background CS10 - UC Berkeley Spring 2012 2 1997-2002 UPenn- NOT in Computer Science (cc) SnapsterMax

Scientific domain Human-Computer Interaction Interaction Computer science Supported by

Chris Snijders - Irrelevant private stuff 2 Chris Snijders @Dagstuhl The models themselves

Human-Computer Interaction 2. Termin: Design basics & the human MMI/SS05 1 What is

Human-Computer Interaction Butz, Krger: Human-Computer Interaction, chapter 16: Web UIs slide

CS 102 Human-Computer Interaction 1 CS102: Monsoon 2015 About this course Introductory course

On Human Computer Interaction, HCI Dr. Saif al Zahir Electrical and Computer Engineering

Trade-Offs in Human-AI Interaction Human-AI Interaction Luigi De Russis Academic Year 2019/2020

Fundamentals of Human-Computer Interaction Introduction History Psychology 101 Graphical

OBSERVING INTERACTION human-computer interaction CSE 440 WINTER 2015 University of FEB 12 -

Lecture 7 Interaction Fundamentals Mark Woehrer CS 3053 - Human-Computer Interaction

EECS 4441 Human-Computer Interaction Topic #3a: The Interaction Steven Castellucci York

Human-Computer Interaction Termin 9: Spoken Language Interaction MMI/SS06 The evolution of user

HCI/CHI: Computer-Human Interaction Who knows best what users want/expect in a GUI

MMI 2: Mobile Human- Computer Interaction Visualization and Interaction Techniques for Small

CHCI Center for Human-Computer Interaction The Co-Production Imperative John M. Carroll

Human Computer Interaction Laboratory UN UNIVERSITY OF OF CR CRETE DE DEPARTM TMENT T

CrashAlert Alertness for Eyes- Busy Interaction while Walking Human-Computer Interaction Lab

EECS 4441 Human-Computer Interaction Topic #2: The Human I. Scott MacKenzie York University,

Human-Computer Interaction Center Dr. Andr Calero Valdez Lehrstuhl fr Communication Science

MMI 2: Mobile Human- Computer Interaction Small and Large Display Interaction Prof. Dr. Michael

Crowdsourcing and Human Computer Interaction Design Crowdsourcing and Human Computation

Human-Computer Interaction 4. Human models Dr. Sunyoung Kim School of Communication &

MMI 2: Mobile Human- Computer Interaction Sensor-Based Mobile Interaction Prof. Dr. Michael

CS262: Computer Vision (and Human-Computer Interaction) John Magee 1 Computer Vision How are

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

Human-Computer Interaction Bjrn Hartmann University of California, Berkeley EECS, Computer Science Division CS10, Spring 2012 My Background CS10 - UC Berkeley Spring 2012 2 1997-2002 UPenn- NOT in Computer Science (cc) SnapsterMax

Scientific domain Human-Computer Interaction Interaction Computer science Supported by

Chris Snijders - Irrelevant private stuff 2 Chris Snijders @Dagstuhl The models themselves

Human-Computer Interaction 2. Termin: Design basics &amp; the human MMI/SS05 1 What is

Human-Computer Interaction Butz, Krger: Human-Computer Interaction, chapter 16: Web UIs slide

CS 102 Human-Computer Interaction 1 CS102: Monsoon 2015 About this course Introductory course

On Human Computer Interaction, HCI Dr. Saif al Zahir Electrical and Computer Engineering

Trade-Offs in Human-AI Interaction Human-AI Interaction Luigi De Russis Academic Year 2019/2020

Fundamentals of Human-Computer Interaction Introduction History Psychology 101 Graphical

OBSERVING INTERACTION human-computer interaction CSE 440 WINTER 2015 University of FEB 12 -

Lecture 7 Interaction Fundamentals Mark Woehrer CS 3053 - Human-Computer Interaction

EECS 4441 Human-Computer Interaction Topic #3a: The Interaction Steven Castellucci York

Human-Computer Interaction Termin 9: Spoken Language Interaction MMI/SS06 The evolution of user

HCI/CHI: Computer-Human Interaction Who knows best what users want/expect in a GUI

MMI 2: Mobile Human- Computer Interaction Visualization and Interaction Techniques for Small

CHCI Center for Human-Computer Interaction The Co-Production Imperative John M. Carroll

Human Computer Interaction Laboratory UN UNIVERSITY OF OF CR CRETE DE DEPARTM TMENT T

CrashAlert Alertness for Eyes- Busy Interaction while Walking Human-Computer Interaction Lab

EECS 4441 Human-Computer Interaction Topic #2: The Human I. Scott MacKenzie York University,

Human-Computer Interaction Center Dr. Andr Calero Valdez Lehrstuhl fr Communication Science

MMI 2: Mobile Human- Computer Interaction Small and Large Display Interaction Prof. Dr. Michael

Crowdsourcing and Human Computer Interaction Design Crowdsourcing and Human Computation

Human-Computer Interaction 4. Human models Dr. Sunyoung Kim School of Communication &amp;

MMI 2: Mobile Human- Computer Interaction Sensor-Based Mobile Interaction Prof. Dr. Michael

CS262: Computer Vision (and Human-Computer Interaction) John Magee 1 Computer Vision How are

Human-Computer Interaction 2. Termin: Design basics & the human MMI/SS05 1 What is

Human-Computer Interaction 4. Human models Dr. Sunyoung Kim School of Communication &