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 (Powerpoint)

Topics Covered

  • Involving the User in the Design Process
    • User-centered system design
    • Participatory design
  • Specific methods for involving users
    • Verbal techniques
    • Storyboards
    • Tutorials and manuals
    • Pictive
    • The role of prototypes
    • Scripted simulations
    • Interface builders
    • Wizard of Oz

Required Readings

  1. Nielsen, J. (1993)
    Usability Engineering, p273-4, Academic Press.
  2. Rettig, M. (1994)
    Prototyping for tiny fingers. Communications of the ACM, 37(4), ACM Press
    • A simple way to build low fidelity prototypes, similar to Pictive
  3. Rudd, J., Stern, K. and Isensee, S. (1996)
    Low vs. high fidelity prototyping debate. Interactions 3(1), p76-85, ACM Press.
    • When are where you should use low vs. high fidelity prototypes

In-Class Activities

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. Buxton, W. 2003
    Performance by design: The role of design in software product development. Proceedings of the Second International Conference on Usage-Centered Design. Portsmouth, NH, 26-29 October 2003.
  2. Gould, J.D. (1996)
    How to design usable systems. In R. Baecker, J. Grudin, W. Buxton and S. Greenberg (eds) Readings in Human Computer Interaction: Towards the Year 2000, p93-121, Morgan-Kaufmann.
    • Originally written in 1988, this great article shows how user involvement and prototyping work together effectively
  3. Maulsby, D., Greenberg, S. and Mander, R. (1993).
    Prototyping an intelligent agent through Wizard of Oz. Proceedings of the ACM CHI'93 Conference on Human Factors in Computing Systems, Amsterdam, The Netherlands, p277-284, ACM Press.
    • Describes a sophisticated Wizard of Oz experiment, plus gives advice on how to apply WOZ.


  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.

Major sources used to prepare lecture material

  • The readings mentioned above