Paper Prototyping

Due on Wed, 02/12 @ 11:59PM. 20 Points.

The goal of this project is to build and test a paper prototype of your initial UI, which will support some of the tasks outlined in the scenarios you described in P3. To do this you will:

1. Create paper prototypes of the UI features you want to examine.
2. Prepare for testing by designing tasks that users should accomplish by using your prototype (grounded in the scenarios and personas you designed).
3. Test your paper prototype with at least three users who are not taking this class and video record it.
4. Make a video of your team testing your prototype.

Build your paper prototype

Your prototype should be complete enough to “run” a new user through each of your tasks. You can use hand sketches or any drawing applications to create your prototype. Either way you should print out your designs and test a paper-based prototype. Make sure your prototype will allow you to test the riskiest parts of your design, tasks or features that you’re concerned may be unimportant or unusable.

Caveat: In the past, teams have used mockup software that has already committed to things like colors, fonts, etc. Please do not do this. Your prototypes should look intentionally low-fi / rough, because you want your user to focus on the interactions, not the look-and-feel.

Prepare for Testing

Before testing your prototype, you should:

1. Prepare a briefing for test users about the purpose of your app and any background information that may be needed. It should not describe how to use the interface.
2. Write each of your 3-5 tasks (grounded in your scenarios) on a separate index card. Just write the concrete goals of the task (e.g. “buy milk, tomatoes, and bread”).
   • Don’t write the specific steps to follow, since that’s for your users to figure out.
3. Choose roles for your team members.
   • One person plays the “computer”
   • One person acts as the facilitator
   • The other team members are observers It may be useful for you to swap roles, so that each of you gets a chance to try each role. See the lecture on paper prototyping for more information.
4. Practice running your paper prototype. It isn’t important to be fast, just competent and confident.

Run the Tests (and Video Record Them)

When you run your prototype on a user, you should do the following things:

• For the tests you will be video recording, make sure to ask your participant for permission to video record.
  • Explain how the video will be used (shared only with the project team members and CS 330 course staff).
• Read your briefing to the user (approximately 30 seconds).
  • Make sure to remind them that you are testing the interface not them.
• Present one task. Hand the index card to the user and let them read it. Make sure they understand the task. Ask them to talk out loud as they perform the task.
• Watch the user perform the task. Take notes from your observations. Do not interject telling the user how to do something. You’re not going to be hovering over real users, so it’s important to understand how they struggle with your UI, no matter how painful it is for you to watch.
• Repeat with each of your tasks.
• Bring extra materials. Having extra blank Post-it notes and index cards will help you improvise or make small fixes to your prototype between users.

Make a Video

Create a video that clearly shows the following components:

1. Prototype. Make sure we can see the paper prototype itself.
2. Briefing. Make sure we can hear the briefing you give to users.
3. Tasks. Make sure we can hear the tasks you give to users.
4. User Interaction. We want to see and hear a real participant using your interface, and see how you act as the computer “back-end”. You only need to show video of one of the three users that you test with.
5. Observations. A verbal description of the usability problems you discovered from the testing. This should be narrated by someone on your project team. Use your prototypes to illustrate your observations. You should mention interesting observations from all three participants (not just the one included in the video).
6. Resolutions. What did you learn about the parts of your interface from this prototype? Propose design solutions for the usability problems you found. You should discuss resolutions for issues encountered through testing with all three participants (not just the one included in the video).

Your video should no longer than 7 minutes!

Rubric

The following criteria will guide the grading of your video:

• Briefing (2 pts)
  • Explains that the user will be testing a paper mockup
  • Describes the interface and how it works
• Tasks (6 pts)
  • Video shows 3 or more tasks
  • A team member reads the task to the user, or task is handed to user and displayed on the screen somehow for the viewer (the viewer needs to know what the task is)
  • Task description presents a clear goal, but does not tell the user specific steps for how to accomplish the task.
• Running the Test (2 pts)
  • Clear roles played by team members (one facilitator, one computer)
  • Team members do not give the users hints if they get stuck (unless they’re hopelessly off track)
• Quality of Observations (3 pts)
  • Discussion of the most pressing usability problems
  • Clear summary of the usability problems / what worked well
• Quality of Resolutions (3 pts)
  • Discussion of next steps for high-fidelity prototype
  • Proposed appropriate solutions to the usability problems encountered
• Quality of Paper Prototype (4 pts)
  • Focus on interactions versus aesthetics
  • Paper overlays / sticky notes used to support interactions
  • Appropriate size for interactions (larger-than-life is often best)
  • Prototype is clear

What to Hand In

A link to a video (YouTube, Vimeo, etc) showing your paper prototype in action.