Introduction to Human-Computer Interaction


Published on

Published in: Technology, Education

Introduction to Human-Computer Interaction

  1. 1. A Brief Introduction to 
 Human-Computer Interaction Presented at Chulalongkorn University Jan 2, 2014 Kanit “Ham” Wongsuphasawat University of Washington @kanitw, kanitw[at] See these slides online: 1
  2. 2. LifeLine: Kanit “Ham” Wongsuphasawat LIVE IN EDUCATION BANGKOK, THAILAND B. Comp Eng. Chulalongkorn SOFTWARE 
 INTERN (HCI GROUP) TIME See my portfolio at or 2
  3. 3. I blog at 3
  4. 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. 5. Human Interaction Computer Organizational 
 & Social Issues Technology Design Task/ Activities Human Computer Science + Design + Psychology 5
  6. 6. Brief History: Personal Computing Bush - Visionary Memex Machine “As we may think” 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. 7. Outline ž What’s HCI + Brief History ž Design Process, Prototyping, and Evaluation ž HCI Research ž Study HCI? ž Q&A 7
  8. 8. Design Thinking
 A User Centered Design Process Empathize 8 Define Ideate Prototype Test
  9. 9. Design Thinking
 A User Centered Design Process Empathize 9 Define Ideate Prototype Test
  10. 10. Empathy/Needfinding Empathize ž ž ž ž ž ž 10 Define Ethnography Task Analysis Interview Contextual Inquiry Cultural Probes Diary Studies Ideate Prototype Test
  11. 11. Define Point of View Empathize Define Ideate Prototype Goal: Focus [Users] needs to [User’s need] because [Surprising Insight] 11 Test
  12. 12. Ideate/Brainstorming Empathize Define Ideate Prototype Test Avoid Local Maxima by Generating Multiple Ideas / Parallel Prototyping 12
  13. 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. 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. 15. Various Prototyping Methods Fidelity Functional Prototypes Digital Mock-ups Paper Prototyping Storyboarding Time 15
  16. 16. What Do Prototypes Prototype? “What Do Prototypes Prototypes” (Houde & Hill) in Handbook of HCI 1997 16
  17. 17. Storyboard 17
  18. 18. Paper Prototyping 18
  19. 19. Video Prototyping Apple’s Knowledge Navigator 19
  20. 20. Wireframing 20
  21. 21. Parallel Prototyping 21
  22. 22. Evaluation/Test Empathize Define Ideate Prototype Test Evaluation is performed throughout the iterative process, not just at the end. 22
  23. 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 Scott Klemmer’s slide 23
  24. 24. HE: Show System Status ž Battery ! ž Loading ! ž Space 24
  25. 25. HE: Recognition rather than Recall 25
  26. 26. Formal Evaluation ž User Studies, Statistical Testing. Reading: 26
  27. 27. (Free!) HCI Online Course 27
  28. 28. Outline ž What’s HCI + Brief History ž Design Process, Prototyping, and Evaluation ž HCI Research ž Study HCI? ž Q&A 28
  29. 29. Build Systems Understand 29
  30. 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. 31. UIST: Input Classic Modern Multitouch Future? 31 Vision/Gesture Skinput (Harrison, et al. 2010) Images from Wikipedia, &
  32. 32. UIST: Tools Sikuli automate and test GUIs using screenshot images. ! 32 eBay bid notification with Sikuli
  33. 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 ! 33 See
  34. 34. Ubiquitous Computing Example of Sensing/Smart Home Technology 34
  35. 35. Social Computing Building Successful Online Communities Kraut & Resnick 35 See
  36. 36. Social Computing GroupLens’ Movies Lens An example of recommender system research. 36 See
  37. 37. Crowdsourcing 37 marketplace example:
  38. 38. Crowdsourcing Example: Soylent 38
  39. 39. Information Visualization 39
  40. 40. Information Visualization 40
  41. 41. Visualization Techniques TreeMap Example: Map of the market 41
  42. 42. Interactive Data Lab ! See Prof. Heer’s overview talk: 42
  43. 43. Acquisition Cleaning Integration Visualization Modeling Presentation Dissemination 43
  44. 44. Example of our group’s work d3.js The world’s most popular visualization API. more examples:, 44
  45. 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. 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. 47. Outline ž What’s HCI + Brief History ž Design Process, Prototyping, and Evaluation ž HCI Research ž Study HCI? ž Q&A 47
  48. 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. 49. Learning more about HCI ž HCI Online ( ž Read Design of Everyday Things, Sketching User Experience ž Watch Videos ž Seminars:, ž Job Talks of new professors ž ž ž Read Classic Papers 49
  50. 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 50
  51. 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: 51
  52. 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:
  53. 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] See these slides online: 53