Intro to Human Computer Interaction
-
Upload
kanit-wongsuphasasawat -
Category
Documents
-
view
120 -
download
2
description
Transcript of 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
Empathize Define Ideate Prototype Test
-
Empathy/Needfinding
10
Empathize Define Ideate Prototype Test
Ethnography Task Analysis Interview Contextual Inquiry Cultural Probes Diary Studies
-
Define Point of View
11
Empathize Define Ideate Prototype Test
[Users] needs to [Users need] because [Surprising Insight]
Goal: Focus
-
Ideate/Brainstorming
12
Empathize Define Ideate Prototype Test
Avoid Local Maxima by Generating Multiple Ideas / Parallel Prototyping
-
Ideate/Brainstorming
13
Empathize Define 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 Define 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?
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
Empathize Define 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 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
-
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: 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
-
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_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