A Brief Introduction to 

Human-Computer Interaction
Presented at Chulalongkorn University Jan 2, 2014

Kanit “Ham” Wongsu...
LifeLine: Kanit “Ham” Wongsuphasawat

LIVE IN

EDUCATION

BANGKOK, THAILAND

B. Comp Eng.
Chulalongkorn
SOFTWARE 

ENGINEE...
I blog at
medium.com/@kanitw

3
Outline
ž What’s HCI + Brief History
ž Design Process, Prototyping and Evaluation
ž HCI Research
ž Study HCI?
ž Q&A

...
Human

Interaction

Computer
Organizational 

& Social Issues

Technology

Design

Task/
Activities

Human

Computer Scien...
Brief History: Personal Computing
Bush - Visionary Memex Machine
“As we may think” bit.ly/aswemaythink

Engelbart - “Augme...
Outline
ž What’s HCI + Brief History
ž Design Process, Prototyping, and Evaluation
ž HCI Research
ž Study HCI?
ž Q&A
...
Design Thinking

A User Centered Design Process

Empathize

8

Define

Ideate

Prototype

Test
Design Thinking

A User Centered Design Process

Empathize

9

Define

Ideate

Prototype

Test
Empathy/Needfinding
Empathize

ž
ž
ž
ž
ž
ž

10

Define

Ethnography
Task Analysis
Interview
Contextual Inquiry
Cultura...
Define Point of View
Empathize

Define

Ideate

Prototype

Goal: Focus
[Users] needs to [User’s need]
because [Surprising In...
Ideate/Brainstorming
Empathize

Define

Ideate

Prototype

Test

Avoid Local Maxima
by Generating
Multiple Ideas
/ Parallel...
Ideate/Brainstorming
Empathize

Define

IDEO Brainstorming Rules
- Be Visual
- Defer Judgement
- Encourage Wild Ideas
- Bui...
Design Thinking
Empathize

Define

Ideate

A prototype is any
representation of a design
idea regardless of medium.
Buxton,...
Various Prototyping Methods
Fidelity
Functional Prototypes
Digital Mock-ups
Paper Prototyping
Storyboarding
Time

15
What Do Prototypes Prototype?

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

17
Paper Prototyping

18
Video Prototyping

Apple’s Knowledge Navigator 

http://youtu.be/QRH8eimU_20
19
Wireframing

20
Parallel Prototyping

21
Evaluation/Test
Empathize

Define

Ideate

Prototype

Test

Evaluation is performed throughout the
iterative process, not j...
Formative: Heuristic Evaluation
ž Visibility of system status
ž Match between system and the real world

3-5 Users is 

...
HE: Show System Status
ž Battery
!

ž Loading
!

ž Space

24
HE: Recognition rather than Recall

25
Formal Evaluation
ž User Studies, Statistical Testing.

Reading: http://bit.ly/doingpsychexp

26
(Free!) HCI Online Course
https://www.coursera.org/course/hci

27
Outline
ž What’s HCI + Brief History
ž Design Process, Prototyping, and Evaluation
ž HCI Research
ž Study HCI?
ž Q&A
...
Build Systems
Understand

29
Major Conferences & Research Areas
ACM CHI Everything HCI
ACM UIST User Interface Software & Technology – aka Technical CH...
UIST: Input
Classic

Modern
Multitouch

Future?

31

Vision/Gesture

Skinput

(Harrison, et al. 2010)
http://youtu.be/g3XP...
UIST: Tools
Sikuli
automate and test
GUIs using
screenshot
images.
!

sikuli.org

32

eBay bid notification with Sikuli
Ubiquitous Computing

Example of Health/Persuasive Technology

Ubifit
Investigating how a ubiquitous, persuasive
technology...
Ubiquitous Computing

Example of Sensing/Smart Home Technology

http://ubicomplab.cs.washington.edu/wiki/HydroSense
34
Social Computing
Building Successful
Online Communities
Kraut & Resnick
http://kraut.hciresearch.org/content/books

35

Se...
Social Computing

GroupLens’ Movies Lens
An example of recommender system research.

36

See grouplens.org
Crowdsourcing

37

marketplace example: mturk.com
Crowdsourcing Example:

Soylent

projects.csail.mit.edu/soylent/

38
Information Visualization

39
Information Visualization

40
Visualization Techniques
TreeMap Example: Map of the market

http://www.marketwatch.com/tools/stockresearch/marketmap

41
Interactive Data Lab
http://idl.cs.washington.edu

!

See Prof. Heer’s overview talk: http://bit.ly/uwjheertalk12
42
Acquisition
Cleaning
Integration
Visualization
Modeling
Presentation
Dissemination
43
Example of our group’s work

d3.js

The world’s most popular visualization API.

more examples: d3js.org, bit.ly/d3visweek...
Important Topics Not Covered Today
ž Human Information Processing Models
ž Direct Manipulation
ž Task Analysis
ž Error...
Other Relevant Research Areas
ž Accessibility
ž Learning Science, Computer Supported Learning
ž Interactive Machine Lea...
Outline
ž What’s HCI + Brief History
ž Design Process, Prototyping, and Evaluation
ž HCI Research
ž Study HCI?
ž Q&A
...
Who studied HCI?
ž Product Managers, Front End Engineer, UI/UX
Designers, User Researchers
ž Famous People

Larry Page

...
Learning more about HCI
ž HCI Online (coursera.com)
ž Read Design of Everyday Things, Sketching User
Experience
ž Watch...
HCI in Graduate Schools
ž Common: Computer Science, Information Science
ž Other:
ž HCI e.g CMU
ž Human-centered Comput...
PhD Programs
ž Are you a builder or an analyst? (not necessarily boolean)
ž Top Places for HCI (IMHO):
ž “Big HCI Schoo...
Masters Program
I don’t have complete info, but here are some good
programs (IMHO):
CMU HCII, Stanford CS/Symsys/LDT, Wash...
Brief Introduction to HCI
ž What’s HCI + Brief History
ž Design Process, Prototyping, and Evaluation
ž HCI Research
ž ...
Upcoming SlideShare
Loading in...5
×

Introduction to Human-Computer Interaction

1,788

Published on

Published in: Technology, Education

Transcript of "Introduction to Human-Computer Interaction"

  1. 1. A Brief Introduction to 
 Human-Computer Interaction Presented at Chulalongkorn University Jan 2, 2014 Kanit “Ham” Wongsuphasawat University of Washington @kanitw, kanitw[at]gmail.com http://kanitw.yellowpigz.com See these slides online: bit.ly/hamintrohci 1
  2. 2. LifeLine: Kanit “Ham” Wongsuphasawat LIVE IN EDUCATION BANGKOK, THAILAND B. Comp Eng. Chulalongkorn SOFTWARE 
 ENGINEERING
 INTERN STANFORD, CA SEATTLE, WA MS. MS&E Stanford SOFTWARE 
 ENGINEER PhD(?) CSE
 U OF Washington RESEARCH INTERN PROFESSIONAL EXPERIENCE MANAGEMENT INTERN SOFTWARE ENGINEERING 
 INTERN (HCI GROUP) TIME See my portfolio at kanitw.yellowpigz.com or bit.ly/knowham 2
  3. 3. I blog at medium.com/@kanitw 3
  4. 4. Outline ž What’s HCI + Brief History ž Design Process, Prototyping and Evaluation ž HCI Research ž Study HCI? ž Q&A ** Many Slides have recommend readings in yellow ** 4
  5. 5. Human Interaction Computer Organizational 
 & Social Issues Technology Design Task/ Activities Human Computer Science + Design + Psychology 5
  6. 6. Brief History: Personal Computing Bush - Visionary Memex Machine “As we may think” bit.ly/aswemaythink Engelbart - “Augmenting Human Intelligence” See “Augmenting Human Intelligence” PARC’s Xerox Star, Apple Macintosh, Microsoft Windows Today: See also “What the dormouse said” (John Markoff) Images from Wikipedia 6
  7. 7. Outline ž What’s HCI + Brief History ž Design Process, Prototyping, and Evaluation ž HCI Research ž Study HCI? ž Q&A 7
  8. 8. Design Thinking
 A User Centered Design Process Empathize 8 Define Ideate Prototype Test
  9. 9. Design Thinking
 A User Centered Design Process Empathize 9 Define Ideate Prototype Test
  10. 10. Empathy/Needfinding Empathize ž ž ž ž ž ž 10 Define Ethnography Task Analysis Interview Contextual Inquiry Cultural Probes Diary Studies Ideate Prototype Test
  11. 11. Define Point of View Empathize Define Ideate Prototype Goal: Focus [Users] needs to [User’s need] because [Surprising Insight] 11 Test
  12. 12. Ideate/Brainstorming Empathize Define Ideate Prototype Test Avoid Local Maxima by Generating Multiple Ideas / Parallel Prototyping 12
  13. 13. Ideate/Brainstorming Empathize Define 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 13 Ideate Prototype Test
  14. 14. Design Thinking Empathize Define Ideate A prototype is any representation of a design idea regardless of medium. Buxton, Sketching User Experiences 14 Prototype Test - Completion not Required - Easy to Change - Gets to Retire
  15. 15. Various Prototyping Methods Fidelity Functional Prototypes Digital Mock-ups Paper Prototyping Storyboarding Time 15
  16. 16. What Do Prototypes Prototype? “What Do Prototypes Prototypes” (Houde & Hill) in Handbook of HCI 1997 16
  17. 17. Storyboard 17
  18. 18. Paper Prototyping 18
  19. 19. Video Prototyping Apple’s Knowledge Navigator 
 http://youtu.be/QRH8eimU_20 19
  20. 20. Wireframing 20
  21. 21. Parallel Prototyping 21
  22. 22. Evaluation/Test Empathize Define Ideate Prototype Test Evaluation is performed throughout the iterative process, not just at the end. 22
  23. 23. Formative: Heuristic Evaluation ž Visibility of system status ž Match between system and the real world 3-5 Users is 
 usually sufficient ž 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 Reading: Norman Nielsen http://bit.ly/nnhe Scott Klemmer’s slide bit.ly/hesrk 23
  24. 24. HE: Show System Status ž Battery ! ž Loading ! ž Space 24
  25. 25. HE: Recognition rather than Recall 25
  26. 26. Formal Evaluation ž User Studies, Statistical Testing. Reading: http://bit.ly/doingpsychexp 26
  27. 27. (Free!) HCI Online Course https://www.coursera.org/course/hci 27
  28. 28. Outline ž What’s HCI + Brief History ž Design Process, Prototyping, and Evaluation ž HCI Research ž Study HCI? ž Q&A 28
  29. 29. Build Systems Understand 29
  30. 30. Major Conferences & Research Areas 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. 30
  31. 31. UIST: Input Classic Modern Multitouch Future? 31 Vision/Gesture Skinput (Harrison, et al. 2010) http://youtu.be/g3XPUdW9Ryg Images from Wikipedia, shuminzhai.com & chrisharrison.net
  32. 32. UIST: Tools Sikuli automate and test GUIs using screenshot images. ! sikuli.org 32 eBay bid notification with Sikuli
  33. 33. Ubiquitous Computing Example of Health/Persuasive Technology 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 See ubicomp.org
  34. 34. Ubiquitous Computing Example of Sensing/Smart Home Technology http://ubicomplab.cs.washington.edu/wiki/HydroSense 34
  35. 35. Social Computing Building Successful Online Communities Kraut & Resnick http://kraut.hciresearch.org/content/books 35 See cscw.acm.org
  36. 36. Social Computing GroupLens’ Movies Lens An example of recommender system research. 36 See grouplens.org
  37. 37. Crowdsourcing 37 marketplace example: mturk.com
  38. 38. Crowdsourcing Example: Soylent projects.csail.mit.edu/soylent/ 38
  39. 39. Information Visualization 39
  40. 40. Information Visualization 40
  41. 41. Visualization Techniques TreeMap Example: Map of the market http://www.marketwatch.com/tools/stockresearch/marketmap 41
  42. 42. Interactive Data Lab http://idl.cs.washington.edu ! See Prof. Heer’s overview talk: http://bit.ly/uwjheertalk12 42
  43. 43. Acquisition Cleaning Integration Visualization Modeling Presentation Dissemination 43
  44. 44. Example of our group’s work d3.js The world’s most popular visualization API. more examples: d3js.org, bit.ly/d3visweek12 44
  45. 45. Important Topics Not Covered Today ž Human Information Processing Models ž Direct Manipulation ž Task Analysis ž Error & User Control ž Visual, Information Design ž Front-end Engineering Patterns e.g. MVC ž Software Tools 45
  46. 46. Other Relevant Research Areas ž Accessibility ž Learning Science, Computer Supported Learning ž Interactive Machine Learning ž Methods, Models, Process ž Information & Communication Technology for Development (ICTD) 46
  47. 47. Outline ž What’s HCI + Brief History ž Design Process, Prototyping, and Evaluation ž HCI Research ž Study HCI? ž Q&A 47
  48. 48. Who studied HCI? ž Product Managers, Front End Engineer, UI/UX Designers, User Researchers ž Famous People 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
  49. 49. Learning more about HCI ž 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 49
  50. 50. HCI in Graduate Schools ž 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 http://en.wikipedia.org/wiki/List_of_schools_offering_interaction_design_programs 50
  51. 51. PhD Programs ž 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 See discussion on Quora: http://qr.ae/Gcmvy 51
  52. 52. Masters Program I don’t have complete info, but here are some good programs (IMHO): CMU HCII, Stanford CS/Symsys/LDT, Washington HCID, HCDE, GATech HCC, Berkeley EECS, Cornell iSchool, UMich iSchool, MIT Medialab, UMD CS & iSchool, UIUC CS 52 Note: There are new programs every few years See discussion on Quora: http://qr.ae/Gcmvy
  53. 53. Brief Introduction to HCI ž What’s 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/hamintrohci 53

×