Welcome to CS 160: User Interface Design and Development!

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 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.

Curriculum and practice: For the first five weeks, lecture occurs three days a week (Monday, Tuesday, and Friday), studio once a week (Thursdays during lecture) and section occurs twice a week. While lectures and studio focus on core HCI concepts, sections reinforce these concepts and help students improve technical skills. Outside of class, students will work individually or in pairs on weekly projects. Weekly projects allow students to engage in the design cycle and develop technical skills.

Final project: Using design methodologies and technical skills learned during the first five weeks, students will work in groups for the last three weeks to ideate, prototype and implement a final project. Students will choose their own design methodologies and project topic within a theme. During the last three weeks, final project studio will take the place of lecture and studio. Final project studio provides in-class time for teams to work together and receive feedback from course staff.

The instructors for this summer’s CS 160 course are Sarah Sterman and Andrew Head.

On this website, you can find the schedule of topics and course policies, and below, projects deadlines and readings, as well as office hours.

Upcoming Project Checkpoints

This is the authoritative list of upcoming deadlines. Come to lecture and check on this list regularly for updates.

Week 1
Mon, June 24 — 11 am	Sketching User Experience Workbook (Sections 2.1, 3.3-3.5, 4.1, 4.4)	reading
Tue, June 25 — 10 am	Exploration and ideation	project 1		design prototype
11 am	The Design of Everyday Things (Chapter 1)	reading
Wed, June 26 — 10 am	Peer critique of sketches	project 1		evaluate
Thu, June 27 — 10 am	Wireframe	project 1		prototype
	Prepare for in-studio critique of wireframes	project 1		evaluate
11 am	How to Run a Design Critique	reading
	How to Give and Receive Criticism	reading
Fri, June 28 — 10 am	Wireframe revision	project 1	slip ok	prototype
Week 2
Mon, July 1 — 10 am	Implementation prototype: Django	project 1	slip ok	prototype
	Interactive prototype and final design report	project 1	slip ok	prototype evaluate
Tue, July 2 — 10 am	Task decomposition, observations, and sketches	project 2		design
11 am	What do prototypes prototype?	reading
11 pm	Peer critique of sketches	project 2		evaluate
Fri, July 5 — 10 am	Parallel paper prototypes	project 2		design prototype
	Prepare for in-studio critique (heuristic evaluation)	project 2		evaluate
11 am	How to Conduct a Heuristic Evaluation	reading
	10 Usability Heuristics for User Interface Design	reading
Week 3
Mon, July 8 — 10 am	Discount usability testing	project 2		evaluate
Tue, July 9 — 10 am	Implementation prototype: Event handlers	project 2	slip ok	prototype
	Implementation prototype: Touch gestures	project 2	slip ok	prototype
	Implementation prototype: Paper.js	project 2	slip ok	prototype
11 am	"Understanding Users: Qualitative Research", Chapter 4 in About Face	reading
Wed, July 10 — 10 am	Revised paper prototype	project 2		design prototype
Thu, July 11 — 10 am	Prepare for in-studio critique (principles of creativity support tools)	project 2		evaluate
11 am	Design principles to support creative thinking	reading
Fri, July 12 — 11 am	Doing Pyschology Experiments (Read Chapter 2, Skim Chapter 12)	reading
Week 4
Mon, July 15 — 10 am	Interactive prototype, discount usability testing, and design report	project 2	slip ok	prototype evaluate
11 am	The Model Human Processor	reading
Tue, July 16 — 10 am	Brainstorming	project 3		design
	Interview plan	project 3		design
11 am	Skim Input Technologies and Techniques	reading
	Project 2 Team Evaluation Form	project 2		evaluate
11 pm	Peer critique of interview plan	project 3		evaluate
Thu, July 18 — 10 am	Observations	project 3		design
	Narrative scenarios	project 3		design
	Recruiting Checkpoint 1	project 3		design
	Prepare for in-studio critique (interview practice)	project 3		evaluate
Fri, July 19 — 10 am	Recruiting Checkpoint 2	project 3		design
Week 5
Mon, July 22 — 10 am	Interviews and personas	project 3		design
	Storyboard	project 3		prototype
	Prepare for in-class Experiment Design	project 3		design
11 am	How Bodies Matter	reading
11 pm	Experiment Design	project 3		design
Tue, July 23 — 10 am	Implementation prototype: WebSockets and mobile gestures (start this early!)	project 3	slip ok	prototype
	Implementation prototype: Reactive layouts	project 3	slip ok	prototype
11 am	The Computer for the 21st Century	reading
11 pm	Peer critique of storyboard	project 3		evaluate
Fri, July 26 — 10 am	Interactive prototype, with a simple variant	project 3		prototype
	Prepare for in-studio critique (controlled usability studies)	project 3		evaluate
	Project 3 Peer Evaluation	project 3		evaluate
Sun, July 28 — 12 pm	Final project teams form
Week 6
Mon, July 29 — 10 am	Discount usability study and design report	project 3	slip ok	evaluate
11 am	Considering Visual Variables as a Basis for Information Visualisation	reading
Thu, August 1 — 10 am	Milestone 0	project final		design
11 am	Full Group Check-ins	project final
11 pm	Milestone 1	project final		design prototype evaluate
Fri, August 2 — 11 am	Guidelines for Human-AI Interaction	reading
	Guidelines for Human-AI Interaction: Reference Cards with Examples	reading
Week 7
Tue, August 6 — 11 am	PL 1-1s	project final
11 pm	Milestone 2	project final		design prototype evaluate
Thu, August 8 — 11 am	Full Group Check-ins	project final
Fri, August 9 — 10 am	Milestone 2.5	project final		design prototype evaluate
11 am	Full Group Check-ins	project final
Week 8
Mon, August 12 — 11 pm	Milestone 3	project final		design prototype evaluate
	Milestone 3 - Logos and Images	project final		design
Tue, August 13 — 11 am	PL 1-1s	project final
Thu, August 15 — 10 am	Sanity Checkpoint for Final Deliverables (Pitch Slides Draft)	project final		evaluate
	Sanity Checkpoint for Final Deliverables (Poster Draft)	project final		evaluate
11 am	Full Group Check-ins	project final
04 pm	Poster	project final		evaluate
	Final Slides	project final		evaluate
	Final Video	project final		evaluate
Fri, August 16 — 11 pm	Medium Article	project final		evaluate
09 am	Demo-able Prototype	project final		prototype
Sat, August 17 — 01 pm	Final Project Team Evaluation Form	project final

Sections and Office Hours

There are two sections per week, on Tuesdays and Thursdays in Soda 320. On both days, section time is 2 - 3 pm, 3 - 4 pm, or 4 - 5 pm. There is no section on July 4th. Refer to the syllabus for section topics.

Office hours for the class are the following.

Monday	Tuesday	Wednesday	Thursday	Friday
Andrew Head	Forrest Huang	Eric Yao	Sharanya Soundararajan	Sarah Sterman
2 - 4 pm, Soda 411	9 - 11 am, Jacobs 310	1 - 3 pm, Soda 411	5:30 - 6:30, Soda 341B	1:30 - 3:30 pm, Sutardja Dai Hall 143
		Sona Dolasia
		3 - 5 pm, Soda 411

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 Amy Pavel, Cesar Torres Torres, Björn Hartmann, Eric Paulos, Valkyrie Savage, Maneesh Agrawala, Scott Klemmer, John Canny, and James Landay.