i213 Fall 2012: UI Design and Development

November 20, 2012

Final Submission

by Tapan Parikh

Due: November 27th, 2012 (Presentation and Prototype)

Due: December 10th, 2012 (Report)

Objective: In this assignment, you will complete your final project. There are three deliverables: 1) a demonstration prototype of your software, 2) a report that describes your project’s motivation, design method(s), implementation (concise) and evaluation, and 3) a 10-minute presentation describing your design process, prototype, evaluation and results.

What to do:

  1. Continue revising your prototype based on feedback from other students, potential users and obtained during class. The functionality included in the prototype(s) should be based on two factors. First, supporting all of the tasks and activities that you would like during your user testing. Second, making a compelling demonstration for the final class presentation. You can use the same, or different, prototypes for both of these purposes. You should make progress from your first and second prototypes, including additional functionality, a refined look-and-feel, help features, interaction with live data sets, etc.
  2. Conduct your user testing, based on your experiment design, and feedback from the TA and Instructor. Make sure to follow appropriate policies with regard to informed consent and records release. (Example forms are provided here and here). You should include the TA as a subject in at least some part of your user testing protocol.
  3. Prepare a presentation that summarizes your process, focusing on the most interesting observations and results, and demonstrates the capabilities of your software. Again, your goal is to describe what is really new and innovative about your design approach and prototype(s), and how you have demonstrated its usability and benefit. You should aim for a ten-minute presentation, with an additional five minutes for questions. Practice beforehand, with an audience if possible! If you go over, you wont be given extra time.
  4. Make the presentation in class on November 27th or 29th (your position will be determined by random lottery). Your final project grade will be determined in equal parts by the final presentation and the final report.
  5. Draft a report, describing your project’s motivation, design method(s), implementation and evaluation. Be concise – use up to a maximum of twelve pages single-spaced 12-point text. Your goal is to describe what is really innovative about your design approach and prototype, and how you have demonstrated its usability and benefit. Some sections your report should include are: Summary, Introduction, Problem Statement, Design Process, Final Prototype (very concise, use images where appropriate, and include a description of what features have not been implemented), Experiment Design, Evaluation Results, Discussion, Current Status and Future Plans. Some of these sections may be combined, but in general all of these topics should be covered.

What to turn in:

E-mail to the professor and TA a link to each of the following before class on November 27th:

  1. Cover sheet including yourself and your partners’ names, and the title of your project. Include a paragraph about what each person contributed to the final prototype, evaluation, analysis, presentation and report. Describe the tools you used to develop your final prototype(s), how they helped and/or created additional obstacles [1 page].
  2. A link to your final prototype, including any instructions on how to install and/or run it, if needed.
  3. Your final presentation slides, movies and/or any supporting materials.

Additionally, e-mail to the professor and TA a link the following before 11:59 PM on December 10th:

  1. Your final report, accepted in PDF format only! [maximum of 12 pages]

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


 

Filed under at 4:57 am
Comments Off on Final Submission

November 7, 2012

Experiment Design Assignment

by Tapan Parikh

Due: Tuesday, November 20th, 2012 before Class

Objective: In this assignment, you will develop a plan for testing your user interface. This includes deciding the tasks to support, the users to test, where to test, the method of testing and the metrics used to evaluate success.

What to do:

  1. Decide 3-6 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 aspects will work). This should include both high-level user tasks (decide where you want to eat dinner using this interface), as well as specific, low-level tasks (use the interface to search for a restaurant open at 10PM).
  2. Decide the context where you will test each of these tasks. The location should be as realistic as possible, while allowing for controlled measurement and evaluation.
  3. Decide how you will recruit participants for your final user study. Aim for testing each task with between 5-15 users. Each task should be tested by appropriate users fitting the characteristics outlined in your persona descriptions.  Make sure to conduct a pilot test with design team members or other students before subjecting real users.
  4. Determine whether it is possible to include a control condition for the testing. For example, if you have designed a new interface for web search, a control condition could be using Google search. This allows you to measure how your new interface compares with current alternatives. Ideally, you should test each task using both your own prototype and at least one control condition. Those without a suitable control condition should compensate by either including more users and/or more performance measures (see below).
  5. Decide the methods you will use to evaluate performance for each task you want to test. This could include quantitative methods for metrics such as efficiency and error rate, as well as qualitative methods for metrics such as enjoyment and satisfaction. Ideally, you will test each task using at least two quantitative and one qualitative method. Decide how you will measure user performance (for example, task execution time or number of errors), behavior and/or responses (for example, using audio, video, screen recorders, interview transcripts and/or detailed notes) .
  6. Decide how you will address any learning and/or fatigue effects – either between tasks, and/or between the control and experimental conditions.
  7. Decide the conditions of success. For experiments with a control, this may be some relative improvement over the control condition. For experiments without a control, this may be some absolute measure of efficiency, accuracy, subjective satisfaction, etc.
  8. Decide the materials you will need to conduct the usability test. This includes the script you will use to conduct the test, the prototype itself, and any questionnaires you will administer before and/or after testing. This should include a demographic questionnaire capturing important user details (age, gender, education, experience with your proposed kind of technology and/or application, etc), as well as informed consent and records release forms allowing you to conduct the test with the user and/or capture audio, images and video. (Example forms are provided here and here).

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 describing what each person contributed to the assignment [1/2 page].
  2. A list of tasks that you intend to test during your usability testing.
  3. Description of your control condition(s) and experimental variants, if any (it is highly recommended to include a control if possible) [1/2 page].
  4. Details about how many users that you will test for each task, and how you plan to recruit participants, including for the pilot test. If the same persona applies to multiple tasks, it is fine if the same user is tested for all of them, making sure to account for any learning / fatigue effects [1 page].
  5. Description of the methods that you will use to evaluate the usability of each task, and how you will measure document user behavior and responses. It is recommended to evaluate each task using at least two quantitative and one qualitative methods. Mention how you will address any learning and/or fatigue effects – either between tasks, or between the control and experimental conditions. Provide the location where you will test each task [2-3 pages].
  6. A list of conditions of success for each of the tasks [1/2 page]
  7. A description of the supporting materials that you will need for conducting your user test – including forms, testing scripts, questionnaires, props, and the prototype itself [1 page].

The total length of your report should be less than 8 pages. Brevity, clarity and focus on the goals of the assignment will be rewarded.

E-mail a link to your group’s project page to the professor and TA before class on Tuesday, November 20th.

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


 

Filed under at 11:49 pm
Comments Off on Experiment Design Assignment

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

September 18, 2012

Lo-fi Prototyping Assignment

by Tapan Parikh

Due: Tuesday, October 9th, 2012 before Class

Objective: In this assignment, you will build on your user research to start visualizing solutions. You will begin by refining your personas. Using these personas as “actors”, you will create three storyboards or scenarios, each depicting a task that your system will support. Finally, you will mock up at least three low-fidelity prototypes of possible solutions you could develop.

What to Do:

  1. Schedule a group meeting. Most of the tasks described below should be completed during one or two collaborative brainstorming sessions including the entire design team.
  2. Starting with the personas you made for the last assignment, decide the primary user personas that you are aiming to satisfy. Define each of their primary goals in using your system. Further refine each persona, by providing additional details and/or pictures. By the end, they should be full-featured descriptions that can be used as a reference by the design team. Aim for a total of 3-5 personas, identifying 1 (or 2) of them as the primary focus for your project.
  3. Starting from the primary persona’s goals, decide three key tasks that your system will support. Tasks are specific sets of actions that will allow users to achieve their goals. These tasks should address a broad set of important user priorities. Using your personas as actors, depict in a scenario how your system would be used to achieve each of these tasks, preferably using a storyboard representation. (Use graphical depictions, even if you can’t draw or sketch! Stick figures are awesome and encouraged!)
  4. Using paper, index cards, post-its, cardboard, tape, glue and anything else you can imagine, build at least three paper prototype alternatives that can be used to mock “perform” the tasks depicted above. Use the reading for motivation, and again, be creative!

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 9th:

  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 sentence or two about what each person contributed to the assignment [1/2 page].
  2. A list of core user personas. Include pictures, demographic details, and any other details that you feel are necessary to make the persona come to life and serve as a useful resource for the design team. [2-3 pages].
  3. At least three storyboards depicting the tasks that your proposed system will support. These can either be scanned in, and/or composed electronically [2-3 pages].
  4. Pictures of your low-fidelity prototypes. Bring them in to show during class on October 9th [2-3 pages].
  5. Reflect on the experience of prototyping. What was easy for you? What was hard? Was it fun? [1/2 page]

The total length of your report should be less than 10 pages. Brevity, clarity and focus on the goals of the assignment will be rewarded. Illustrative graphics are welcome and encouraged!

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

Filed under at 4:58 pm
Comments Off on Lo-fi Prototyping Assignment

September 4, 2012

User Observation Assignment

by Tapan Parikh

Due: Thursday, September 27th, 2012 before Class

Objective: In this assignment, you will be conducting a contextual interview with a prospective set of users, and deriving a set of work models and notes based on that experience.

What to Do:

  1. Identify 4-8 different individual users, covering each of your user / stakeholder categories, and ask each for their permission to interview them. If they agree, set an appointment to interview them in a location where they currently perform the task that you wish to study. Before starting the interview, you may want to have them complete the informed consent form (example here). If you also intend to capture video/audio/photos, have them complete a record release form (example here).
  2. Conduct the contextual interview, following the master and apprentice relationship model. For each interview, one group member should be the apprentice, while the others take notes (larger groups should split up into groups of 2-3). You can also use a voice recorder (with the subject’s permission). Alternate roles for each subject. Each interview should last between 30-90 minutes.
  3. During a group interpretation session, generate an affinity diagram and at least 4-5 distinct work models drawing from your users. These should be at a level of detail appropriate to the task you are studying and the data that you have collected. Do this as soon after the interview as possible (up to a maximum of 48 hours), to make sure that the observations are fresh in your mind.  Choose the most useful and appropriate models for your project.
  4. Create 3-6 personas, representing each kind of potential user. Typically, each persona will consist of a textual description, supplemented by graphics if necessary. The persona should include details like their age, education, professional history, access to technology, idealized goals and current difficulties with regard to the task in question.
  5. Describe in paragraph, video or storyboard form a set of current task scenarios and a set of hypothetical usage scenarios that you would like to support in your system.
  6. Prepare a presentation to introduce your project to the rest of the class. Start with your focus, personas, and any supporting observations from the contextual inquiry that motivate your problem. Then walk the audience through some or all of the tasks described in your scenarios. Aim for a 5-minute presentation (with an additional five minutes for questions), to be made in class on Thursday, September 27th or Tuesday, October 2nd.

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 Thursday, September 27th:

  1. Cover sheet including your names, and your chosen focus. Also include 1-2 sentences about what each person contributed to the assignment. [1/2 page]
  2. Summary of each contextual interview, including the person’s gender, approximate age (20s, 30s, etc.), job title, the location of the interview, who conducted and who took notes, how long it took to complete, etc. For privacy, don’t use people’s real names or any other uniquely identifying information. Also, include any difficulties you had or surprises you encountered in conducting the contextual interview.  If you used another method discussed in class, describe the results of that as well. [4-8 pages]
  3. A picture of your final affinity diagram.
  4. A copy of each work model that you generated. Use one page for each model, aiming for the level of detail shown in the examples in the book. These can be done either using pen and paper, or a drawing program on a computer. On a separate page, include a 1-2 paragraph description of each model, including key points, surprises, potential ambiguities, and any difficulties you encountered in constructing the model.
  5. The list of current scenarios, and those that you would eventually like to support in your future design. One paragraph, video or storyboard for each scenario should be enough. Aim to document between 4-8 current and future scenarios.
  6. The list of personas that you will motivate your eventual design. For now, about a half-page plus a picture should be enough for each persona. Aim to document between 3-6 personas.
  7. Reflect on the experience of doing a Contextual Inquiry. What was easy? What was hard? What did you expect? What was surprising? Did you ask too many questions? Did you ask too few? What types of questions worked best? Which lead to poor answers? Which lead to in-depth answers? Which work models were difficult to produce? Which were easy? Which helped most in developing your understanding? Which helped least? [1 page]
  8. A copy of the presentation that you will make to the class. Come ready to present on September 27th.

The total length of your submitted report should be less than 14 pages. Brevity, clarity and focus on the goals of the assignment will be rewarded. Illustrative graphics are welcome and encouraged!

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

Filed under at 7:38 pm
Comments Off on User Observation Assignment

August 28, 2012

Group Pitches Due next Tuesday

by Tapan Parikh

Your group project pitches are due next Tuesday in class.  Each group will have 5 minutes (max) to describe:

Team sizes of 4-5 are preferred.  At least 4 students must already be registered for the class. If you want to join a group, or need more members for your group, please speak up in class and/or use the course mailing list.

Filed under at 6:00 pm
Comments Off on Group Pitches Due next Tuesday

August 24, 2012

Subscribe to the mailing list

by Tapan Parikh

Please subscribe to the mailing list if you have not done so already. You should have received several messages today. Some of you may have been inadvertently unsubscribed if you subscribed before class today. Thanks!

Filed under at 1:20 am
Comments Off on Subscribe to the mailing list

August 21, 2012

First Assignment

by Tapan Parikh

Yes, already, but its short and hopefully interesting.  If you have an idea that you would like to pursue in the course, be prepared to make a short “pitch” to recruit other students in class on Tuesday August  28th.  Your pitch should be short – about 2-3 minutes, laying out as best you can 1) who your user is, 2) what their pressing need is, 3) why this is an opportunity and 4) any partners or users you already have lined up.  Preferably you can do this without Powerpoint, but if you need it, it will be there. Please use this Google spreadsheet to coordinate the group formation process.

Filed under at 5:14 pm
Comments Off on First Assignment