Basic Interaction

51422 | Spring 2008
10:30–11:50 Mon/Wed MM 227

Jamin Hegeman, Instructor
jamin [] cmu [] edu
Office: MM 215 (by appointment)


Official Description

Intended for HCI double majors, this is the spring offering of 51-421 Introduction to visual interface design. This course highlights the role that visual interface designers play in the multi-disciplinary attempt to bridge the gap between functionality and usability and to introduce students to some of the unique challenges of designing within the realm of a digital, interactive medium.

Actual Class

This course introduces the basic principles of interaction design and the design process.

Interaction design is the process of defining the behavior of products and services. Through interaction, people build expectations about what a product can do and how it should be used. This course is about how to design for interactions that will resonate with your audiences: how the features and functions of a product get translated into something humans find usable, useful, and desirable.

The course is intended to introduce the fundamental concepts, methods, and practices of interaction design and explore the role that interaction with products plays in mediating relationships between people and people, people and places, and people and products.

By the end of the course we expect you to have:


Project 1: 20% (5% each)
Project 2: 30%
Project 3: 40%
Class Participation: 10%


30% Ideation (the concepts you come up with)
30% Appropriateness (how well your solution fits the constraints given and fits the problem you are addressing)
20% Craft (how professional your documentation and solution is)
20% Presentation (how well you can talk about and defend your solution)

For each project, you will get a feedback sheet that will show you the grade for each facet of the project and the corresponding overall grade.

Course Structure

This is a studio/seminar class with time devoted to lecture, discussion, work sessions, and criticism. The class consists of three projects. The last two projects each require web project documentation, explaining the design process as well as the final solution.

Project 1: Four pieces

A: Physical cube (Courtesy Chris Pacione)

Starting with a cube, design an interactive object that you think best communicates the following uses. The cube should look as though you can:

The cube can be no bigger than six inches in any dimension. You may add or subtract from the cube, but it has to remain cube-like. Other shapes may be used as long as they play a secondary role. You may also use color, texture, material as well as a relative context. For example, the final solution might be a green fuzzy cube with little circular nibs placed on the floor.

B: Digital Cube (Courtesy Chris Pacione)

Starting with a square, design an interactive, on-screen image that best communicates all of the following uses. The square should look as if one should/can:

The square can be no larger than 80x80 pixels. Like the physical cube, you can add or subtract from it, but the final solution has to be based on the image of a square (and should look squareish and not roundish). However, circular or triangular shapes may be used in support of the design. You should also consider how animation, sound, color, and texture can be used as cues.

C: 1000-Floor Elevator (Courtesy John Zimmerman)

Design an elevator for a building with 1000 floors. Not an elevator system, a single elevator that can travel from the ground floor to the 1000th floor. I expect you to address at least the following:

Your solution should be printed out (tabloid 11" x 17") and mounted on thick black paper (16" x 24") for presentation.

D: Ambient device (Courtesy Dan Saffer)

Design an ambient device that displays in some manner some sort of data (weather, time, stock market, fullness of the basement vending machines, etc.) in a calm, non-intrusive manner. The presentation of your solution is up to you—it can be digital (an animation on-screen) or physical (an object that behaves) or simply a description printed out on 11x17 paper. The most important criteria: the class feels as though they can experience it.

Project 2: Communication Device

Students will design a physical device that allows for two-way communication between a set or two groups of people.

Project 3: eBook Reader & Gestural Interaction

Students will design a product based on gestural interaction. Project Brief (pdf)

Week Mon Wed
1 1.14 Syllabus review 1.16 IxD overview
2 1.21 Project 1 A presentations 1.23 Basics of interaction design
3 1.28 Project 1 B presentations 1.30 Interfaces
4 2.4 Project 1 C presentations 2.6 Ambient devices
5 2.11 No Class 2.13 Project 1 D presentations
6 2.18 Assignment of Project 2 and User research 2.20 Personas, wireframes, and flow
7 2.25 Crit—People and needs 2.27 Paper prototyping
8 3.3 Work session 3.5 Crit—scenarios and flow
9 3.10 Spring Break 3.12 Spring Break
10 3.17 Presentation review; iPhone dev 3.19 Paper prototypes
11 3.24 Project 2 presentations 3.26 Assignment of Project 3
Gestural Interaction
12 3.31 Crit—People and needs 4.2 Translating research findings into concepts; Concept validation methods
13 4.7 Crit—People and needs update 4.9 Emotion and Design Language
14 4.14 Crit—Storyboards for concept validation 4.16 Video Sketching
15 4.21 Work session 4.23 Crit—Concept validation results
16 4.28 Video sketch rough cut 4.30 Final deliverables and presentation review
Finals 5.5 Final Presentation 5.7 Final documents due

Schedule subject to change.


Required textbook: Designing for Interaction by Dan Saffer

More readings may be included as the semester progresses.

Wednesday, January 16—Basics of interaction

DFI, Chapter 1

Just How Far Beyond HCI is Interaction Design?

Don Norman (2007): How to talk to people

“So You Want to Be an Interaction Designer” by Robert Reimann

Wednesday, January 23—Basics of interaction

Group A (Matthew W., Maria, Bonnie)

DFI, Chapters 2 and 3

Tom Djajadiningrat, Kees Overbeeke, Stephan Wensveen, But how, Donald, tell us how? On the creation of meaning in interaction design through feedforward and inherent feedback, Proceedings 2002.

Wednesday, January 30—Interfaces

Group B (Marshall, Zhiquan, Andrew)

DFI, Chapter 6

“Color for Coders” by Jason Beaird

“Design Eye for the Usability Guy” by the Design Fab Five

Wednesday, February 6—Ambient devices

Group C (Andrea, Beverly)

Mark Weiser (1991) The Computer for the 21st Century

Mark Weiser and John Seely Brown (1995) Designing Calm Technology

Monday, February 18—Users and user research

Group D (Noah, Austin)

DFI, Chapters 4 and 5

Group E (YoungJoo, Janice, Paul)

Karen Holtzblatt (2005): Customer-centered design for mobile applications. Personal and Ubiquitous Computing 9. 227-237.

Jonathon Grudin, John Pruitt (2002): Personas, Participatory Design and Product
Development: An Infrastructure for Engagement
. Proceedings of PDC. 144-161.

Alan Cooper and Robert Reimann: About Face 2.0: The Essentials of Interaction Design. Wiley. Modeling Users: Personas and Goals.

Wednesday, March 26—Gestural Interaction

Recognizing gestures: Interface design beyond point-and-click

Interactive Gestures (Chapter 1)

Interactive Gestures Pattern Library

Wednesday, April 2—Translating research findings into design directions

Group G (Keisha, Rosemary)

Marion Buchenau, Jane Fulton Suri (2000): Experience prototyping. Proceedings of DIS. 424-433.

Antti Oulasvirta, Esko Kurvinen, Tomi Kankainen (2003): Understanding contexts by being there: case studies in bodystorming, Personal and Ubiquitous Computing 7(2). 125-134.

J. P. Djajadiningrat , W. W. Gaver, J. W. Fres (2000): Interaction relabelling and extreme characters: methods for exploring aesthetic interactions, Proceedings of DIS. 66-71.

Wednesday, April 9—Emotion and design languages

Group F (Can, Matt L.)

Don Norman (2002): Emotion and Design: Attractive Things Work Better. Interactions, July-August. ACM Press.

John Zimmerman, Ellen Ayoob, Jodi Forlizzi (2005): Searching for Intrinsic Value in Interaction: Reflections on the Conceptual Designs of Digital Music Players. In Proceedings of DPPI.

Wednesday, April 16—Video sketches

John Zimmerman (2000): Video Sketches: Exploring Pervasive Computing Interaction Designs. IEEE Computing 4(4). 91-94.


Class begins at 10:30 am sharp and continues until 11:50 am. You must arrive on time and remain until the class ends. Frequent absences and late arrivals are disruptive and inconsiderate to the rest of the class and will adversely affect your grade. If you can’t attend class, inform me in advance by e-mail.

Discussion Guidelines

Discussing your work is an essential part of the design process. Feedback from your colleagues could help you to see a new potential direction when you are stuck, or validate the direction you have chosen. The following guidelines should encourage constructive comments and help you learn to use this tool effectively.

First and foremost:

Never take what is said about your work personally! Your work is just your work, the idea you had and presented, not a reflection of you as a whole or your worth as a human being.


Be selective about the comments you accept. Don’t take everything that is said as a cardinal rule. Design is not an exact science and your colleague’s opinion may not be as valid.


When giving comments, put a positive spin on the things you say. There are no bad solutions in this class (only more appropriate or less appropriate solutions, more or less successful). Please offer your reasons for your opinion. It’s important to develop your vocabulary because active dialogue is invaluable in learning about design.