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/hamintrohci
1
SEATTLE, WA STANFORD, 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(?) CSE
U OF Washington
BANGKOK, THAILAND
MS. MS&E
Stanford
PROFESSIONAL
EXPERIENCE
SOFTWARE
ENGINEER
RESEARCH INTERN
SOFTWARE ENGINEERING
INTERN (HCI GROUP)
MANAGEMENT INTERN
SOFTWARE
ENGINEERING
INTERN
3
I blog at
medium.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 Computer
Interaction
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 Wikipedia
See 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 Thinking
A User Centered Design Process
8
Empathize Dene Ideate Prototype Test
Design Thinking
A User Centered Design Process
9
Empathize Dene Ideate Prototype Test
Empathy/Neednding
10
Empathize Dene Ideate Prototype Test
! Ethnography
! Task Analysis
! Interview
! Contextual Inquiry
! Cultural Probes
! Diary Studies
Dene Point of View
11
Empathize Dene Ideate Prototype Test
[Users] needs to [Users need]
because [Surprising Insight]
Goal: Focus
Ideate/Brainstorming
12
Empathize Dene Ideate Prototype Test
Avoid Local Maxima
by Generating
Multiple Ideas
/ Parallel Prototyping
Ideate/Brainstorming
13
Empathize Dene Ideate Prototype Test
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
Empathize Dene Ideate Prototype Test
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?
16
What 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
Empathize Dene Ideate Prototype Test
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 efciency of use
! Aesthetic and minimalist design
! Help users recognize, diagnose, and recover from errors
! Help and documentation
Formative: Heuristic Evaluation
23
Reading: Norman Nielsen http://bit.ly/nnhe Scott Klemmers slide bit.ly/hesrk
3-5 Users is
usually sufcient
! 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 Course
https://www.coursera.org/course/hci
27
! Whats HCI + Brief History
! Design Process, Prototyping, and Evaluation
! HCI Research
! Study HCI?
! Q&A
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: Input
Classic
Images from Wikipedia, shuminzhai.com & chrisharrison.net
Modern
Future?
Multitouch
Skinput
(Harrison, et al. 2010)
http://youtu.be/g3XPUdW9Ryg
Vision/Gesture
31
UIST: Tools
Sikuli
automate and test
GUIs using
screenshot
images.

sikuli.org
eBay bid notication with Sikuli
32
Ubiquitous Computing
Example of Health/Persuasive Technology
See ubicomp.org
Ubit
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/ubit
33
Ubiquitous Computing
Example 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 Techniques
TreeMap 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
Dissemination
43
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
! Whats HCI + Brief History
! Design Process, Prototyping, and Evaluation
! HCI Research
! Study HCI?
! Q&A
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_programs
50
! 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/Gcmvy
51
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/Gcmvy
52
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/hamintrohci
53