CS 160: User Interface Design and Development
Drive
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.
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 Good | ||
| READING A Hundred Racist Designs (Pick 10) | CW: The content of this reading may be challenging or triggering. | |
| Tue 6/22 | REMOTE LECTURE Lecture 2 | |
| PROJECT 1 1.1 Mood Board (bCourses + Slack) Due | ||
| READING The Design of Everyday Things (Chapter 1) | ||
| THU 6/23 | LECTURE Lecture 3 | Slides |
| PROJECT 1 1.2 Interaction Sketches (bCourses + Slack) Due | ||
| READING Affordances and Metaphors | ||
| FRI 6/24 | PROJECT 1 1.3 Peer Critique of Sketches (Slack) Due | |
| READING How to Give and Receive Criticism | ||
| Resources | Codecademy: HTML | |
| Codecademy: CSS | ||
| Bootstrap Documentation | ||
| Medium Post: Build a Personal Website with HTML and CSS | ||
| How To Run a Design Critique |
Week 2 - User Studies + Prototyping
Week 3 - Aesthetics & Evaluation Methods
(In observance of the Fourth of July, there is no class on Monday, so no Studio this week.)
Week 4 - Interviewing
(This week, all lectures will be remote. Studio will still take place in-person.)
| MON 7/11 | PROJECT 2 2.7 Usability Test Due | |
| PROJECT 2 2.8 Figma Prototype Revision Due | ||
| TUE 7/12 | REMOTE LECTURE Lecture 9 | Slides |
| READING The Model Human Processor (Read Section 2.1) | ||
| WED 7/13 | REMOTE LECTURE Lecture 10 | Slides |
| READING Which Humans? Innovation, Equity, and Imagination in Human-Centered Design (Keynote at CHI) | ||
| PROJECT 2 2.9 Interactive Prototype Due | ||
| THU 7/14 | REMOTE LECTURE Cancelled due to weather/technical issues. | |
| PROJECT 2 2.9 Interactive Prototype Due | ||
| PROJECT 4 4.1 Brainstorm Due | ||
| FRI 7/15 | PROJECT 4 4.2 Interview Plan Due | |
| READING What is Voice User Interface (VUI) Design? | ||
| Resources: |
Week 5 - Beyond the Screen
| MON 7/18 | PROJECT 4 4.3 Interview Results Due | |
| READING Why I Want my Voice Assistant to Speak Spanglish | ||
| TUE 7/19 | LECTURE Lecture 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 | LECTURE Lecture12 | 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! | ||
| 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 | |
| TUE 7/26 | LECTURE Lecture13 | Slides |
| READING How Bodies Matter: Five Themes for Interaction Design | ||
| WED 7/27 | REMOTE LECTURE TA Guest Mini-Lectures | Slides |
| FRI 7/29 | FINAL PROJECT Milestone 0 | |
| PROJECT 4 4.8 Proof of Participation in Usability Tests Due |
PROJECTS
LECTURES
READINGS
SECTIONS
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.