i213 Spring 2012: UI Design and Development

March 19, 2012

Functional Prototype Assignment

by Tapan Parikh

Due: Thursday, April 12th, 2012 at Noon

Objective: In this assignment, you will refine your interactive prototype based on feedback you have received. You will also provide enough functionality so that your prototype can be tested by users in a realistic way.

What to do:

  1. Review the feedback you have collected from users and classmates about your Balsamiq prototype. Decide the points that you plan to address in your next prototype, and any general changes you would like to make.
  2. Decide the tasks that you would like to support during your user testing. The tasks should provide the user with a complete and realistic feel for how the eventual application will work (or, for large projects, how some specific aspects of the future application will work). The interface should support both high-level user tasks (decide where you want to eat dinner tonight), as well as specific, low-level tasks (search for a restaurant open at 10PM).
  3. Revise and/or re-implement your interactive prototype based on the tasks that you intend to support. It is not essential that you implement all of the back-end functionality, or that you provide a completely refined graphic presentation (polished icons, visual design, etc.). However, your prototype should be complete from an interaction perspective – the user should be able to use all of the functions that he/she needs to perform the tasks that you have outlined. Moreover, the interface should provide sufficient functionality to gracefully allow exploration the user might do to perform these tasks. Any potential user errors should also be handled gracefully. In short, the system should provide a realistic and complete experience for the user while performing the tasks you have described.
  4. In class on April 12th, be ready with your interactive prototype. You will receive feedback on your prototype, including whether or not you have provided enough functionality to support testing with real users.

What to turn in:

The preferred method of turn-in is a PDF document, including each of the following components. To avoid a late penalty, e-mail a link to your group’s submission to the professor and TA before 12:00 PM (Noon) on Thursday, April 12th:

  1. Cover sheet including yourself and your partners’ names, and your chosen focus. Note the time, duration and attendance of each brainstorming session. Include a paragraph about what each person contributed to the assignment [1/2 page].
  2. The list of changes that you decided to make based on the last round of feedback. [1-2 pages].
  3. Describe the tools you used to develop your prototype, how they helped and/or created additional obstacles [1/2-1 page].
  4. Provide a link to your second interactive prototype, as well as directions about how to install and/or run it. Supplement with screen shots [1-2 pages].
  5. Be ready with your interactive prototype to be presented in class on April 12th.

The total length of your report should be less than 4 pages (not including any prototype screen shots). Brevity, clarity and focus on the goals of the assignment will be rewarded.

Please contact the professor or the class TA if you have any questions with this assignment.

Filed under at 3:33 PM
Comments Off on Functional Prototype Assignment

March 8, 2012

Balsamiq Prototype Assignment

by Tapan Parikh

Due: Thursday, March 22nd, 2012 at Noon

Objective: In this assignment, you will test your low-fidelity prototype(s) and use the results to inform the design of the first interactive prototype for your final project.

What to do:

  1. If you haven’t already, please find 2-3 potential users to test your low-fidelity prototype. Ideally this would be someone from your proposed user group.
  2. Ask each test user to step through at least three tasks outlined in your scenarios using your low-fidelity prototype. Utilize the “Think-Aloud” protocol described in class. Take detailed notes of each test user’s observations.
  3. Schedule a design team meeting to integrate your observations, and the observations from the formative evaluation conducted during the prior assignment. The output of this should be a set of revisions / suggestions / design directions to be implemented in your first interactive prototype. Make sure to note the source of each of these revisions / suggestions / directions, whether they came from one or several of the heuristic evaluations conducted by the design team members, from your initial user study, or emerged during the brainstorming.
  4. Design the prototype using Balsamiq Mockups. (This software has a 7-day free license.  You can ask the professor for a key if you need it for longer then that.)  You are free to use another tool (Powerpoint, Flash, HTML, etc.) if thats easier for you.  Once again, the prototype should be sufficient to at least “walk through” three of the tasks that you have included in your final project proposal. Utilizing wizard-of-oz techniques is fine, and recommended when you have not implemented some of the underlying functionality.
  5. In class on March 22nd, be ready with your interactive prototype to get feedback from other class members. This includes providing enough guidance, documentation and/or supporting material so that the user can understand the intent and operation of the prototype.

What to turn in:

The preferred method of turn-in is a PDF document, including each of the following components. To avoid a late penalty, e-mail a link to your group’s submission to the professor and TA before 12:00 PM (Noon) on Thursday, March 10th:

  1. Cover sheet including yourself and your partners’ names, and your project focus. Note the time, duration and attendance of each brainstorming session. Include a paragraph about what each person contributed to the assignment [1/2 page].
  2. If you revised and/or developed new lo-fi prototypes, please provide new pictures. These pictures should include enough detail and supporting text so that we can understand how the eventual system is intended to work [2-3 pages].
  3. The final integrated list of your revisions / suggestions / design directions. Make sure to indicate the original source of each of them, whether they came from one or several of the heuristic evaluations conducted by the design team members, from your initial user study, or emerged during the brainstorming [1-3 pages].
  4. Provide a link to your Balsamiq prototype.  Include directions of how to install and/or run it if it is not done using Balsamiq.  Supplement with screen shots if helpful [1-2 pages].
  5. Describe the tools you used to develop your prototype, how they helped and/or created additional obstacles [1/2 page].
  6. Be ready with supporting material and your interactive prototype to be tested in class on March 22nd.

The total length of your report should be less than 6 pages (not including any revised lo-fi prototype pictures). Brevity, clarity and focus on the goals of the assignment will be rewarded.

Please contact the professor or the class TA if you have any questions with this assignment.

Filed under at 3:33 PM
Comments Off on Balsamiq Prototype Assignment