Intro to HCI (MSAI)

CS 330: Winter 2021

Intro to HCI (MSAI)

Assignments > P4. Progress Report #1

Due on Mon, 03/01 11:59PM.

Over the next three group assignments (P4, P5, and P6), you will build a computer-based prototype that supports the tasks described in your scenarios (from P2). Some additional resources regarding project scoping can be found here:

Each week, you should implement (at a minimum) one new feature, which should support one of your task scenarios. This means you should have one feature implemented in P4, two in P5, and three in P6. If this scoping doesn’t quite make sense for your project, talk to Sarah and we can come up with some well-scoped weekly deliverables that better align with your specific project.

If you are in a group of 1-2, you will implement two features over the course of three weeks.

Scoping your deliverable

Prioritizing features for testing

I strongly recommend that you implement the tasks and features that you think are the riskiest first. A task or feature is risky if its usability is hard to predict, or if its usability strongly affects the usability of the whole system. You want to implement the riskiest parts of your interface first because you will have the most time to user test, get feedback from Peer Mentors, and iterate on your design before turning in your final version of the prototype.

Lab Sessions

In lab for the rest of the quarter, you will be doing user tests of your computer prototype with your classmates. This will give you an opportunity to get feedback and learn about the weaknesses of your design so that you can improve them for your final prototype.

Computer prototype guidelines

Your prototype should be:

  1. High fidelity in look
    Use this prototype to explore the graphic design of the interface for your chosen task. Lay out the controls the way you would want them to appear in a final production implementation. Make choices about colors, fonts, alignment, icons, and white space.
  2. Low fidelity in breadth
    Your prototype should only include the features needed for your chosen task and feature. In other words, when you open your application, the user should see all of the options needed for this one task and feature, but it’s fine if the options for the other tasks and features are not there yet.
  3. Medium fidelity in depth
    Your prototype should be sufficiently deep to allow a user to complete your chosen task scenario. However, when system responses are needed, make them canned (i.e. always the same) or random. To make sure you’re adequately testing your interface design, you should use realistic data in your canned displays. For example, if you were building an MP3 player and your prototype displays only three songs in the user’s library, that’s pretty unrealistic, so it won’t truly test your interface design. Make sure that your interface looks like it would in a final production implementation, even if the functionality is limited.

Note: Your prototype doesn’t need to look good or work well everywhere. Focus on ONE platform for now, and just let us know what we should view it on (i.e. Chrome on Windows 10).

Preparing for Testing

You should prepare to test your computer prototype in lab. You can re-use or slightly modify the materials from your paper prototype for this test. In particular, 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 your task on an 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 can support the user by giving the providing the briefing and the task index card. 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.

Running the Tests

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

  1. Read your briefing to the user (approximately 30 seconds). Even if this user tested your paper prototype in lab in the past, they may forget what your project is about.
  2. Present your 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.
  3. Watch the user perform the task. Take notes from your observations, and try not to giv the user hints. You’re not going to be hovering over real users, so it’s important to understand how the struggle with your UI, no matter how painful it is for you to watch.
  4. Try to test with at least three users during lab so you can see if everyone understands or struggles with the same parts of your interface.

What to Hand In

Submit a document to Canvas that includes the following:

  1. Task
    A brief description of the task scenario you chose to implement.
  2. Feature
    A brief description of the feature you chose to implement. See the list of suggested features to get some ideas.
  3. Link
    Please submit your deliverable as a link to your team’s GitHub repository (which you should make). Create a branch in your team’s repository called p4 and push all the code you want your us to assess for this submission to that branch. It’s fine to have additional working branches in your repository as long as your p4 branch is not edited after the submission deadline. Then submit a link to your team’s p4 branch. In addition, if you have a working demo online (highly recommended), submit a link to that as well.
  4. Platform
    The platform we should use to view your prototype (for example, Chrome on Windows).
  5. Design Summary
    Write 1-2 paragraphs about how your prototype applies Norman’s user interface design principles and the visual design principles covered in class. You do not have to mention all of the principles, just tell us how you were thinking about and applying some these principles as you were working on your prototype.
  6. Observations
    A written description of the usability problems you discovered from testing in studio. Use screenshots of your computer prototype to illustrate your observations.
  7. Resolutions
    What did you learn about the parts of your interface from this prototype (from testing)? Propose design solutions for the usability problems you found.

Rubric