Note: Topics and readings may change slightly. Links to slides and studio materials, as well as partial recordings, will be posted after the class they are introduced.

Week 1: Intro to Design and HCI

Objectives: At the end of this week, you will be able to…

  • identify and define the stages of the design cycle, elements of formal analysis, and conceptual models
  • critique peer and personal designs using the standards of proper critique and elements of formal analysis
  • design novel interfaces for specific purposes using the design cycle and prototyping techniques
6/21 6/22 6/23 6/24 6/25
Lecture (Slides) Lecture (Slides) No Class Lecture (Slides) Studio (Slides)
This class
HCI overview
Design cycle		 Design cycle
Wireframes
Peer Critique
Formal analysis
  Conceptual models
Affordances
Metaphors		 Peer critique
  Section (Slides)   Section (Abishek, Shm)  
  HTML/CSS 101   Grids
Bootstrap		  

Assignments/Readings

In this week, you will complete Project 1. See the schedule of checkpoints for the project on the course home page. All readings are due before class on that day. Other assignments are due at midnight Pacific Time the end of that day.

Mon, 6-21
reading
Being Good at Doing Good: Design Precepts for Social Justice HCI Projects
reading
A Hundred Racist Designs (pick 10)
Tue, 6-22
reading
Sketching User Experience Workbook, 2.1, 3.3-3.5, 4.1, 4.4
project 1
1.1 Mood Board (bCourses + Slack)
design
project 1
1.2 Interaction Sketches (bCourses + Slack)
prototype
Wed, 6-23
project 1
1.3 Peer critique of sketches (Slack)
evaluate
Thu, 6-24
reading
The Design of Everyday Things (Chapter 1)
reading
Affordances and Metaphors
project 1
1.4 Hand-Drawn Wireframe (bCourses + Slack)
prototype
Fri, 6-25
reading
How to Give and Receive Criticism
quiz
Quiz 1

Additional references

Codecademy: HTML
Codecademy: CSS
Bootstrap Documentation
Medium Post: Build a Personal Website with HTML and CSS

Week 2: User Studies + Prototyping

Objectives: At the end of this week, you will be able to…

  • perform multiple types of interiews (contextual inquiry, regular interview)
  • synthesize interview results into personas and storyboards
  • prototype designs
  • investigate areas of interest using task analysis and think aloud protocols
  • perform a heuristic evaluation
6/28 6/29 6/30 7/1 7/2
No Class Lecture (Slides) No Class Lecture (Slides) Studio (Slides)
  Prototypes
Observations
Think aloud
Task analysis
  Interviewing
Study ethics
Personas		 Heuristic evaluation
Recruiting
  Section (JD, Shm)   Section (Abishek, Shm)  
  Javascript
jQuery		   Paper.js  

Assignments

In this week, you will complete Project 2, focused on Programming Exercises. You will also begin plans for Project 3. See the schedule of checkpoints for these on the course home page. All readings are due before class on that day. Other assignments are due at midnight Pacific Time the end of that day.

Tue, 6-29
reading
10 cognitive biases to avoid in user research (and how to avoid them)
project 1
1.5 Django Prototype (bCourses)
prototype
project 1
P1 Final Report (bCourses)
Wed, 6-30
project 3
3.1 Initial Task Analysis
design
project 3
3.2 Observation Plan
design
Thu, 7-01
reading
Principles of Contextual Inquiry
reading
Embracing Four Tensions in Human-Computer Intraction Research with Marginalizerd People (Read to section 2.5)
Fri, 7-02
reading
How to Conduct a Heuristic Evaluation
reading
10 Usability Heuristics for User Interface Design
reading
The Black Experience in Graphic Design: 1968 and 2020
project 2
2.1 Task 1A & Task 1B (bCourses)
project 3
3.3 Recruting Message
design

Additional references

The Modern JavaScript Tutorial
Codecademy: Intro to Javascript
Codecademy: Intro to JQuery
Paper.js

Week 3: Aesthetics & Evaluation Methods

Objectives: At the end of this week, you will be able to…

  • identify and analyze good design using aesthetic rules and apply aesthetic theory to your own designs
  • prototype designs through “wizard of oz”
  • perform usability testing
  • evaluate designs through a variety of means, including usability testing, quantitative analysis, and Likert scales
7/5 7/6 7/7 7/8 7/9
Holiday Lecture (Slides) No Class Lecture (Slides) Studio (Slides)
  Aesthetics
Cognitive walkthrough
Paper prototypes
Wizard of Oz		   Quantitative Studies
Likert scales
Statistics		 “Paper” prototypes
  Section (Slides)   Section (Slides)  
  Figma   Interviewing
Personas		  

Assignments

In this week, you will complete Project

  1. See the schedule of checkpoints for the project on the project on the course home page. All readings are due before class on that day. Other assignments are due at midnight Pacific Time the end of that day.
Tue, 7-06
reading
Prototyping ("Paper Prototypes" section)
reading
Prototyping ("Wizard of Oz" section)
reading
All About Grid Systems
reading
Interactive Guide to Web Typography
reading
The Racial Bias Built Into Photography
project 2
P2 Final Report (2-3 additional tasks) (bCourses)
project 3
3.4 Observational Studies & Synthesis
evaluate
Wed, 7-07
project 3
3.5 Concept & Low-Fidelity Sketches
design
Thu, 7-08
reading
Doing Psychology Experiments (Ch. 2, 12)
project 3
3.6 Figma Prototype
prototype
project 3
3.7 Usability Test
evaluate
Fri, 7-09
reading
Storyboards, Paper Prototypes, and Mockups (Lecture 10, HCI, Stanford University)
project 3
3.8 Figma Prototype Revision
design
prototype

Week 4: Models of Interaction

Objectives: At the end of this week, you will be able to…

  • define key theories from HCI, e.g. human model processor, GOMS, direct manipulation
  • analyze an interface using GOMS
7/12 7/13 7/14 7/15 7/16
Lecture (Slides) Lecture(Slides) No Class Lecture(Slides) Studio(Slides)
Creativity Support Tools
HCI visions		 Model human processor
GOMS & KLM
HCI Laws		   Proxemics
Input devices		 Storyboard
  Section (Slides)   Section  
  Debugging in Javascript   Mobile Gestures (Slides)  

Assignments

In this week, you will begin Project 4. See the schedule of checkpoints for the project on the course home page. All readings are due before class on that day. Other assignments are due at midnight Pacific Time the end of that day.

Mon, 7-12
reading
The Model Human Processor (Section 2.1)
Tue, 7-13
reading
Which Humans? Innovation, Equity, and Imagination in Human-Centered Design (Keynote at CHI)
project 3
3.9 Interactive Django Prototype
prototype
project 3
P3 Final Report
Wed, 7-14
project 4
4.1 Brainstorming
design
Thu, 7-15
reading
Input Technologies and Techniques (Ch. 1-4, 8.6)
project 4
4.2 Interview Plan
design
Fri, 7-16
project 3
Project 3 Peer Evaluation
project 4
4.3 Peer Critique of Interview Plan (Individual)
evaluate
project 4
4.4 Narrative Scenarios
design
prototype

Week 5: Beyond the Screen

Objectives: At the end of this week, you will be able to…

  • define key concepts such as embodied interaction, tangible UI, proxemics
  • design a controlled usability study
7/19 7/20 7/21 7/22 7/23
Lecture (Slides) Lecture (Slides) No Class Lecture (Slides) Studio
Ubiquitous Computing
Tangible UIs
Embodiment		 Social Computing
Crowdsourcing		   Critical Design Controlled studies
  Section (Slides)   Section (Slides)  
  Web sockets   Database design  

Assignments

In this week, you will complete Project 4. See the schedule of checkpoints for the project on the course home page. All readings are due before class on that day. Other assignments are due at midnight Pacific Time the end of that day.

Mon, 7-19
reading
Why I Want my Voice Assistant to Speak Spanglish
project 4
4.5 Interviews
design
evaluate
project 4
4.6 Persona & Storyboard
design
prototype
Tue, 7-20
reading
Beyond Being There
reading
(Optional) Critical Race Theory for HCI
project 4
4.7 Experiment Design
design
Thu, 7-22
reading
How Bodies Matter
project 4
4.8 Websocket Prototype
prototype
Fri, 7-23
project 4
4.9 Interactive Django Prototype
prototype
Sun, 7-25
project final
Final Project Teams Form

Week 6: How to Demo, and Advanced Topics

Objectives: At the end of this week, you will be able to…

  • present and document their designs through effective videos, demos and portfolios
  • define key HCI concepts such as ubiquitous computing, and mixed initiative interfaces
  • identify key principles within specific HCI topics such as search and recommendation, social computing, data visualization, etc.
7/26 7/27 7/28 7/29 7/30
Lecture (Slides) Lecture (Slides) No Class Work Session Work Session
Information Visualization Final project launch   Instructor check-ins
Work session		 Instructor check-ins
Work session
  Section   Section  
  CANCELLED   CANCELLED  

Assignments

In this week, begin working on the final project. See the schedule of checkpoints for the project on the course home page. All readings are due before class on that day. Other assignments are due at midnight Pacific Time the end of that day.

Mon, 7-26
project 4
4.10 Usability Study
evaluate
Tue, 7-27
project 4
P4 Final Report
Fri, 7-30
project 4
4.11 Participate in Usability Tests (Individual)
evaluate
project 4
Project 4 Peer Evaluation
project final
Milestone 0 (No Submission) - Get Started

Week 7: Final Project

Objectives: At the end of this week, you will be able to…

  • work in a larger group on a significant design project
  • apply the concepts from the course to design, prototyping, and implementation
8/2 8/3 8/4 8/5 8/6
Work Session Panel (Slides) Workshop Work Session Work Session
Work session Panel: Careers and Adventures in HCI and Design   Mini-Lecture: Adobe Tools (Shm & Ritik)
Work session		 Mini-Lecture: Figma Tips (Heidi)
Work session
  Section   Section  
  CANCELLED   CANCELLED  

Assignments

In this week, you will continue working on the final project. See the schedule of checkpoints for the project on the course home page. All readings are due before class on that day. Other assignments are due at midnight Pacific Time the end of that day.

Mon, 8-02
project final
Milestone 1 - Formative Research
Fri, 8-06
project final
Milestone 2 - Prototyping

Week 8: Final Project

Objectives: At the end of this week, you will be able to…

  • present and demo a final design in a public showcase
  • discuss design decisions and technical implementation to an audience with a wide variety of backgrounds
8/9 8/10 8/11 8/12 8/13
Work Session Work Session Workshop Work Session Final Presentations
Work session Work session   Mini-Lecture: ICTD and Co-Design (Naoh)
Mini-Lecture: Typography and Font Choices (Abi)		 Final Presentations
  Section   Section  
  CANCELLED   CANCELLED  

Assignments

In this week, you will finish the final project. See the schedule of checkpoints for the project on the course home page. All readings are due before class on that day. Other assignments are due at midnight Pacific Time the end of that day.

Tue, 8-10
project final
Milestone 3 - Implementation & Evaluation
Thu, 8-12
project final
8pm – Presentation, Poster, and Demo (No Grace Period) – Session A
Fri, 8-13
project final
11am – Presentation, Poster, and Demo (No Grace Period) – Session B
project final
Video and Report
project final
Final Project Peer Evaluation Form