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.
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:
- When monitors are physically plugged and unplugged, the interface automatically adds a monitor to the display, but doesn't connect it to any others (like monitor 3 on the right).
- Clicking on a monitor should select it (with a shaded highlight) and deselect any other monitors. Monitor 1 is always the initial selection.
- The Connect button joins two monitors together. To join the selected monitor to another, click Connect, then click the edge of the other monitor that should be connected. The other monitor is moved next to the selected monitor, sharing their common edge. An example can be seen on the right.
- The Disconnect button disconnects two monitors from each other. To disconnect the selected monitor from another, click Disconnect, then click the monitor that should be disconnected. The monitors are redrawn slightly separated.
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.
- Set up your interface to match the initial monitor setup in the task.
- Give the other group the task to do, but no other information about the interface.
- 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.)