A Brief Introduction to
Human-Computer Interaction
Kanit Ham Wongsuphasawat
University of Washington
@kanitw, kanitw[at][Link]
[Link]
Presented at Chulalongkorn University Jan 2, 2014
See these slides online: [Link]/hamintrohci
1
SEATTLE, WA STANFORD, CA
2
B. Comp Eng.
Chulalongkorn
See my portfolio at [Link] or [Link]/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
[Link]/@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 [Link]/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
[Link]
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 [Link] Scott Klemmers slide [Link]/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: [Link]
26
(Free!) HCI Online Course
[Link]
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, [Link] & [Link]
Modern
Future?
Multitouch
Skinput
(Harrison, et al. 2010)
[Link]
Vision/Gesture
31
UIST: Tools
Sikuli
automate and test
GUIs using
screenshot
images.
[Link]
eBay bid notication with Sikuli
32
Ubiquitous Computing
Example of Health/Persuasive Technology
See [Link]
Ubit
Investigating how a ubiquitous, persuasive
technology system can encourage individuals to
incorporate regular and varied physical activity
into their everyday lives
[Link]
33
Ubiquitous Computing
Example of Sensing/Smart Home Technology
34
[Link]
Social Computing
See [Link]
Building Successful
Online Communities
Kraut & Resnick
35
[Link]
Social Computing
See [Link]
GroupLens Movies Lens
An example of recommender system research.
36
Crowdsourcing marketplace example: [Link]
37
Crowdsourcing Example:
Soylent
38
[Link]/soylent/
Information Visualization
39
Information Visualization
40
Visualization Techniques
TreeMap Example: Map of the market
[Link]
41
Interactive Data Lab
See Prof. Heers overview talk: [Link]
[Link]
42
Acquisition
Cleaning
Integration
Modeling
Visualization
Presentation
Dissemination
43
Example of our groups work
[Link] The worlds most popular visualization API.
more examples: [Link], [Link]/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 ([Link])
! Read Design of Everyday Things, Sketching User
Experience
! Watch Videos
! Seminars: [Link], [Link]
! Job Talks of new professors
! [Link]/apps/catalog/[Link]?t=videos
! [Link]
! 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
[Link]
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: [Link]
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: [Link]
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][Link]
[Link]
See these slides online: [Link]/hamintrohci
53
