Low-Fidelity Prototype

From CS 160 User Interfaces Sp10

Jump to: navigation, search


Due: before class on March 15, 2010

75 Points



The goal of this assignment is to learn how to use low-fidelity prototyping in early stage design to present your ideas to stakeholders and to receive feedback and refine your design. You will first build a low-fi prototype and demonstrate how a user would interact with your system through a video prototype. You will then perform a simple usability test with the low-fi prototype. You will incorporate the results of the test into design changes in your prototype for the next assignment.


Now that you have had a chance to work with your teammates and develop your project idea, create a team mission statement that describes your goal for the project.

Consider the three tasks you developed in the last assignment. These benchmark tasks should include 1 easy task, 1 moderate task, and 1 hard task and they should give good coverage of your interface. In this assignment you will design a low-fidelity prototype to handle these three tasks, create a video prototype demonstrating the intended interaction for those three tasks, and then test your prototype design with a set of users.

Use the techniques described in the Prototyping for Tiny Fingers paper as a guideline. You should design your low-fi prototype using paper and other simple materials commonly used in grade-school art classes.

Once you have developed the prototype, you will create a narrated video prototype illustrating each of the three tasks using your proposed interface. Make sure to set up the story at the start of your video rather than just showing the UI interactions (the finished videos should show both).

Finally, you will find at least three participants to work through your benchmark tasks. The ideal participants will be members of your specific target user group. Your participants must not be students in this class and they should not be your friends. You should get them to sign an informed consent form explaining the test. Remember it must be voluntary.

Video Prototyping

We suggest you create your video using a combination of live recorded segments and a sequence of still images.

There are a number of sources available to you to learn more about creating video prototypes. Note that some of these examples would not be sufficient for this assignment as they only show UI interactions and are not narrated (both are requirements for your video):

We suggest that you use the SAM Animation software to assemble still shots into video sequences. The demo version of this software will be installed on machines in the instructional lab, or you may download it to your own machine. We will provide each group with a low cost camera and a flexible stand to help create your video prototype. To work with live footage, we suggest you use iMovie on the Mac or Windows Movie Maker or Camtasia Studio on the PC. Unfortunately the Macs in Dai 200 cannot run iMovie. You can use the older Macs in 349 Soda (24hr access).

Testing Procedure

Have one of your teammates demo the system to show each real participant how they would interact with your prototyped system to complete a simple task (don't use one of your three tasks in this initial explanation). Show participants how the system works in general.

You should write up a script of your demonstration and follow the same script with each participant. Once you have shown participants the demo, explain the first task. Tell them what they must achieve, but do not explain how to perform the task. When they are finished, you will explain the next task and so on.

During the experiment, you should make a log of critical incidents (both positive and negative events). For example, the user might make a mistake or they might see something they like and say, "cool". Write it down along with a description of what was going on. Collect all the incidents first (all observers do this). Then go over them again as a group to assign severity ratings. The ratings scale looks like this:

  1. I don’t agree this is a usability problem.
  2. Cosmetic problem
  3. Minor usability problem
  4. Major usability problem: important to fix
  5. Usability catastrophe: imperative to fix

Each participant will perform all 3 tasks. You will want to keep the data separate for each task and participant.


You will submit your printed essay of roughly 4-5 pages through the wiki and in class as described below. Your writeup should follow the outline below and will be graded using the writing and experimentation guidelines detailed below.

  • Each team member’s name and role in this assignment
  • Mission statement (1 paragraph)
  • Prototype description, with sketches, a picture of the entire system, and videos (1 page)
  • Discussion of Video Prototyping (1 page)
    • How did you make it?
    • Any new interesting techniques you came up with?
    • What was difficult?
    • What worked well?
  • Test Method (1 page)
    • Participants
    • Environment
    • Tasks
    • Procedure
    • Test Measures
  • Results (1/2 page)
  • Discussion (1/2 page)
  • Appendices (as many pages as necessary - link from text into the appendices)

Upload your videos and link them on the wiki. You may either submit one long video showing all of the tasks or three separate videos each showing one task. You should refer to these in your description of the prototype.

Writing and Experimentation Guidelines

Introduction and Mission Statement (5 pts)

Briefly introduce the system being evaluated. State the purpose and rationale behind the project as well as the experiment you are conducting. Then, present your mission statement. The mission statement should represent the common purpose and goal of the project. Each member of the team should agree on and be committed to achieving the mission statement. Describe the role of each team member for this assignment.

Prototype (10 pts)

Describe your prototype. Reference sketches of the interface screens in your description. Submit a image file of the entire system with all of its elements laid out, and also use the video prototype to help describe your system.

Video Prototype (35 pts)

You will be graded on how well your video illustrates each of the tasks and gives a flavor for your interface idea and how it will be used. You should show your prototype being used for at least three tasks, 1 easy, 1 moderate, and 1 hard. You will also be graded on whether the video properly shows the context of how the interface will be used (the back story). Your video must have audio narration. Finally, we will grade you on the description of how you made the video and the critique (positive/negative) of the technique.

Method (5 pts)

Describe the participants in the experiment and how they were selected. Also describe the testing environment and how the prototype and any other equipment were set up. Describe some details of your testing procedure. This should include the roles of each member of the team. To prepare for the experiment, you should assign team members to the different tasks (i.e., greeter, computer, facilitator, observer, etc.) and practice with someone playing the participant. The test measures detail what you looked for or measured during the experiment. You should concentrate on process data (i.e., what is happening in the big picture) in addition to bottom-line data (i.e., time or number of errors). You should have participants complete at least 3 tasks, 1 easy, 1 moderate and 1 difficult, using your prototype.

Results (5 pts)

Summarize the results of the experiment from your data. Explain how the users performed on each of the tasks (at least 1 easy, 1 moderate and 1 difficult task).

Discussion (10 pts)

Discuss your results. What did you learn from the experiment? How will the results change the design of your interface? Was there anything that the experiment could not reveal?

Appendix (5 pts)

The appendix should include copies of all materials involved in the experiment. This includes your consent form, demo script, and any instructions or task descriptions you handed out or read out loud to your participants. Finally, it should include all the raw data you gathered during the experiment. Merge the critical incidents logged by the observers and list them here. The appendix materials and screenshots do not count in your 4-5 page total.


Uploading Files/Videos

To upload files to the wiki, first create a link for the file of the form [[Media:yourfile.mov]] (replacing yourfile.mov with a unique file name for use by the server). This will create a link you can follow that will then allow you to upload the file. Alternatively, you can use the "Upload file" link in the toolbox to upload the file first, and then subsequently create a link to it on your wiki page.

Hand in Printout in Class

Print your assignment and hand it in at the beginning of class on March 15.

Add Link to Your Group's Page

Edit your group's page to add a link to a new wiki page for this assignment. The wiki syntax should look like this:

[[LoFi-Group:ExampleGroup|Low-Fidelity Prototype]]

Again replace ExampleGroup with your group's name. Look at Group:ExampleGroup for an example. Then click on the link and enter the information about your assignment. Be sure to clearly address everything mentioned in the writing guidelines above.

Add Link to Your Finished Assignment

One you are finished editing the page, add a link to it here with your group name as the title link. The wiki syntax will look like this: *[[LoFi-Group:ExampleGroup|Group:ExampleGroup]]. Hit the edit button for this section to see how I created the link for the ExampleGroup.

[add comment]
Personal tools