Human-Computer Interaction...
Transcript of Human-Computer Interaction...
![Page 1: Human-Computer Interaction Designcourses.pgbovine.net/cogs120-cse170/fall2017/lectures/IntroHCI-f17... · COGS120/CSE170 - “Intro. HCI” Instructor: Philip Guo Week 0 - Introduction](https://reader035.fdocuments.in/reader035/viewer/2022070809/5f07ee197e708231d41f78cf/html5/thumbnails/1.jpg)
Human-Computer Interaction DesignCOGS120/CSE170 - “Intro. HCI”
Instructor: Philip Guo
Week 0 - Introduction (2017-09-29) some slides adapted from Scott Klemmer
![Page 2: Human-Computer Interaction Designcourses.pgbovine.net/cogs120-cse170/fall2017/lectures/IntroHCI-f17... · COGS120/CSE170 - “Intro. HCI” Instructor: Philip Guo Week 0 - Introduction](https://reader035.fdocuments.in/reader035/viewer/2022070809/5f07ee197e708231d41f78cf/html5/thumbnails/2.jpg)
Learning Objective to get a sense of what this class is all about so that you can know what to expect and decide whether you want to take it.
Outline - Inspirational “first day of class” stuff - Boring “first day of class” logistics
![Page 3: Human-Computer Interaction Designcourses.pgbovine.net/cogs120-cse170/fall2017/lectures/IntroHCI-f17... · COGS120/CSE170 - “Intro. HCI” Instructor: Philip Guo Week 0 - Introduction](https://reader035.fdocuments.in/reader035/viewer/2022070809/5f07ee197e708231d41f78cf/html5/thumbnails/3.jpg)
Human-Computer Interaction DesignWhat is human-computer interaction (HCI)?
What is design?
![Page 4: Human-Computer Interaction Designcourses.pgbovine.net/cogs120-cse170/fall2017/lectures/IntroHCI-f17... · COGS120/CSE170 - “Intro. HCI” Instructor: Philip Guo Week 0 - Introduction](https://reader035.fdocuments.in/reader035/viewer/2022070809/5f07ee197e708231d41f78cf/html5/thumbnails/4.jpg)
Human-Computer Interaction Design
![Page 5: Human-Computer Interaction Designcourses.pgbovine.net/cogs120-cse170/fall2017/lectures/IntroHCI-f17... · COGS120/CSE170 - “Intro. HCI” Instructor: Philip Guo Week 0 - Introduction](https://reader035.fdocuments.in/reader035/viewer/2022070809/5f07ee197e708231d41f78cf/html5/thumbnails/5.jpg)
Human-Computer Interaction Design
![Page 6: Human-Computer Interaction Designcourses.pgbovine.net/cogs120-cse170/fall2017/lectures/IntroHCI-f17... · COGS120/CSE170 - “Intro. HCI” Instructor: Philip Guo Week 0 - Introduction](https://reader035.fdocuments.in/reader035/viewer/2022070809/5f07ee197e708231d41f78cf/html5/thumbnails/6.jpg)
Human-Computer Interaction Design
![Page 7: Human-Computer Interaction Designcourses.pgbovine.net/cogs120-cse170/fall2017/lectures/IntroHCI-f17... · COGS120/CSE170 - “Intro. HCI” Instructor: Philip Guo Week 0 - Introduction](https://reader035.fdocuments.in/reader035/viewer/2022070809/5f07ee197e708231d41f78cf/html5/thumbnails/7.jpg)
Human-Computer Interaction Design
![Page 8: Human-Computer Interaction Designcourses.pgbovine.net/cogs120-cse170/fall2017/lectures/IntroHCI-f17... · COGS120/CSE170 - “Intro. HCI” Instructor: Philip Guo Week 0 - Introduction](https://reader035.fdocuments.in/reader035/viewer/2022070809/5f07ee197e708231d41f78cf/html5/thumbnails/8.jpg)
Google image search for “evolution of cell phones”
![Page 9: Human-Computer Interaction Designcourses.pgbovine.net/cogs120-cse170/fall2017/lectures/IntroHCI-f17... · COGS120/CSE170 - “Intro. HCI” Instructor: Philip Guo Week 0 - Introduction](https://reader035.fdocuments.in/reader035/viewer/2022070809/5f07ee197e708231d41f78cf/html5/thumbnails/9.jpg)
![Page 10: Human-Computer Interaction Designcourses.pgbovine.net/cogs120-cse170/fall2017/lectures/IntroHCI-f17... · COGS120/CSE170 - “Intro. HCI” Instructor: Philip Guo Week 0 - Introduction](https://reader035.fdocuments.in/reader035/viewer/2022070809/5f07ee197e708231d41f78cf/html5/thumbnails/10.jpg)
![Page 11: Human-Computer Interaction Designcourses.pgbovine.net/cogs120-cse170/fall2017/lectures/IntroHCI-f17... · COGS120/CSE170 - “Intro. HCI” Instructor: Philip Guo Week 0 - Introduction](https://reader035.fdocuments.in/reader035/viewer/2022070809/5f07ee197e708231d41f78cf/html5/thumbnails/11.jpg)
UCSD is a great place for HCI + Design!
![Page 12: Human-Computer Interaction Designcourses.pgbovine.net/cogs120-cse170/fall2017/lectures/IntroHCI-f17... · COGS120/CSE170 - “Intro. HCI” Instructor: Philip Guo Week 0 - Introduction](https://reader035.fdocuments.in/reader035/viewer/2022070809/5f07ee197e708231d41f78cf/html5/thumbnails/12.jpg)
First In-Class Activity Think only to yourself, not out loud
Engineer, Hacker, Maker, Programmer
Artist, Designer, Product Manager, UX
![Page 13: Human-Computer Interaction Designcourses.pgbovine.net/cogs120-cse170/fall2017/lectures/IntroHCI-f17... · COGS120/CSE170 - “Intro. HCI” Instructor: Philip Guo Week 0 - Introduction](https://reader035.fdocuments.in/reader035/viewer/2022070809/5f07ee197e708231d41f78cf/html5/thumbnails/13.jpg)
My Own Background
Engineer, Hacker, Maker, Programmer
Artist, Designer, Product Manager, UX
EE & CS undergrad, CS Ph.D. Software engineer @ Google Educational technology designer Computer science professor Cognitive science professor
![Page 14: Human-Computer Interaction Designcourses.pgbovine.net/cogs120-cse170/fall2017/lectures/IntroHCI-f17... · COGS120/CSE170 - “Intro. HCI” Instructor: Philip Guo Week 0 - Introduction](https://reader035.fdocuments.in/reader035/viewer/2022070809/5f07ee197e708231d41f78cf/html5/thumbnails/14.jpg)
Market Demand
Engineer, Hacker, Maker, Programmer
Artist, Designer, Product Manager, UX
![Page 15: Human-Computer Interaction Designcourses.pgbovine.net/cogs120-cse170/fall2017/lectures/IntroHCI-f17... · COGS120/CSE170 - “Intro. HCI” Instructor: Philip Guo Week 0 - Introduction](https://reader035.fdocuments.in/reader035/viewer/2022070809/5f07ee197e708231d41f78cf/html5/thumbnails/15.jpg)
What This Course Offers …
Engineer, Hacker, Maker, Programmer
Artist, Designer, Product Manager, UX
Human-Computer Interaction Design
COGS120/CSE170
![Page 16: Human-Computer Interaction Designcourses.pgbovine.net/cogs120-cse170/fall2017/lectures/IntroHCI-f17... · COGS120/CSE170 - “Intro. HCI” Instructor: Philip Guo Week 0 - Introduction](https://reader035.fdocuments.in/reader035/viewer/2022070809/5f07ee197e708231d41f78cf/html5/thumbnails/16.jpg)
The goal of this course is to give you hands-on practice with a modern human-centered design process
while building a web application to serve a set of target users.
In my completely unbiased opinion, this is one of the most practical classes you’ll take in college.
![Page 17: Human-Computer Interaction Designcourses.pgbovine.net/cogs120-cse170/fall2017/lectures/IntroHCI-f17... · COGS120/CSE170 - “Intro. HCI” Instructor: Philip Guo Week 0 - Introduction](https://reader035.fdocuments.in/reader035/viewer/2022070809/5f07ee197e708231d41f78cf/html5/thumbnails/17.jpg)
Boring logistics time
Enforced course prerequisites:
(CSE 8A or CSE 11) and (some COGS course)
![Page 18: Human-Computer Interaction Designcourses.pgbovine.net/cogs120-cse170/fall2017/lectures/IntroHCI-f17... · COGS120/CSE170 - “Intro. HCI” Instructor: Philip Guo Week 0 - Introduction](https://reader035.fdocuments.in/reader035/viewer/2022070809/5f07ee197e708231d41f78cf/html5/thumbnails/18.jpg)
Programming prerequisites: Even though this course is focused on the
interaction design process, in order to succeed in it you will need to do a fair
amount of web programming. You will need to do frontend web programming; backend
server-side programming is optional (but can make your project more compelling).
![Page 19: Human-Computer Interaction Designcourses.pgbovine.net/cogs120-cse170/fall2017/lectures/IntroHCI-f17... · COGS120/CSE170 - “Intro. HCI” Instructor: Philip Guo Week 0 - Introduction](https://reader035.fdocuments.in/reader035/viewer/2022070809/5f07ee197e708231d41f78cf/html5/thumbnails/19.jpg)
Course FormatMondaysDesign Lectures
CENTER 113
WednesdaysStudios (attendancemandatory)
HSS1346
FridaysCode Lab
CENTER 113
![Page 20: Human-Computer Interaction Designcourses.pgbovine.net/cogs120-cse170/fall2017/lectures/IntroHCI-f17... · COGS120/CSE170 - “Intro. HCI” Instructor: Philip Guo Week 0 - Introduction](https://reader035.fdocuments.in/reader035/viewer/2022070809/5f07ee197e708231d41f78cf/html5/thumbnails/20.jpg)
Design Monday lectures
Implementation Friday code labs
Evaluation Wednesday studios
x 10 weeks
![Page 21: Human-Computer Interaction Designcourses.pgbovine.net/cogs120-cse170/fall2017/lectures/IntroHCI-f17... · COGS120/CSE170 - “Intro. HCI” Instructor: Philip Guo Week 0 - Introduction](https://reader035.fdocuments.in/reader035/viewer/2022070809/5f07ee197e708231d41f78cf/html5/thumbnails/21.jpg)
Avoiding local optima
Getting the design right vs.getting the right design
![Page 22: Human-Computer Interaction Designcourses.pgbovine.net/cogs120-cse170/fall2017/lectures/IntroHCI-f17... · COGS120/CSE170 - “Intro. HCI” Instructor: Philip Guo Week 0 - Introduction](https://reader035.fdocuments.in/reader035/viewer/2022070809/5f07ee197e708231d41f78cf/html5/thumbnails/22.jpg)
Quarter-long interaction design and web app
implementation project
![Page 23: Human-Computer Interaction Designcourses.pgbovine.net/cogs120-cse170/fall2017/lectures/IntroHCI-f17... · COGS120/CSE170 - “Intro. HCI” Instructor: Philip Guo Week 0 - Introduction](https://reader035.fdocuments.in/reader035/viewer/2022070809/5f07ee197e708231d41f78cf/html5/thumbnails/23.jpg)
This quarter’s project theme: designing for people
age 40 and over
![Page 24: Human-Computer Interaction Designcourses.pgbovine.net/cogs120-cse170/fall2017/lectures/IntroHCI-f17... · COGS120/CSE170 - “Intro. HCI” Instructor: Philip Guo Week 0 - Introduction](https://reader035.fdocuments.in/reader035/viewer/2022070809/5f07ee197e708231d41f78cf/html5/thumbnails/24.jpg)
Teams of three, formed in your studio
Designs shared weekly in studio
FINAL PRESENTATIONSIN WEEK 10
![Page 25: Human-Computer Interaction Designcourses.pgbovine.net/cogs120-cse170/fall2017/lectures/IntroHCI-f17... · COGS120/CSE170 - “Intro. HCI” Instructor: Philip Guo Week 0 - Introduction](https://reader035.fdocuments.in/reader035/viewer/2022070809/5f07ee197e708231d41f78cf/html5/thumbnails/25.jpg)
Weekly Wednesday Studio Ritual� Assignments due on Wednesdays, 12:30am (no extensions)� Go to studio on Wednesdays & check out your peers’ work� Reflect on and discuss your own work� THIS IS WHERE THE REAL LEARNING HAPPENS! � for reals! learning doesn’t happen by listening to me talk all day
� Attendance is mandatory.� Attendance is more than mandatory. It’s super-mandatory.
� Show up early or on time; remember to sign in
![Page 26: Human-Computer Interaction Designcourses.pgbovine.net/cogs120-cse170/fall2017/lectures/IntroHCI-f17... · COGS120/CSE170 - “Intro. HCI” Instructor: Philip Guo Week 0 - Introduction](https://reader035.fdocuments.in/reader035/viewer/2022070809/5f07ee197e708231d41f78cf/html5/thumbnails/26.jpg)
TAs who will be your Studio Leaders:� Ashkon� Charles� Harold� Joel� Kandarp� Sean
Instructor: Professor Philip Guo
![Page 27: Human-Computer Interaction Designcourses.pgbovine.net/cogs120-cse170/fall2017/lectures/IntroHCI-f17... · COGS120/CSE170 - “Intro. HCI” Instructor: Philip Guo Week 0 - Introduction](https://reader035.fdocuments.in/reader035/viewer/2022070809/5f07ee197e708231d41f78cf/html5/thumbnails/27.jpg)
Piazza, not emailAfter class, not emailOffice hours, not email
![Page 28: Human-Computer Interaction Designcourses.pgbovine.net/cogs120-cse170/fall2017/lectures/IntroHCI-f17... · COGS120/CSE170 - “Intro. HCI” Instructor: Philip Guo Week 0 - Introduction](https://reader035.fdocuments.in/reader035/viewer/2022070809/5f07ee197e708231d41f78cf/html5/thumbnails/28.jpg)
Laptop Computer Policy
Bring a fully-charged laptop to all classes to do the activities and code labs.
You are all adults, so be respectful with device usage. Don’t do anything that may
distract your classmates. Honors policy.
![Page 29: Human-Computer Interaction Designcourses.pgbovine.net/cogs120-cse170/fall2017/lectures/IntroHCI-f17... · COGS120/CSE170 - “Intro. HCI” Instructor: Philip Guo Week 0 - Introduction](https://reader035.fdocuments.in/reader035/viewer/2022070809/5f07ee197e708231d41f78cf/html5/thumbnails/29.jpg)
This class is over-full right now.
Good news: it will be offered again in winter quarter! (twice per year)
Talk to cogsci/CSE admins about all enrollment questions.
![Page 30: Human-Computer Interaction Designcourses.pgbovine.net/cogs120-cse170/fall2017/lectures/IntroHCI-f17... · COGS120/CSE170 - “Intro. HCI” Instructor: Philip Guo Week 0 - Introduction](https://reader035.fdocuments.in/reader035/viewer/2022070809/5f07ee197e708231d41f78cf/html5/thumbnails/30.jpg)
The Course Web Site has all the information.
Your question is likely already answered on the website or Piazza. We won’t respond to questions that you can find on the website.
http://courses.pgbovine.net/cogs120-cse170/
![Page 31: Human-Computer Interaction Designcourses.pgbovine.net/cogs120-cse170/fall2017/lectures/IntroHCI-f17... · COGS120/CSE170 - “Intro. HCI” Instructor: Philip Guo Week 0 - Introduction](https://reader035.fdocuments.in/reader035/viewer/2022070809/5f07ee197e708231d41f78cf/html5/thumbnails/31.jpg)
Now I’ll go over the course calendar and
syllabus from the website (exciting!)
![Page 32: Human-Computer Interaction Designcourses.pgbovine.net/cogs120-cse170/fall2017/lectures/IntroHCI-f17... · COGS120/CSE170 - “Intro. HCI” Instructor: Philip Guo Week 0 - Introduction](https://reader035.fdocuments.in/reader035/viewer/2022070809/5f07ee197e708231d41f78cf/html5/thumbnails/32.jpg)
The goal of this course is to give you hands-on practice with a modern human-centered design process
while building a web application to serve a set of target users.
In my completely unbiased opinion, this is one of the most practical classes you’ll take in college.
![Page 33: Human-Computer Interaction Designcourses.pgbovine.net/cogs120-cse170/fall2017/lectures/IntroHCI-f17... · COGS120/CSE170 - “Intro. HCI” Instructor: Philip Guo Week 0 - Introduction](https://reader035.fdocuments.in/reader035/viewer/2022070809/5f07ee197e708231d41f78cf/html5/thumbnails/33.jpg)
Learning Objective to get a sense of what this class is all about so that you can know what to expect and decide whether you want to take it.
TODOs After Class - Activate your Piazza invitation
- Let me know if you didn't get it yet - Do not send emails to course staff