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 updates the monitor list on the right, but not the graphical display on the left.
- The Horiz button clears the graphical display on the
left and shows N boxes lined up horizontally,
where N is the number of monitors. All the boxes are
empty.
For example, if 3 monitors are plugged in, the display would
look like the picture on the right.
- The Vert button is the same, except the N empty boxes are lined up vertically.
- The Grid button does the same, except it displays N×N
empty boxes arranged in a square grid. For example, if 3 monitors
are plugged in, the display would show 9 empty boxes.
- Clicking on a monitor name in the list on the right highlights it.
- Clicking on a box in the graphical display assigns the
selected monitor to it. If it was already assigned to another box,
then the other box becomes empty. See the picture on the right
for an example.
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 use it to make small changes on the display without redrawing it -- for example, when a selection changes, you might simply erase the old selection and shade in a new one.
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. Make sure you set up the initial view of your interface to match the initial monitor setup.
One person in your group should be the Computer; the other(s) should be 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.)