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. 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. I blog at
medium.com/@kanitw
3

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. Human
Interaction
Computer
Organizational
& Social Issues
Technology
Design
Task/
Activities
Human
Computer Science + Design + Psychology
5

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. Outline
ž What’s HCI + Brief History
ž Design Process, Prototyping, and Evaluation
ž HCI Research
ž Study HCI?
ž Q&A
7

8. Design Thinking
A User Centered Design Process
Empathize
8
Define
Ideate
Prototype
Test

9. Design Thinking
A User Centered Design Process
Empathize
9
Define
Ideate
Prototype
Test

10. Empathy/Needfinding
Empathize
ž
ž
ž
ž
ž
ž
10
Define
Ethnography
Task Analysis
Interview
Contextual Inquiry
Cultural Probes
Diary Studies
Ideate
Prototype
Test

11. Define Point of View
Empathize
Define
Ideate
Prototype
Goal: Focus
[Users] needs to [User’s need]
because [Surprising Insight]
11
Test

12. Ideate/Brainstorming
Empathize
Define
Ideate
Prototype
Test
Avoid Local Maxima
by Generating
Multiple Ideas
/ Parallel Prototyping
12

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. 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. Various Prototyping Methods
Fidelity
Functional Prototypes
Digital Mock-ups
Paper Prototyping
Storyboarding
Time
15

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

17. Storyboard
17

18. Paper Prototyping
18

19. Video Prototyping
Apple’s Knowledge Navigator
http://youtu.be/QRH8eimU_20
19

20. Wireframing
20

21. Parallel Prototyping
21

22. Evaluation/Test
Empathize
Define
Ideate
Prototype
Test
Evaluation is performed throughout the
iterative process, not just at the end.
22

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. HE: Show System Status
ž Battery
!
ž Loading
!
ž Space
24

25. HE: Recognition rather than Recall
25

26. Formal Evaluation
ž User Studies, Statistical Testing.
Reading: http://bit.ly/doingpsychexp
26

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

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

29. Build Systems
Understand
29

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. 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. UIST: Tools
Sikuli
automate and test
GUIs using
screenshot
images.
!
sikuli.org
32
eBay bid notification with Sikuli

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. Ubiquitous Computing
Example of Sensing/Smart Home Technology
http://ubicomplab.cs.washington.edu/wiki/HydroSense
34

35. Social Computing
Building Successful
Online Communities
Kraut & Resnick
http://kraut.hciresearch.org/content/books
35
See cscw.acm.org

36. Social Computing
GroupLens’ Movies Lens
An example of recommender system research.
36
See grouplens.org

37. Crowdsourcing
37
marketplace example: mturk.com

38. Crowdsourcing Example:
Soylent
projects.csail.mit.edu/soylent/
38

39. Information Visualization
39

40. Information Visualization
40

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

42. Interactive Data Lab
http://idl.cs.washington.edu
!
See Prof. Heer’s overview talk: http://bit.ly/uwjheertalk12
42

43. Acquisition
Cleaning
Integration
Visualization
Modeling
Presentation
Dissemination
43

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. 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. Other Relevant Research Areas
ž Accessibility
ž Learning Science, Computer Supported Learning
ž Interactive Machine Learning
ž Methods, Models, Process
ž Information & Communication Technology for
Development (ICTD)
46

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

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. 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. 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. 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. 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. 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