From CS 160 Fall 2011
Due: before class on October 17, 2011
The goal of this assignment is to learn how to use low-fidelity prototyping in the early stages of UI design. You will first build a low-fi prototype and then perform a simple usability test. 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 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 prototype using paper and other simple materials commonly used in grade-school art classes. Half an index card or a large Post-it is a close approximation of the screen size of a mobile device and prototyping with these can give a good sense of the limited screen real estate you'll have on a real device.
Once you have developed the prototype 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 cannot be 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. Click here for a more information on informed consent.
Optional: Prototyping in myBalsamiq
If you prefer, you can implement your low-fidelity prototype in myBalsamiq *rather* than as a paper prototype. myBalsamiq is a web tool for collaboratively building low-fidelity mockups of user interfaces. More information about the product is available here. You may find this to be a useful option if your team has trouble meeting together in person. It is not, however, necessarily easier or better than building a paper prototype. The course staff will only be able to provide very limited support for working with myBalsamiq: you'll mostly be on your own if you go this route.
We have a site license available for use by all students in 160. If your group is interested in using myBalsamiq for this assignment (or if you would just like to play with the tool) please email the course staff with your team name. We'll set you up with an account. Don't wait until the last minute to do this! It may take us up to 24 hours to respond.
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:
- I don’t agree this is a usability problem.
- Cosmetic problem
- Minor usability problem
- Major usability problem: important to fix
- 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 6-10 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
- Introduction and mission statement (1/4 page)
- Prototype description, with sketches and a picture of the entire system (1-2 pages)
- Participants (1 paragraph)
- Environment (1 paragraph)
- Tasks (1 page)
- Procedure (1 page)
- Test Measures (1/2 page)
- Results (1 page)
- Discussion (3/4 page)
- Appendices (as many pages as necessary - link from text into the appendices)
Writing and Experimentation Guidelines
Introduction and Mission Statement (6 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 (12 pts)
Describe your prototype. Reference sketches of the interface screens in your description. Finally, submit a image file of the entire system with all of its elements laid out.
Method (12 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).
Results (12 pts)
Summarize the results of the experiment from your data.
Discussion (12 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 (6 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 6-10 page total.
To upload images to the wiki, first create a link for the image of the form [[Image:image_name.jpg]] (replacing image_name.jpg with a unique image name for use by the server). This will create a link you can follow that will then allow you to upload the image. Alternatively, you can use the "Upload file" link in the toolbox to upload the image 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 begining of class on October 17th.
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:
Again replace ExampleGroup with your group's name. 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.
- Group:Team Wasp
- Group:Team K
- Group:Team Fugue
- Group:Team Pint
- Group:Team Midst
- Group:Team Film
- Group:Team Yttrium
- Group:Team Arugula
- Group:Team Opus
- Group:Team Orange
- Group:Team Silver
- Group:Team Purple
- Group:Team Month
- Group:Team Circle
- Group:Team Rhythm
- Group:Team Plinth
- Group: Team Siren
- Group: Team Plankton