Your Names:

6.831 • User Interface Design and Implementation

Massachusetts Institute of Technology
Department of Electrical Engineering and Computer Science
Fall Semester, 2006

AC7: Paper Prototyping

The purpose of this activity is to learn more about paper prototyping, and see how a simple, hand-drawn prototype created in less than 5 minutes can reveal usability problems. You will create your prototype directly on this paper.

Design sketch

1 Make A Paper Prototype

Your job is to prototype a dialog box for configuring multiple monitors. A small sketch of the design can be found on the right. Its behavior should be as follows:

Using the attached sheet, prepare a paper prototype for testing this design. Draw the static parts of the design (like the window frame and buttons) directly on the paper. Use Post-it notes for the dynamic parts of the design. Whenever something changes, draw a new Post-It note for the new display. If you have a pencil with an eraser, then you can make small changes on the display without redrawing it -- e.g., when a selection changes, you might simply erase the old selection and shade in the new selection.

2 Prototype Practicing

Practice running your prototype for a bit. One of you should act as the Computer, making changes to the prototype in response to the other group member's inputs. If you find any gaps in the design specification given above, decide how to resolve them.

3 Prototype Testing

Join up with another group in the class, and take turns trying each other's prototype. The task you should give them is printed on the attached sheet, above your paper prototype.

  1. Set up your interface to match the initial monitor setup in the task.
  2. Give the other group the task to do, but no other information about the interface.
  3. The Computer should then manipulate the UI, while the other(s) in your group act as observers, taking notes about any usability problems you observe.

List the usability problems you observed in the space below.

Task: Your current monitor setup has a Dell monitor and a ViewSonic monitor, arranged side-by-side. You have just bought a third monitor, from NEC, and plugged it in along with the other two. You want your new NEC monitor to be on the shelf directly above the Dell monitor. Use the interface below to make it happen.

(The paper prototype should appear below.)