Intro to Human Computer Interaction

A Brief Introduction to Human-Computer Interaction

Kanit Ham Wongsuphasawat University of Washington @kanitw, kanitw[at]gmail.com http://kanitw.yellowpigz.com

Presented at Chulalongkorn University Jan 2, 2014

See these slides online: bit.ly/hamintrohci1

SEATTLE, WASTANFORD, CA

2

B. Comp Eng. Chulalongkorn

See my portfolio at kanitw.yellowpigz.com or bit.ly/knowham

LifeLine: Kanit Ham Wongsuphasawat

EDUCATION

TIME

LIVE IN

PhD(?) CSEU OF Washington

BANGKOK, THAILAND

MS. MS&E Stanford

PROFESSIONAL EXPERIENCE

SOFTWARE ENGINEER

RESEARCH INTERN

SOFTWARE ENGINEERING INTERN (HCI GROUP)MANAGEMENT INTERN

SOFTWARE ENGINEERINGINTERN

3

I blog atmedium.com/@kanitw

Outline Whats HCI + Brief History Design Process, Prototyping and Evaluation HCI Research Study HCI? Q&A

** Many Slides have recommend readings in yellow **4

Human ComputerInteraction

Computer Science + Design + Psychology

Task/ Activities Human

Technology

Design

Organizational & Social Issues

5

Bush - Visionary Memex Machine

Engelbart - Augmenting Human Intelligence

PARCs Xerox Star, Apple Macintosh, Microsoft Windows

Brief History: Personal Computing

6

As we may think bit.ly/aswemaythink

See Augmenting Human Intelligence

Today:

Images from WikipediaSee also What the dormouse said (John Markoff)

Whats HCI + Brief History Design Process, Prototyping, and Evaluation HCI Research Study HCI? Q&A

Outline

7

Design ThinkingA User Centered Design Process

8

Empathize Define Ideate Prototype Test

Design ThinkingA User Centered Design Process

9


Empathy/Needfinding

10


Ethnography Task Analysis Interview Contextual Inquiry Cultural Probes Diary Studies

Define Point of View

11


[Users] needs to [Users need] because [Surprising Insight]

Goal: Focus

Ideate/Brainstorming

12


Avoid Local Maxima by Generating Multiple Ideas / Parallel Prototyping

Ideate/Brainstorming

13


IDEO Brainstorming Rules- Be Visual - Defer Judgement - Encourage Wild Ideas - Build on the Ideas of Others - Go for Quantity - One Conversation at a time - Stay focused on the topic

Design Thinking

14


A prototype is any representation of a design idea regardless of medium. Buxton, Sketching User Experiences

- Completion not Required - Easy to Change - Gets to Retire

Various Prototyping Methods

15

Storyboarding

Paper Prototyping

Digital Mock-ups

Fidelity

Time

Functional Prototypes

What Do Prototypes Prototype?

16What Do Prototypes Prototypes (Houde & Hill) in Handbook of HCI 1997

Storyboard

17

Paper Prototyping

18

19

Apples Knowledge Navigator http://youtu.be/QRH8eimU_20

Video Prototyping

Wireframing

20

Parallel Prototyping

21

Evaluation/Test

22


Evaluation is performed throughout the iterative process, not just at the end.

Visibility of system status Match between system and the real world User control and freedom Consistency and standards Error prevention Recognition rather than recall Flexibility and efficiency of use Aesthetic and minimalist design Help users recognize, diagnose, and recover from errors Help and documentation

Formative: Heuristic Evaluation

23Reading: Norman Nielsen http://bit.ly/nnhe Scott Klemmers slide bit.ly/hesrk

3-5 Users is usually sufficient

Battery !

Loading !

Space

HE: Show System Status

24

HE: Recognition rather than Recall

25

User Studies, Statistical Testing.

Formal Evaluation

Reading: http://bit.ly/doingpsychexp

26

(Free!) HCI Online Coursehttps://www.coursera.org/course/hci

27


Outline

28

Build Systems

Understand

29

ACM CHI Everything HCI ACM UIST User Interface Software & Technology aka Technical CHI/HCI IEEE VIS Information Visualization, Visual Analytics IEEE Ubicomp Ubiquitous/Pervasive Computing ACM CSCW Computer Supported Cooperative Work (Social Computing) !Other: ACCESS Accessiblity, IUI Intelligent User Interfaces, HComp Human Computation, AVI Advance Visual Interfaces, IxD Interaction Design, DIS Designing Interactive Systems, etc.

Major Conferences & Research Areas

30

UIST: InputClassic

Images from Wikipedia, shuminzhai.com & chrisharrison.net

Modern

Future?

Multitouch

Skinput (Harrison, et al. 2010) http://youtu.be/g3XPUdW9Ryg

Vision/Gesture

31

UIST: ToolsSikuli automate and test GUIs using screenshot images. !sikuli.org

eBay bid notification with Sikuli32

Ubiquitous ComputingExample of Health/Persuasive Technology

See ubicomp.org

Ubifit Investigating how a ubiquitous, persuasive technology system can encourage individuals to incorporate regular and varied physical activity into their everyday lives !http://dub.washington.edu/projects/ubifit

33

Ubiquitous ComputingExample of Sensing/Smart Home Technology

34

http://ubicomplab.cs.washington.edu/wiki/HydroSense

Social Computing

See cscw.acm.org

Building Successful Online Communities Kraut & Resnick

35

http://kraut.hciresearch.org/content/books

Social Computing

See grouplens.org

GroupLens Movies Lens An example of recommender system research.

36

Crowdsourcing marketplace example: mturk.com

37

Crowdsourcing Example: Soylent

38

projects.csail.mit.edu/soylent/

Information Visualization

39

Information Visualization

40

Visualization TechniquesTreeMap Example: Map of the market http://www.marketwatch.com/tools/stockresearch/marketmap

41

Interactive Data Lab

!See Prof. Heers overview talk: http://bit.ly/uwjheertalk12

http://idl.cs.washington.edu

42

Acquisition

Cleaning

Integration

Modeling

Visualization

Presentation

Dissemination43

Example of our groups work d3.js The worlds most popular visualization API.more examples: d3js.org, bit.ly/d3visweek12

44

Human Information Processing Models Direct Manipulation Task Analysis Error & User Control Visual, Information Design Front-end Engineering Patterns e.g. MVC Software Tools

Important Topics Not Covered Today

45

Accessibility Learning Science, Computer Supported Learning Interactive Machine Learning Methods, Models, Process Information & Communication Technology for

Development (ICTD)

Other Relevant Research Areas

46


Outline

47

Product Managers, Front End Engineer, UI/UX Designers, User Researchers

Famous People

Who studied HCI?

Larry Page Founder/CEO Google

Marissa Mayer Yahoo CEO

Mike Krieger Instagram Founder

**HCI is currently the most popular undergraduate track in Computer Science at Stanford! **

48

HCI Online (coursera.com) Read Design of Everyday Things, Sketching User

Experience Watch Videos

Seminars: cs547.stanford.edu, dub.washington.edu Job Talks of new professors

research.microsoft.com/apps/catalog/default.aspx?t=videos https://www.cs.washington.edu/events/colloquia

Read Classic Papers

Learning more about HCI

49

Common: Computer Science, Information Science Other:

HCI e.g CMU Human-centered Computing/Engineering e.g. UW HCDE, GATech

HCC Cognitive Science e.g. UCSD, Symbolic System e.g. Stanford, MIT

MediaLab Psychology, Communication e.g. NYU ITP, Education/Learning

Science e.g. Stanford LST, Design e.g. CMU, UW

HCI in Graduate Schools

http://en.wikipedia.org/wiki/List_of_schools_offering_interaction_design_programs50

Are you a builder or an analyst? (not necessarily boolean) Top Places for HCI (IMHO):

Big HCI School: Washington CSE, iSchool, HCDE CMU HCII, GATech HCC

Top Ranked CS with smaller HCI group(s): Berkeley EECS & iSchool, Stanford CS, MIT EECS

MIT Medialab, Cornell InfoSci, UCSD CogSci, UMich iSchool, UMD CS & iSchool, UIUC CS, Toronto CS, UC Irvine ICS

PhD Programs

See discussion on Quora: http://qr.ae/Gcmvy51

I dont have complete info, but here are some good programs (IMHO): CMU HCII, Stanford CS/Symsys/LDT, Washington HCI-D, HCDE, GATech HCC, Berkeley EECS, Cornell iSchool, UMich iSchool, MIT Medialab, UMD CS & iSchool, UIUC CS

Masters Program

Note: There are new programs every few years See discussion on Quora: http://qr.ae/Gcmvy52

Brief Introduction to HCI Whats HCI + Brief History Design Process, Prototyping, and Evaluation HCI Research Study HCI?

Q&A

Kanit Ham Wongsuphasawat @kanitw, kanitw[at]gmail.com http://kanitw.yellowpigz.com

See these slides online: bit.ly/hamintrohci53

Documents

Intro to Human Computer Interaction