Assignments > P3. “Paper” Prototyping

Due on Sun, 02/21 11:59PM.

The goal of this assigment 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 P2. Specifically, you will:

1. Build a prototype 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 your research).
3. Test your 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.

Given that we cannot be together in the same room during COVID, we will be using Balsamiq (prototyping software) to create low-fidelity prototypes of your app idea. You should download it and use the license key published on Canvas.

Build your Balsamiq prototype

Your prototype should be complete enough to “run” a new user through each of your tasks. If you have any questions around how to prototype particular tasks related to your app idea, ask Sarah or Cooper. 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.

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 acts as the facilitator
   • [Skip for now] Typically, one person plays the “computer,” but given COVID, the user will be interacting with Balsamiq on their own.
   • 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.
4. Practice running your Balsamiq prototype with each other. 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. Then allow the user to read the instructions for themselves. 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.

Make a Video

Create a video that clearly shows the following components:

1. Prototype. Make sure we can see the 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).

Please ensure that your video is no longer than 7 minutes

Rubric

The following criteria will guide the grading of your video:

• Briefing
  • Explains that the user will be testing a low-fidelity mockup
  • Describes the interface and how it works
• Tasks
  • Video shows 3 or more tasks
  • Task description presents a clear goal, but does not tell the user specific steps for how to accomplish the task.
• Running the Test
  • 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
  • Discussion of the most pressing usability problems
  • Clear summary of the usability problems / what worked well
• Quality of Resolutions
  • Discussion of next steps for high-fidelity prototype
  • Proposed appropriate solutions to the usability problems encountered
• Quality of the Balsamiq Prototype

What to Hand In

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