Design and Prototyping for Drupal

Creating a Paper Prototype

The best place to start is the sketches you’ve already made—whether they’re in a notebook, or done in a program like Fireworks or Balsamiq Mockups. In a YouTube example of a paper prototype test from Blue Duck Labs for a kid’s educational website (http://youtu.be/9wQkLthhHKA), the examples are mocked up from screen wireframes; in another example from South African UX designer Werner Puchert (http://youtu.be/y4Wwnt9KIjg), each aspect of the prototype is sketched by hand. What you decide depends on where you are in the project and what you’re comfortable with. At the least, the prototype should have:

• A place to start. This could be the home page; it could be a specific section of the site you’re focusing on.

• Somewhere to go. Each paper prototype should be focused on a specific set of tasks, so make sure that your prototype includes each screen related to that task.

• An indication of what happens when you go there. This is the most important part. In a paper prototype, you’re trying to assess the interaction that’s happening, and make sure that users understand how it is meant to work. Most importantly, users should be able to understand how it works without you having to tell them.

The last point is one of the key benefits of keeping paper prototypes low-fidelity. If, for example, a user clicks on a button you weren’t expecting them to click on, you need to be able to show them the interaction that will happen when they click on it. If you’re keeping to low-fi ...