i213 Fall 2012: UI Design and Development

October 30, 2012

Functional Prototype Assignment

by Tapan Parikh

Due: Tuesday, November 20, 2012 before Class

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 November 13th, 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 class on Tuesday, November 20th:

  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 November 15th.

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 6:02 pm
Comments Off on Functional Prototype Assignment

October 16, 2012

Balsamiq Prototype Assignment

by Tapan Parikh

Due: Tuesday, October 30th, 2012 before Class

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 October 30th, 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 class on Tuesday, October 30th:

  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 October 30th.

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 6:28 pm
Comments Off on Balsamiq Prototype Assignment

October 8, 2012

Formative Evaluation Assignment

by Tapan Parikh

Due: Tuesday, October 16th, 2012 before Class

Objective: In this assignment, you will perform a formative evaluation another group’s lo-fidelity prototype.  You will start by conducting a “think aloud” exercise.  Next, you will conduct a heuristic evaluation, and integrate your results with other evaluators to generate an evaluation report. Finally, you will conduct another 1-2 “think aloud” exercises with other prospective users.

What to do:

  1. With your group, write down 2-3 tasks to be completed by evaluators using your interface.
  2. Look at the front whiteboard to see if you have been assigned to evaluate a project. If you find your name, prepare to be a test user by walking over and introducing yourself to the project you will be evaluating. If not, prepare to conduct a “Think-Aloud” exercise using your prototype. You will be an evaluator in the second half of the class.
  3. After introducing yourself as a test user, please step through the tasks as instructed by the demonstrator using the lo-fi prototype. Utilize the “Think-Aloud” protocol. Demonstrators should take detailed notes of the pilot user’s observations.
  4. Next, conduct a heuristic evaluation. You are encouraged to use Nielsen’s heuristics, plus any others you have added. The demonstrator should begin by again outlining a task or scenario. After that, the evaluators are free to ask questions. When the evaluators are finished assessing one scenario, the demonstrators should restart the conversation by demonstrating the next task or scenario. Each evaluator should work independently, making sure to take detailed notes. Any evaluations that cannot be completed during class time should be done after class.
  5. Evaluators should use the following format to keep track of your observations: HE.xls. Each observation requires a numeric index, a heuristic that was violated, a location on the user interface, a description of the problem, a severity rating, and a possible fix (use the 0-4 scale presented in lecture for severity ratings). Each evaluator should aim to document at least 10 usability problems, covering 5 distinct heuristics. Some usability problems may not violate an established heuristic – in that case you can label them “misc” for miscellaneous. However, please make sure that an existing heuristic does not cover what you are describing.
  6. The next step is to combine your report with the other evaluators in your group.  If you do not get to it in class, you should plan a time to meet to consolidate your individual evaluation reports. The group whose project you evaluated need not be present, but you will probably find it helpful to have a version of their prototype available for reference. You will create one master Excel spreadsheet that contains each unique problem found. Remember – a duplicate is a violation of the same heuristic, in the same location. A violation of a different heuristic in the same location is considered distinct. For each unique problem found, you will need to discuss amongst yourselves to decide on a final severity rating and a possible fix.
  7. In collaboration with the other evaluators (including those that went in the second half of class), write a short (less then one page) executive summary that outlines the major problems that you found, and possible solutions for the same, prioritizing those with the highest severity ratings.
  8. Before your next prototype assignment, you should conduct another “Think-Aloud” exercise, this time with 1-2 real prospective users. Feel free to use the same tasks you did in class, or come up with new ones. Document your observations, and any feedback and recommendations that you receive.

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, TA and the other group before class on Tuesday. October 16th:

  1. Cover sheet including yourself and the other evaluators’ names, and the project(s) you evaluated.
  2. The final consolidated evaluation report, using the following Excel format: HE.xls.
  3. A short executive summary that outlines the major problems you found, and possible solutions for the same, prioritizing those with the highest severity ratings [1 page].

Please also share your evaluation report with the other group(s) before class next Tuesday.  Please note that the other group is depending on your timely feedback. For this reason, late submissions will not receive credit on this assignment.

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

Filed under at 11:04 pm
Comments Off on Formative Evaluation Assignment