![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](https://image.slidesharecdn.com/intro-to-hci-140101210550-phpapp02/75/Introduction-to-Human-Computer-Interaction-1-2048.jpg)
![Define Point of View
Empathize
Define
Ideate
Prototype
Goal: Focus
[Users] needs to [User’s need]
because [Surprising Insight]
11
Test](https://image.slidesharecdn.com/intro-to-hci-140101210550-phpapp02/75/Introduction-to-Human-Computer-Interaction-11-2048.jpg)
![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](https://image.slidesharecdn.com/intro-to-hci-140101210550-phpapp02/75/Introduction-to-Human-Computer-Interaction-53-2048.jpg)
Uploaded byKanit Ham Wongsuphasawat
Introduction to Human-Computer Interaction
This document provides an introduction to human-computer interaction (HCI) presented by Kanit "Ham" Wongsuphasawat. It outlines the key topics covered in the presentation including a brief history of HCI, the user-centered design process involving prototyping and evaluation, areas of HCI research such as input methods and ubiquitous computing, and opportunities to study HCI in graduate programs. The presentation aims to give attendees an overview of the field of HCI.
More Related Content
Similar to Introduction to Human-Computer Interaction
Introduction to Human-Computer Interaction
- 1. A Brief Introductionto 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.
- 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 & SocialIssues Technology Design Task/ Activities Human Computer Science + Design + Psychology 5
- 6. Brief History: PersonalComputing 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 UserCentered Design Process Empathize 8 Define Ideate Prototype Test
- 9. Design Thinking A UserCentered Design Process Empathize 9 Define Ideate Prototype Test
- 10. Empathy/Needfinding Empathize ž ž ž ž ž ž 10 Define Ethnography Task Analysis Interview Contextual Inquiry CulturalProbes Diary Studies Ideate Prototype Test
- 11. Define Point ofView 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 byGenerating 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 prototypeis 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 FunctionalPrototypes Digital Mock-ups Paper Prototyping Storyboarding Time 15
- 16. What Do PrototypesPrototype? “What Do Prototypes Prototypes” (Houde & Hill) in Handbook of HCI 1997 16
- 17.
- 18.
- 19. Video Prototyping Apple’s KnowledgeNavigator http://youtu.be/QRH8eimU_20 19
- 20.
- 21.
- 22. Evaluation/Test Empathize Define Ideate Prototype Test Evaluation is performedthroughout 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 SystemStatus ž Battery ! ž Loading ! ž Space 24
- 25. HE: Recognition ratherthan Recall 25
- 26. Formal Evaluation ž UserStudies, Statistical Testing. Reading: http://bit.ly/doingpsychexp 26
- 27. (Free!) HCI OnlineCourse 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.
- 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, etal. 2010) http://youtu.be/g3XPUdW9Ryg Images from Wikipedia, shuminzhai.com & chrisharrison.net
- 32. UIST: Tools Sikuli automate andtest GUIs using screenshot images. ! sikuli.org 32 eBay bid notification with Sikuli
- 33. Ubiquitous Computing Example ofHealth/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 ofSensing/Smart Home Technology http://ubicomplab.cs.washington.edu/wiki/HydroSense 34
- 35. Social Computing Building Successful OnlineCommunities Kraut & Resnick http://kraut.hciresearch.org/content/books 35 See cscw.acm.org
- 36. Social Computing GroupLens’ MoviesLens An example of recommender system research. 36 See grouplens.org
- 37.
- 38.
- 39.
- 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 ! SeeProf. Heer’s overview talk: http://bit.ly/uwjheertalk12 42
- 43.
- 44. Example of ourgroup’s work d3.js The world’s most popular visualization API. more examples: d3js.org, bit.ly/d3visweek12 44
- 45. Important Topics NotCovered 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 ResearchAreas ž 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 aboutHCI ž 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 GraduateSchools ž 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 ž Areyou 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’thave 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 toHCI ž 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