User Centered Design and Prototyping

User-centered system design and participatory design both argue that users should be an integral part of the design process.  One important means for involving users is through prototypes. Through prototypes, users can react to ideas and even take part in building and modifying them.

Prototyping methods move from low to medium fidelity: paper sketches, storyboards, Pictive, scripted simulations and so on, each getting slightly more sophisticated. Early versions of prototypes should be very low cost (e.g., paper and pencil, postit notes, etc), and its purpose should be to garner high-level reaction and input from the user. As the design progresses, prototypes should become more refined and the user's input should reflect smaller, but still important, design and usability decisions.

Two assignments are used to complement this section. In the assignment on task-centered design and prototyping, students have to create initial prototypes. In the follow-up assignment, students redesign their prototypes and implement a working prototype. Together, these becomes a capstone assignment, where interface development uses some of the methods taught here (e.g., storyboards, horizontal prototypes, and a vertical prototype that serves as a proof of concept).

Overheads

Topics covered

Required Readings

  1. Chapter 4.8 Prototyping. (Extract) from Nielsen, J. (1993) In Usability Engineering, p93-101, Academic Press.
  2. Prototyping for tiny fingers. Rettig, M. (1994) Communications of the ACM, 37(4), ACM Press
  3. Low vs. high fidelity prototyping debate. Rudd, J., Stern, K. and Isensee, S. (1996) Interactions 3(1), p76-85, ACM Press.

In-class teaching tips

Most techniques are demonstrated live. For example, we do a walk-through of a storyboard design. I then introduce an interface as a Pictive design, and a volunteer student interacts with it. The student and class identify problems, and we redesign the system on the fly by having people construct new components/labels etc on postit notes. Also, I have (sometimes) devoted a class to a live Wizard of Oz demonstration.

This topic also has a hands-on component: the assignments on task-centered design and prototyping, which is optionally continued in the final course project. Leading up to the design of a substantial interactive system, these assignments require students to prepare a paper prototype, and then later a working horizontal prototype of their system. Each prototype is examined by the teaching assistant and discussed in lab time by the class for their reaction, and students are expected to modify their designs accordingly. Most students' designs change quite a bit from the paper version to the working prototype. Their final implementation usually reflects refinements of the design presented in the working prototype.

Additional Readings

  1. Performance by design: The role of design in software product development. Bill Buxton. 2003 Proceedings of the Second International Conference on Usage-Centered Design. Portsmouth, NH, 26-29 October 2003 http://www.foruse.com/2003/
  2. How to design usable systems. Gould, J. (1995) In Baecker Grudin Buxton and Greenberg, Readings in Human Computer Interaction: Towards the Year 2000 (2nd Edition), Morgan Kaufman. Originally written in 1988, this great article shows how user involvement and prototyping work together effectively
  3. Prototyping an intelligent agent through Wizard of Oz, by Maulsby,D., Greenberg, S. and Mander, R. (Proc ACM 1993 SIGCHI Conference) Gives an example and provides the guidelines to help structure the Wizard of Oz methodology.
  4. Participatory design of a portable torque-feedback device, Good, M. (1992), ACM CHI'92. Reprinted in Baecker Grudin Buxton and Greenberg, Readings in Human Computer Interaction: Towards the Year 2000 (2nd Edition), Morgan Kaufman. A good example of participatory design combined with prototyping

Videos

  1. Sketching like Crazy with Silk, by James Landy , ACM CHI'96 Video Program. Silk is a research prototyping tool that lets designers sketch out a working interface to create an active storyboard.

Last updated July 2005