CS 330: Intro to HCI

CS 330: Intro to HCI

Prototyping Round 1

Due on Wed, 02/19 @ 11:59PM. 5 Points.

Instructions

Over the next three group assignments (P5, P6, and P7), you will build a computer-based prototype of your project that supports the three to five tasks described in your scenarios. To provide some guidances for this process, the course staff and I have compiled a list of front-end components that you can select from to instantiate your scenarios.

Each week, you should implement (at a minimum) one new component, which should support one of your tasks. This means you should have one component and task implemented in P5, two in P6, and all three in P7. If you have a group size that is less than 3 or greater than 4, your requirements will be different. Check with your TA.

NOTE: The above applies if you are in a group of 3 or 4. If you are in a group of 2, you will implement two components over the course of three weeks. If you are in a group of 5 or more, you will implement at least 4 components (check with your TA) to get guidance on this.

In studio for the rest of the quarter, you will be doing user tests of your computer prototype with the other students in your section. 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 in P8.

We strongly recommend that you implement the tasks and components that you think are the riskiest first. A task or component 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 for P8.

Components

A list of components is described in detail on the components page.

Building your computer prototype

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 component. In other words, when you open your application, the user should see all of the options needed for this one task and component, but it’s fine if the options for the other tasks and components 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.
  4. Fulfill the component requirements
    For each component you implement, make sure it meets the minimum requirements for that component (see above).

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 studio. You will be reporting your findings from user testing in P6, so you should prepare your materials as you work on P6, even though you wont turn anything in for this assignment. 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 studio 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 studio 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 for P5.
  2. Component
    A brief description of the component you chose to implement for P5.
  3. Link
    Create a branch in your team’s repository called project_5 and push all the code you want your peer mentor to assess for this submission to that branch. It’s fine to have additional working branches in your repository as long as your project_5 branch is not edited after the submission deadline. Then submit a link to your team’s project_5 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 one paragraph about how your prototype for this task scenario and component applies Norman’s user interface design principles, and one paragraph about how your prototype applies the graphic design principles covered in class (you should have exactly two paragraphs, no more, no less). 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.

Rubric