Note: Topics and readings may change slightly. Slides will be posted as topics are covered in class.

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/24 6/25 6/26 6/27 6/28
Lecture [M] Lecture [M] Workshop Studio, Lecture [M] Quiz, Lecture [M]
This class
What is HCI?
Design cycle
Sketching
Design cycle
Wireframes
Peer Critique
Formal analysis
  How to critique
Critiques
Quiz
Conceptual models
Affordances
Metaphors
  Section   Section  
  Introductions
HTML/CSS 101
  Grid
Bootstrap
Wireframe to Markup
 

Assignments

In this week, you will complete Project 1. See the schedule of checkpoints for the project on the course home page.

You will also complete the following readings:

[M] Sketching User Experience Workbook, 2.1, 3.3-3.5, 4.1, 4.4 (Buxton)
[Tu] Chapter 1: The Design of Everyday Things (Norman)
[Th] How to Run a Design Critique
[Th] How to Give and Receive Criticism

Additional references

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

Week 2: Aesthetics + Prototyping

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

  • prototype designs using paper and “wizard of oz”
  • investigate areas of interest using task analysis and think aloud protocols
  • perform a heuristic evaluation
7/1 7/2 7/3 7/4 7/5
Lecture Lecture [M] Workshop No Class Quiz, Studio, Lecture [M]
Observations
Task analysis
Think aloud
Prototyping
Wizard of Oz
Paper prototypes
  Holiday Quiz
Heuristic evaluation
Critique
  Section   No Class  
  Javascript
jQuery
Paper.js
  Holiday  

Assignments

In this week, you will complete the first two design cycles of Project 2. See the schedule of checkpoints for the project on the course home page.

You will also complete the following readings:

[Tu] What do prototypes prototype? (Houde & Hill)
[Tu, Optional] Getting the Right Design and the Design Right (Tohidi et al.)
[F] How to Conduct Heuristic Evaluation (Nielsen)
[F] 10 Usability Heuristics for User Interface Design (Nielsen)

Additional references

The Modern JavaScript Tutorial
Codecademy: Intro to Javascript
Codecademy: Intro to JQuery

Week 3: Evaluation Methods

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

  • perform multiple types of interiews (contextual inquiry, regular interview, usability testing…)
  • synthesize interview results into personas and storyboards
  • evaluate designs through a variety of means, including usability testing, quantitative analysis, and Likert scales
  • identify and analyze good design using aesthetic rules and apply aesthetic theory to your own designs
7/8 7/9 7/10 7/11 7/12
Lecture Lecture Workshop Studio, Lecture [M] Quiz, Lecture [M]
Interviewing Part 2
Study ethics
Personas
Visual design
Typography
Color theory
Cognitive walkthrough
  Storyboards
Creativity support tools
Critique
Quiz
Surveys
Likert scales
Quantitative studies
Usability testing
Statistics
  Section   Section  
  CSS/JS Review and Debugging
Django Overview
  Interviewing and Personas  

Assignments

In this week, you will complete the last two design cycles of Project 2. See the schedule of checkpoints for the project on the project on the course home page.

You will also complete the following readings:

[Tu] About Face: Essentials of Interaction Design – Chapter 4 (Cooper, Reimann, Cronin)
[Th] Design principles to support creative thinking (Resnick)
[F] Doing Psychology Experiments, Chapters 2, 12 (Martin)
[Optional] About Face: Essentials of Interaction Design – Chapter 5 (Cooper, Reimann, Cronin)
[Optional] Creativity Support Tools (Shneiderman)
[Optional] Contextual Inquiry (Beyer and Hotlzblatt)
[Optional] Practical Guide to Controlled Experiments on the Web (Kohavi, Henne and Sommerfield)

Additional references

Paper.js

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/15 7/16 7/17 7/18 7/19
Lecture Lecture [M] Workshop Studio, Lecture [M] Quiz, Lecture [M]
HCI Visions
Human models
Model human processor
Memory
GOMS
KLM
Mid-semester feedback
  Critique Quiz
Proxemics
(Maybe) input devices
Mid-semester feedback review
  Section   Section  
  WebSockets   Mobile Gestures  

Assignments

In this week, you will complete the first three design cycles of Project 3. See the schedule of checkpoints for the project on the course home page.

You will also complete the following readings:

[M] The Model Human Processor (Card, Moran and Newell)
[Tu] Input Technologies and Techniques (Hinckley)
[Tu, optional] Direct Manipulation Interfaces (Hutchins, Hollan, Norman)

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/22 7/23 7/24 7/25 7/26
Lecture Lecture Workshop Lecture [M] Studio, Quiz [M]
Embodied interaction
Tangible UIs
Physical devices
Experiment Design for P3
Social computing   Ubiquitous computing
Input devices
Sensing
Quiz
Controlled studies
Critique
  Section   Section  
  Debugging in JavaScript   Figma  

Assignments

In this week, you will complete the final three design cycles of Project 3. See the schedule of checkpoints for the project on the course home page.

You will also complete the following readings:

[M] How Bodies Matter (Klemmer, Hartmann, Takayama)
[Th] The Computer For the 21st Century (Weiser)
[M, optional] Proxemic Interactions: The New Ubicomp? (Greenberg et al.)
[T, optional] Designing games with a purpose (von Ahn and Dabbish)
[T, optional] Soylent: a word processor with a crowd inside (Bernstein)

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/29 7/30 7/31 8/1 8/2
Lecture Lecture Workshop Studio [M] Quiz, Lecture [M]
Final Project Launch
Data visualization
Search and recommendation
Human error
Wearables
  Project Idea Pitches Quiz
Educational Tech
AI-infused systems
  Section   Section  
  Video Editing with Adobe Premiere   Group Check-ins  

Assignments

In this week, begin working on the final project. See the schedule of checkpoints for the project on the course home page.

You will also complete the following readings:

[Tu] Considering visual variables as a basis for information visualization (Carpendale)
[F] Guidelines for Human-AI Interaction
[F] Guidelines for Human-AI Interaction: Reference Cards with Examples

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/5 8/6 8/7 8/8 8/9
Work Session Work Session Workshop Work Session [M] Work Session
Work session Work session
PL All-hands
PL 1-1s
  PL All-hands
Full Group Check-ins
Work session
Full Group Check-ins
Work session
  Section   Section  
  Adobe Illustrator   Visual Design Practicum  

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.


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/12 8/13 8/14 8/15 8/16
Work Session Work Session Workshop Work Session [M] Final Showcase [M]
Concept videos
(Keynote)
(PowerPoint)
PL All-hands
PL 1-1s
Work session
  PL All-hands
Full Group Check-ins
Work session
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.