51422 | Spring 2008
10:30–11:50 Mon/Wed MM 227
Jamin Hegeman, Instructor
jamin [..at..] cmu [..dot..] edu
Office: MM 215 (by appointment)
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.
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.
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
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.
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.
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.
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.
Students will design a physical device that allows for two-way communication between a set or two groups of people.
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.
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
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.
DFI, Chapter 6
“Color for Coders” by Jason Beaird
“Design Eye for the Usability Guy” by the Design Fab Five
Mark Weiser (1991) The Computer for the 21st Century
Mark Weiser and John Seely Brown (1995) Designing Calm Technology
DFI, Chapters 4 and 5
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.
Recognizing gestures: Interface design beyond point-and-click
Interactive Gestures (Chapter 1)
Interactive Gestures Pattern Library
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.
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.
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.
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.
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.