15%: Phase #3: First design (low-fidelity prototypes + description/tutorial)

From the task examples and requirements (in the following Appendix), your team should sketch out several competing interfaces. Discuss and choose the most promising of these, and develop a low-fidelity prototype that demonstrates how the interface fulfills the requirements. Specifically, use the key users, their tasks, and the prioritized requirements as a type of requirements document to help you brainstorm prototypes that illustrate how your system would appear to the customer. You should be creating low-fidelity prototypes. You should not be concentrating on prettiness or completeness; rather, you are trying to show the overall interaction style of your system. Each early prototype should contain the core screens that illustrate how the system will work as a whole, including (perhaps) a sample interaction based upon some of the key tasks. Hint: To get diversity, each group member may want to try to create a few rough sketches before gathering as a group. You should also realize that some people may be better at this than others; this is not supposed to be a competition.

Submission:

  • Add a link from your overall project page to this phase.
  • Include images of each of your prototypes (pictures of paper prototypes and screenshots of balsamiq prototypes) and add these pictures to the wiki (one page per prototype).
  • On the wiki, write a section describing your evaluation phase. Include a description of what you did and what you learned.
  • For the refined prototype, also include pictures of each page, and include a written description/tutorial of it.


Appendix: Developing and Evaluating Initial Prototypes

Step 1. Developing low-fidelity prototypes

Use the key users, tasks, and system requirements generated previously as a type of requirements document to help you brainstorm prototypes that illustrate how your system would appear to the customer. You should be creating several (at least one per group member) low-fidelity prototypes. Each group member must create at least one paper prototype and one Balsamiq prototype (See Appendix below)

You should also be thinking about what mental model the system will portray to its customers. You should not be concentrating on prettiness or completeness; rather, you are trying to show the overall representation and interaction style of your system. Each prototype should contain the core screens that illustrate how the system will work as a whole, including (perhaps) a sample interaction based upon some of the key tasks. You should consider all the design and perception issues we have discussed in class, as well as your general knowledge of other systems (there is nothing wrong with copying ideas, but you may not copy exact interfaces).

  • Your low-fidelity prototypes should convey the visual design for your project and show the main screens (probably 2-8 screens for each design), with text labels, buttons, graphics, etc. An easy way to do this and explain the system is to write an introductory tutorial, which largely shows the main screens and explains what is happening in each one as the user carries out a common task sequence (such as logging in, doing a search, seeing the search results, and sending it to someone).
  • Words are important - you must include the primary interface text in your prototypes
  • Transition diagrams can give a good overview, be sure to provide at least one.

Hints. To get diversity, each of you should create a few rough sketches before gathering as a group. You should also realize that some people may be better at this than others; this is not supposed to be a competition!

Step 2. Evaluate the prototypes

Your next step is to evaluate the prototypes.
  • Discuss each prototype to see whether it is a possibility in principle (e.g., are there obvious problems with the conceptual model? Is it implementable?)
  • Do a task-centered system walkthrough for each of your key tasks, and each of your user types.
  • From the ones that are left, elicit informal reactions and further discussion from customers / counter people / appraisers. You may find that your end-users will tell you about further tasks and task details that were not thought about before.

Step 3. Reconsider priorities, and make a decision

Based on the prototype and evaluation exercise, you may wish to reconsider what customers you will address as well as what tasks and requirements you will support. It could be that you were wildly optimistic about what you could do! At this point, you should have a reasonable idea of which prototype styles are worth pursuing, or whether you should start again. Make your decision on what direction(s) to follow. If you have more than one direction, you may want to continue developing both a bit further. If you have no worthy candidates, return to step 2.

Hint. Don't feel committed to any prototype. This is the time where prototypes are quick to generate and cheap to discard. Use this time to explore the design space. While you may want to just get on with it, a bad design choice now can have disastrous and expensive repercussions later.

Step 4. Refinement

Based on the previous steps, select one prototype and refine it by considering what you learned from the other prototypes, the nuances of each task, the functions that must be incorporated, and the expected reaction of each user. You may want to start considering the more subtle aspects of interface design at this point (e.g., psychology of everyday things, principles of graphical screen design, design principles).

Appendix: Balsamiq


Balsamiq (http://balsamiq.com/) is an online tool for creating low-tech prototypes. We have free access to the tool for this class. We are currently setting up accounts for each student who will be able to access a group project that we created for each project. Please contact the TA if you have questions about accessing Balsamiq.