CMSC 434 - Spring 2009
Prof Bederson

Introduction to Human-Computer Interaction

Project Phase 2: Prototyping

Due Thursday, April 2, 11:59pm

Overview

During phase #2, you will focus on the "Ideation" and "Idea Selection" steps of the design process. Using the results of phase #1, your team will explore several ways to serve your personas' goals, select the most promising solution and create a medium fidelity prototype for this solution.

Steps

1. Design challenges. (10 points)  Identify three key problems that your group will need to solve.
   • Problems may be directly related to user goals that are difficult to serve, or they may be problems that came up with interviewees in phase 1.
   • One problem should be primarily social in nature (i.e. trust, security, etc.). One problem should be primarily interface-related. The remaining problem can be anything you think is important, as long as it is directly connected to what you did in phase 1.
   • For each problem, describe:
     • Where it originated (specific user goal, interview, etc.).
     • Why you think it's important.
     • Why it's hard. (If an acceptable solution is obvious to anybody who knows your project, it's probably not a very interesting problem.)
        
2. Brainstorming. (30 points)  The goal here is to thoroughly explore the design space, with regard to the problems you've identified. Meet together and conduct three brainstorming sessions, one for each of your design challenges.
   • Cover the design space of each problem as thoroughly as possible. Aim to have at least 30 distinct ideas for each of your three design challenges (total 90 ideas). Scoring of this part will reflect the variety, spread, and creativity of the ideas.
   • You'll probably want to find an empty classroom or some other place with a whiteboard or chalkboard.
   • Include a digital photograph of whatever medium you used to take down your ideas (i.e. the whiteboard).
   • Include a list of all of your ideas, separated by each of your three design challenges.
   • Since everyone will be contributing to the prototypes (below) and the rest of the project, it is important that all group members be present.
      
3. Idea selection and final prototype. (40 points)  Now that you've explored the design space, it's time to select the best ideas and develop a medium-fidelity prototype.  Meet as a group and go over the results of the brainstorming.  Make note of the solutions and elements that work and develop them into a full interface design for your system.

   The deliverable will take the form of screenshots that illustrate a path through the system, or an interactive system. It should be detailed enough to narrate your solution to a stakeholder. I strongly recommend picking a tool that is lightweight for *you*, so pick a tool that will enable you to think and create the prototype quickly and communicate the results clearly.  Since the goal is to communicate to each other, to the grader, and to the validator, you do not need to have interactions working, but rather just enough to communicate the design and interaction - which can include you explaining it. It needs to be clear enough to convey your ideas, but does not need to be intricate or beautiful. I encourage you to start with paper sketches before you get to the medium-fidelity prototype stage.

   • You have several options. In any case, you may find that an informal font (i.e. Comic Sans) conveys the tentativeness of your design, so that people won't mistake your mock-up for an attempt at building a working program. Some possibilities are:
   • • You can create screenshots directly in PowerPoint. (View → Toolbars → ControlToolbox.)
     • Word processors such as MS Word and OpenOffice allow you to draw UI components directly into your document.
     • WYSIWYG HTML editors such as FrontPage and Kompozer similarly let you insert HTML form components into your document.
     • Visio has some capabilities for sketching user interfaces.
     • Rapid prototyping environments such as NetBeans, VB, and Flash will allow you to draw an interface onto a form. You don't have to write any code to do this.
     • You can also create static HTML pages by hand or by some other method to illustrate your interfaces.
     • You can use a drawing program or image editor and copy in images of the components you want.
     • Or try this new online Flash-generating GUI builder: SproutBuilder
     • An example powerpoint prototype is here.
   • The final product should be either a standalone system that can be run by unpacking the contents into a directory, or a presentation file (PowerPoint or OpenOffice) showing the solution. It should have the following form:
     • Title page: Group member's names, brief description of problems addressed, general approach
     • Screen #1: A large screenshot of the proposed solution, with captions
     • Screen #2: A large screenshot of the proposed solution, with captions
     • ...
   • If you decide to use HTML for this stage, then create a series of static HTML pages (no CGI required) illustrating your design.  It should support a path through the interface to illustrate your solutions for all of your design challenges.  Link the pages together by HTML links.  Buttons and other HTML components can be linked using JavaScript.  Just give the component an attribute of onClick="parent.location='page.html'".  If you're not familiar with creating web pages, this is probably a good warm-up in preparation for the implementation phase.  The TA can answer questions and point you to further resources.  Include your HTML files with your submission.
   • If your final product is a desktop application, then create an electronic prototype using a GUI builder - such as Visual Studio, or XCode. None of the interactions have to work, but you do have to provide some way of linking the screens together - i.e., a single button that says "NEXT", just for the purposes of communicating this prototype.
4. Validation. (20 points)
5. Once your final prototype is complete, you should validate it by running it in front of at least one representative of each of your target audiences. Because your target audience may well be difficult to find, it is ok for this phase of the project if your representative is not that close to your actual target audience. For example, your roommate that makes a point of trying to represent that audience is ok. During this phase, it is important that the person "running" the interface be mute (to avoid influencing users reaction) and that at least one other group member takes notes while observing user reactions. Be careful not to influence user's reaction by making comments.

   For each representative:

   • Describe the user test setting (where the test took place, which member of the team did what, duration of the test, what was the general layout...),
   • Describe what went well, and what did not go so well with your interface,
   • Write a summary of what you should change in your interface to serve this representative better.

Submission guidelines

• Attach all of your files to an email and send them to the TA with "CMSC 434-proj2" in the subject line.  Most groups will have the following:
  • 1 document (DOC or PDF) with the written answers for #1
  • a JPG image from your brainstorming session in #2
  • a presentation file (PPT or OPD), HTML files, or application for #3
  • another document (DOC or PDF) with the written answers for #4
• In addition to completeness, scores will be based on the logic, sophistication, and clarity of your answers.