CS160 Introduction to User Interface Design and Development

Reference

  1. Attendance Form
  2. Petition Form
  3. Supply List
  4. Design Submission Guidelines
  5. Interviewing Guide

Summer Reading and Prep

Readings

  1. Bush, Vannevar. "As we may think." The Atlantic Monthly 176.1 (1945), pp. 101-108.

Week 1: HCI, Design Cycle, and Web Programming

Schedule

MON (6/19) TUE (6/20) WED (6/21) STUDIO THU (6/22)
L1
SLIDES
L2
SLIDES
L3
SLIDES
S1
SLIDES
Course Intro
HCI Overview
Design Cycle
Visual Sketching
Formal Analysis
Formal Analysis
HCI Paradigms
Conceptual Models
Visual Sketching II
Wireframes
Web Programming
Cycle I Feedback
Gulf of Evaluation (Async)
Heuristic Evaluation
SECTION SECTION
Cloud9
Ruby on Rails 101
Wireframe-to-Markup
WebAPI (GPS
GoogleMaps)
Binding Interaction with JS
SECTION SLIDES SECTION SLIDES

Assignments

  1. P1: Cloudy, with a chance of meteors

Resources

  1. Designing for Asynchronous Interactions

Readings

  1. (M) S. Houde and C. Hill, “What do Prototypes Prototype?,” 1997.
  2. (T) Rogers, Y., Sharp, H., & Preece, J. (2011). Interaction Design: Beyond Human-Computer Interaction (3rd ed. ed.), pp 86-96 (Cognitive Frameworks)
  3. (W) D. R. Olsen Jr, “Model, View, Controller,” in Building Interactive Systems: Principles for Human Computer Interaction, 1998, pp. 5–66.
  4. (Th) J. Nielsen and R. Molich, “Heuristic Evaluation of User Interfaces,” in Proceedings of the SIGCHI Conference on Human Factors in Computing Systems, New York, NY, USA, 1990, pp. 249–256.

Optional Readings

  1. (M) Verplank, Bill. "Interaction Design Sketchbook." Unpublished paper for CCRMA course Music 250a (2003).
  2. (Th) J. P. Djajadiningrat, W. W. Gaver, and J. W. Fres, “Interaction Relabelling and Extreme Characters: Methods for Exploring Aesthetic Interactions,” in Proceedings of the 3rd Conference on Designing Interactive Systems: Processes, Practices, Methods, and Techniques, New York, NY, USA, 2000, pp. 66–71.

Week 2: Creativity and Learning Interfaces

Schedule

MON (6/26) TUE (6/27) WED (6/28) STUDIO THU (6/29)
L4
SLIDES
L5
SLIDES
L6
SLIDES
S2
SLIDES
Observational Studies
Task Analysis
Think Aloud
Task Analysis II
GOMS
Human Models
Visual Processor
Preattentive Features
Affordances
Creativity Support Tools
HMP - Memory
Color Theory
Wizard of Oz
Paper Prototyping Session
SECTION SECTION
Paperjs 101
Interactive Graphics
Interactive Graphics II
SECTION SLIDES SECTION SLIDES

Assignments

  1. P2: Cognitive Coloring Book

Resources

  1. Making a Coloring Page / Paper.js Snippets

Readings

  1. (Tu) The Model Human Processor. The Psychology of Human-Computer Interaction. Chap 2. Card, Moran & Newell. Pages 24-76.
  2. (W) B. Shneiderman, “Creativity support tools: accelerating discovery and innovation,” Commun. ACM, vol. 50, no. 12, pp. 20–32, Dec. 2007.
  3. (W) M. Resnick et al., “Design principles for tools to support creative thinking,” 2005.

Optional Readings

  1. (T) M. McCullough, Abstracting Craft: The Practiced Digital Hand. Boston, MA: The MIT Press, 1998.

Week 3: Evaluating Interfaces

Schedule

MON (7/3) TUE (7/4) WED (7/5) STUDIO THU (7/6)
L7
SLIDES
Foj
SLIDES
L8
SLIDES
S3
SLIDES
HCI Laws
Usability Testing
Likert
Semantic Differential
Box Plots
Fourth of July Holiday
Cognitive Walkthrough
Storyboarding
Multimodal Interaction
How Bodies Matter
Interviewing
Personas
SECTION SECTION
WebAPIs (Vibration
Camera)
Twillio API
Twitter API
SECTION SLIDES SECTION SLIDES

Assignments

  1. P3: Technical Vignettes

Readings

  1. (W) S. R. Klemmer, B. Hartmann, and L. Takayama, “How bodies matter: five themes for interaction design,” in Proceedings of Designing Interactive Systems, 2006, pp. 140–149.
  2. (W) McCloud, Scott. "Understanding comics: The invisible art." Northampton, Mass (1993). Chapters 1-3

Optional Readings

  1. S. Oviatt, “Ten myths of multimodal interaction,” Communications of the ACM, vol. 42, no. 11, pp. 74–81, 1999.
  2. E. Horvitz, “Principles of mixed-initiative user interfaces,” in Proceedings of the SIGCHI conference on Human factors in computing systems, 1999, pp. 159–166.

Week 4: Tangible, Contextual, and Proxemic Interfaces

Schedule

MON (7/10) TUE (7/11) WED (7/12) STUDIO THU (7/13)
L9
SLIDES
L10
SLIDES
L11
SLIDES
S4
SLIDES
Embodied Interactions
The Medium is the Message
Ubiquitous Computing
Proxemics Preview
Proxemics
Tangible UI
Mirrors & Wands
Sensing I
Series of Tubes
Sensors
Activity Recognition
Critique
Medium Awareness
P5 Forward Pointer
SECTION SECTION
WebSockets
Feature Detection
SECTION SLIDES SECTION SLIDES

Assignments

  1. P4: Mirror, mirror

Resources

  1. Gesture Recognition

Readings

  1. (M) S. Greenberg, N. Marquardt, T. Ballendat, R. Diaz-Marino, and M. Wang, “Proxemic Interactions: The New Ubicomp?,” interactions, vol. 18, no. 1, pp. 42–50, Jan. 2011.
  2. (M) Weiser, Mark. "The computer for the 21st century." Scientific american 265.3 (1991): 94-104.
  3. (Tu) D. A. Norman, The design of everyday things. Basic books, 2002. (Chapter 1-2)
  4. (Tu) H. Ishii and B. Ullmer, “Tangible Bits: Towards Seamless Interfaces Between People, Bits and Atoms,” in Proceedings of the ACM SIGCHI Conference on Human Factors in Computing Systems, New York, NY, USA, 1997, pp. 234–241.

Optional Readings

  1. H. Ishii, D. Lakatos, L. Bonanni, and J.-B. Labrune, “Radical Atoms: Beyond Tangible Bits, Toward Transformable Materials,” interactions, vol. 19, no. 1, pp. 38–51, Jan. 2012.

Week 5: Collaborative Spaces, Crowdsourcing, Visualization, and Search Interfaces

Schedule

MON (7/17) TUE (7/18) WED (7/19) STUDIO THU (7/20)
L12
SLIDES
L13
SLIDES
L14
SLIDES
Typography
P5 Intro
Concept Videos
Contextual Inquiry
Human Error
Quantitative Studies
Data Visualization
Search and Recommendation
Hi-Fi Wizard of Oz
Cognitive Walkthrough
SECTION SECTION
Experimental Design
Intro to Adobe Premiere Pro
SECTION SLIDES SECTION SLIDES

Assignments

  1. P5: Who's The Fairest?

Readings

  1. (W) M. S. T. Carpendale, “Considering Visual Variables as a Basis for Information Visualisation,” 2001.

Optional Readings

  1. M. S. Bernstein et al., “Soylent: A Word Processor with a Crowd Inside,” in Proceedings of the 23Nd Annual ACM Symposium on User Interface Software and Technology, New York, NY, USA, 2010, pp. 313–322.
  2. L. Von Ahn and L. Dabbish, “Labeling images with a computer game,” in Proceedings of the SIGCHI conference on Human factors in computing systems, 2004, pp. 319–326.

Week 6: Needfinding, Project Ideation, Initial Prototypes

Schedule

MON (7/24) TUE (7/25) WED (7/26) STUDIO THU (7/27)
Project Group
Intro to Final Project
Brainstorm Session
Midterm Review
Midterm
PM Meeting
LaTex 101 (µHCI)
SECTION SECTION
Midterm Review
N/A

Assignments

  1. FINAL1: Cool Media Brief

Resources

  1. µHCI Notes

Week 7: Technology Probes, User Evaluation, Critiques

Schedule

MON (7/31) TUE (8/1) WED (8/2) STUDIO THU (8/3)
Worksession
Illustrator 101 (µHCI)
Illustrator 201 (µHCI)
Worksession
Photoshop for Photoprocessing (µHCI)
LaTeX (µHCI)
Worksession
Logo Design (µHCI)
Quick DB for Rails (µHCI)
Porting to external processes (C++
Java
Python) (µHCI)
Worksession
SECTION SECTION
-
-

Week 8: Worksession, Final Presentations

Schedule

MON (8/7) TUE (8/8) WED (8/9) STUDIO THU (8/10)
L15
SLIDES
Worksession
Worksession
Presentation Practice (µHCI)
Final Presentations
Deliverables Due
SECTION SECTION
-
-