CS 160: User Interface Design and Development
Lecture Zoom Link Google Drive
Google Calendar (to see times and Zoom links for Office Hours, Discussion Sections).
Welcome to CS 160 Summer 2022!
CS 160 is the introductory course to the field of Human Computer Interaction (HCI). In this class, students will learn to design, prototype and evaluate user interfaces. Unlike most classes, CS 160 will not focus on any particular set of algorithmic techniques, instead students will learn techniques for user-centered interface design (e.g., prototyping, contextual inquiry, heuristic evaluation etc). This summer, we will learn how to use front-end web development technologies (HTML, CSS and JavaScript) and a backend for prototyping.
The course features two parts: (1) five weeks of curriculum and practice, and (2) three weeks of a final project.
The instructors for this summer’s CS 160 course are Diyah Mettupalli and Shm Almeda, supported by Head TA Timothy Yang.
Upcoming Checkpoints
This is the authoritative list of upcoming deadlines. Come to lecture and check on this list regularly for updates. Readings are due before class on that day. Other assignments are due at midnight Pacific Time on the end of that day.
Note: Topics and readings may change slightly. Links to slides and studio materials, as well as any recordings, will be posted after the class they are introduced.
Jump to: Week 1 | Week 2 | Week 3 | Week 4 | Week 5 | Week 6
Week 1 - Introduction to Design & HCI
(In observance of Juneteenth, this week starts on Tuesday, and Studio class will occur on Friday instead of Monday.)
- TUE 6/21
Lecture Introduction- Slides
Reading Being Good at Doing GoodReading A Hundred Racist Designs (Pick 10)- CW: The content of this reading may be challenging or triggering.
- WED 6/22
Project 1 1.1 Mood Board (bCourses + Slack) DueReading The Design of Everyday Things (Chapter 1)- THU 6/23
Project 1 1.2 Interaction Sketches (bCourses + Slack) DueReading Affordances and Metaphors- FRI 6/24
Studio Studio 1: Intros & Peer CritiqueProject 1 1.3 Peer Critique of Sketches (Slack) DueReading How to Give and Receive CriticismQuiz 1 Due - Resources
- Codecademy: HTML
- Codecademy: CSS
- Bootstrap Documentation
- Medium Post: Build a Personal Website with HTML and CSS
- How To Run a Design Critique
- Codecademy: CSS
Week 2 - User Studies + Prototyping
- MON 6/27
Studio Studio 2: Project 1 Workshop & Project 2 PartnersProject 1 1.4 Hand-Drawn Wireframe (bCourses + Slack) DueReading How to Conduct a Heuristic EvaluationReading 10 Usability Heuristics for User Interface Design- TUE 6/28
Project 1 1.5 Interactive Prototype DueReading 10 Cognitive Biases to Avoid in User Research- WED 6/29
Project 1 Final Report DueReading Embracing 4 Tensions in HCI Research with Marginalized People (Read to Section 2.5)Reading The Black Experience in Graphic Design: 1968 and 2020- THU 6/30
Project 2 2.1 Initial Task Analysis DueProject 2 2.2 Observation Plan DueReading Principles of Contextual Inquiry- FRI 7/1
Quiz 2 Due Project 2 2.3 Recruiting Message DueProject 3 3.1 Task 1A and 1B Due- Resources
- The Modern JavaScript Tutorial
- Codecademy: Intro to Javascript
- Codecademy: Intro to JQuery
- Paper.js
- Codecademy: Intro to Javascript
Week 3 - Aesthetics & Evaluation Methods
(In observance of the Fourth of July, there is no class on Monday, so no Studio this week.)
- TUE 7/5
Lecture Lecture 6.5- Slides
Reading Prototyping (Read “Paper Prototypes” and “Wizard of Oz” sections)Reading All About Grid SystemsProject 2 2.4 Observational Studies & Synthesis Due- Slides
- WED 7/6
Project 2 2.5 Concept & Low-Fidelity Sketches DueProject 3 2-3 Additional Tasks, Final Report DueReading Cognitive Walkthroughs (Focus on “How To” Section)Reading The Racial Bias Built into Photography)- THU 7/7
Reading Doing Psychology Experiments (Read Ch. 2 & 12)Reading Storyboards, Paper Prototypes, and Mockups- FRI 7/8
Project 2 2.6 Figma Prototype DueQuiz 3 Due - Resources
- Interactive Guide to Typography
- A Complete Guide to Flexbox
- w3 Schools jQuery Tutorial
- A Complete Guide to Flexbox
Week 4 - Interviewing
(This week, all lectures will be remote. Studio will still take place in-person.)
- MON 7/11
- Studio Studio 3: Usability Testing
- Project 2 2.7 Usability Test Due
- Project 2 2.8 Figma Prototype Revision Due
- Project 2 2.7 Usability Test Due
- TUE 7/12
- Reading The Model Human Processor (Read Section 2.1)
- WED 7/13
- Remote LectureLecture 10
- Slides
- Reading Which Humans? Innovation, Equity, and Imagination in Human-Centered Design (Keynote at CHI)
- Project 2 2.9 Interactive Prototype Due
- Slides
- THU 7/14
- Remote Lecture Cancelled due to weather/technical issues.
- Project 2 Project 2 Final Report Due
- Project 4 4.1 Brainstorm Due
- Project 2 Project 2 Final Report Due
- FRI 7/15
- Project 4 4.2 Interview Plan Due
- Reading What is Voice User Interface (VUI) Design?
- Quiz 4 due
- Reading What is Voice User Interface (VUI) Design?
- Resources
Week 5 - Beyond the Screen
- MON 7/18
- Studio Studio 4: 4.3, 4.4, & Group Matching
- Project 4 4.3 Interview Results Due
- Reading Why I Want my Voice Assistant to Speak Spanglish
- Project 4 4.3 Interview Results Due
- TUE 7/19
- LectureLecture 11
- Slides
- Reading Creating Voice Interaction Flows. UX Design for Voice Interfaces
- Project 4 4.4 Personas & Narratives Due
- WED 7/20
- Remote Lecture Guest Lecture from Dr. Kishonna L. Gray
- Slides
- Reading CHI 2022 Keynote Speech by Dr. Kishonna L. Gray
- Project 4 4.5 Dialogue Flows Due
- THU 7/21
- LectureLecture 12
- Slides
- Reading Critical Race Theory for HCI
- Project 4 4.6 Experiment Design Due
- FRI 7/22
- Project 4 4.7 Figma Prototype Due
- Project 4 Reminder: Sign up for Usability Testing!
- Quiz 5 due
- Project 4 Reminder: Sign up for Usability Testing!
- Resources
- Optional Reading: Beyond Being There
- How-to Guide for a Flawless Voice User Interface Design
Week 6 - Start of Final Project Phase of Course!
- SUN 7/24
- Final Project Final Project Teams Finalized
- MON 7/25
- Studio Studio: Usability Testing
- TUE 7/26
- LectureLecture 13
- Slides
- Reading How Bodies Matter: Five Themes for Interaction Design
- WED 7/27
- Remote LectureTA Guest Mini-Lectures
- Slides
- Project 4 Project 4 Final Report
- THU 7/28
- Studio In-Studio Work Session
- FRI 7/29
- Final Project Milestone 0
- Project 44.8 Proof of Participation in Usability Tests Due
Week 7 - Final Project Week 2
- MON 8/1
- Studio In-Studio Work Session
- Final Project Milestone 1 - Formative Research
- TUE 8/2
- Studio In-Studio Work Session
- WED 8/3
- Remote LectureSpecial Guest Panel: Careers in HCI, UI/UX, and Web Development
- Project 4 Project 4 Final Report
- THU 8/4
- Studio In-Studio Work Session
- FRI 8/5
- Final Project Milestone 2 - Prototyping
Week 8 - Final Project Week 3 (Final!)
- MON 8/8
- Studio In-Studio Work Session
- TUE 8/9
- Studio In-Studio Work Session
- Final Project Milestone 3 - Implementation & Evaluation Due
- WED 8/10
- Studio In-Studio Work Session
- THU 8/11
- Studio Presentations and Demos @ 11AM-1:30PM
- Final Project Final Project Poster Due 11AM)
- FRI 8/12
- Final Project Final Project Report and Video Due
- Final Project Final Project Peer Evaluation Form Due
Credits for this course
The syllabus, lecture slides, web content, and assignments of this course are only the most recent iterations of a long history of HCI classes. This iteration of the course, at the very least, draws from prior course materials by Nate Weinmann, Janaki Vivrekar, Sarah Sterman, Andrew Head, Amy Pavel, Cesar Torres, Björn Hartmann, Eric Paulos, Valkyrie Savage, Maneesh Agrawala, Scott Klemmer, John Canny, and James Landay.