This assignment has two pieces. First, bring your ideas to life by creating a short video prototype. Video prototypes help show how an interface works in a particular use context; it's great for illustrating the relationship between motivation and design decisions. They're especially valuable for mobile interfaces. The video must be less than four minutes long. Second, help another team by conducting a heuristic evaluation of their paper prototype. Together, these pieces will complete the prototyping phase of the project, providing you with the feedback you need to begin implementing. Your team should plan and shoot the video together. Two of your team members should edit the video; the third will conduct a heuristic evaluation.
Video enables you to show a user in their actual environment: for example, if you were building a mobile health care solution that alerted the user when she needed to interact with it, your video prototype would show the user going about an everyday activity, show her be alerted by your device mockup, and then interact with it. Similarly, if you were prototyping a new type of laptop, or cell phone, a video prototype would illustrate these devices in use, in a relevant location.
Your video should clearly explain the motivation/goal of your design work, and demonstrate an interface by which a user achieves those goals.
Don't aim for Oscar-worthy performances and editing; that's not the point. The goal is for your video to effectively convey a sense of context and meaning to your prototype's intended situation. Similarly, make sure your video focuses on how and why a person uses your interface. A bit of humor is fine, but this is not your tryout reel for comedy central. To save production time, plan your shooting to minimize the number of cuts and edits.
If you don't have a digital video camera, they're available for any student to check out from Meyer Library. You can also use a point-and-shoot with video capabilities.
We STRONGLY recommend using iMovie for the video editing. In terms of basic usability, we recommend it over Windows Movie Maker. We also recommend iMovie over more sophisticated software; for the purposes of this assignment, fancy video editing software will only slow you down. We'll provide a tutorial on shooting good footage and basic video editing in lecture.
As a part of the video prototyping assignment you will be doing a heuristic evaluation. The heuristic evaluations will be a way to highlight usability issues in your paper prototypes. These heuristic evaluations will be performed in group pairs. One or two group members will perform a heuristic evaluation of another groups paper prototype in trade for getting heuristic evaluation feedback on their own paper prototype.
Heuristic evaluations will follow the "How to Conduct a Heuristic Evaluation" and "Ten Usability Heuristics" readings by Jakob Nielsen.
After filming for the video prototype we imagine that groups will have 2 members do video editing while the third member does the heuristic evaluation.
This week you wil submit as a group, rather than an individual. There are two deliverables:
1) A video prototype. To submit your video prototype, first upload it to YouTube, then embed it in your submission. Note: plan on it taking about an hour for your video to to be encoded and fully available on YouTube, so upload your videos well ahead of the submission deadline.
2) A heuristic evaluation of another group's paper prototype. This comprises a bulleted list of usability issues you found, along with their severity.
Each group will show their video, and the other studio members will then discuss what they learned from watching the video prototype and suggests areas for improvement and investigation going forward into the functional prototype. Groups will be paired with each other to offer critiques.
Each person in your team can get 10 extra points by adding on to your "Inspirational Design" assignment. At this point in the project, it will serve you well to revisit related work and find additional sources for inspiration. For this extra credit, identify a list of additional sources and analyze one of them. Each group member does his/her own individual extra credit assignment.
After studio, log into the web site and take a moment to assess your group's work. Do so by selecting the cell that best describes your assignment for each of the four dimensions.
| Grading Dimension | Guiding questions | Bare minimum | Satisfactory effort & performance | Above & Beyond |
| Motivation (15 points) |
Is there a task and user whose goals are richly and authentically portrayed? Is the problem/need crisply articulated (as opposed to just vaguely alluded to)? Does the video motivate a need, and demonstrate a concrete setting/context? Did the video prototype successfully convey the context around your task? | (0-11) There's not a clear motivating need and/or the user's task is unclear. | (12-13) The video articulates a clear goal/motivation, and illustrates it in a concrete setting. | (14-15) The video presents a creative, lucid motivation, and a compelling vision of the system's goal. |
| Clarity & Concreteness (15 points) |
Is it clear how an actual user interface accomplishes the task? Does it help viewers imagine what a real product would look/feel/fit like? Does the prototype show how a person interacts with your system with enough clarity to be understood by others? Can we see what the screen looks like, and how the user manipulates the interface? | (0-11) The interface is only vaguely specified, and/or it's unclear what the user does with it. | (12-13) Video showed a complete task, and the main user interface elements that achieve it. | (14-15) The video shows the user interface for the main task as well as ~2 related tasks, e.g., other parts that help accomplish the goal or other uses for your system. |
| Presented Solution (15 points) |
How well does the interface illustrated through the video prototype address the user need? Did the video prototype illustrate a coherent and realistic logic to complete the desired task? Does the interface demonstrably solve the problem / achieve the goal? Is the solution creative -- i.e, both novel and useful? | (0-11) The relationship between the goals and the design is unclear and/or its unclear at the end if the goals have been achieved. | (12-13) Design decisions are clearly tied to goals, and the interface clearly helps the user achieve their goal. | (14-15) The design decisions clearly and creatively address the motivating goal. |
| Production (5 points) |
Can the viewer hear what's being said and see what's happening? No need for big budgets or special effects, but just like writing, a video prototype should be clear. | (0-2) It's difficult to hear what's going on; no or few clear images of the interface. | (3-4) Generally possible to see and hear what's going on. | (5) Can clearly hear any dialogue and clearly see on-screen interactions. |
| Heuristic Evaluation (max 25) |
Did you perform a thorough heuristic evaluation based on readings? Did you generate useful feedback for your partner team? | (0-18) vague or obvious critique of your partner team's prototype; not clearly tied to heuristics. Too little feedback to be useful. | (19-22); applies heuristics to partner's prototype in a useful, organized way | (23-25) insightful, widely varied feedback, clearly grounded in nielsen's heuristics |
To help guide your your work and your assessment of it, here are two examples of highly successful video prototypes. Both would be graded as "above & beyond" using this rubric. Above & Beyond #1:clear motivation. Shows both major task and supporting tasks. Interface shown clearly.Only problem: cool staccato pictures effect took a long time to make -- unnecessary for this assignment. Above & Beyond #2: Clear motivation. Wonderful use of paper interface mockups. Interface designs tied to clear need. Uses video as a way of brainstorming multiple alternatives; this can be used to decide which subset are most compelling to implement. Only problem: at times, sound is unclear. (We decided not to post less successful examples because it's hard to anonymize video. But if you visit Scott or a TA's office hours, they'll show you some.)
We don't have graded examples of a heuristic evaluation because it's new to cs147, but here's an example HE report from the University of Washington. Note: this report also describes fixes, which you aren't required to do as part of this assignment.