Component P3: Hi-fi Prototypes and Heuristic Evaluation

Overview

In P2, you developed a wide space of ideas, and focused on developing a number of sketches, polishing a limited set. In real life, you would use these polished sketches, along with your storyboard to get feedback from potential users. In practice, you would go through several iterations of this, where you develop ideas, gather feedback, and continue to develop more ideas.

At some point, your customers are going to want to see a more tangible prototype. In tutorial, you learned a number of ways to prototype, using paper, video, and pictures. These are ways that you can develop prototypes to not only understand what the resulting system may look like, but also what it feels like to interact with. Using these prototypes, you could easily evaluate your interface with users, understanding what aspects of the interaction works well, and what doesn't. These "quick and dirty" prototyping methods allow you to get that idea without expending the major effort that is required to develop a prototype using code. Due to time constraints, we unfortunately need to skip this middle step.

For this project component, you will actually develop a prototype of your system in C#. You should develop a deep vertical prototype that addresses all the "must have" requirements you identified in P1, and refined in P2. Your prototype should follow the design ideas you identified and storyboarded in P2, but only to the extent that it makes sense. If you discover that an alternate idea/design works better, feel free to implement this; however, you will need to be clear about this modification, and justify it for both P3 and P4.

In practice, you could now demo the system and conduct usability or feedback sessions with potential users. This is often time consuming and expensive, so you may need a method to evaluate the usability of your interface that gets you results without having to involve users. One of these methods is to conduct a Heuristic Evaluation. Your job is to conduct a heuristic evaluation, and report on the main findings.

Major Activities

  • Build a vertical prototype. Using C#, build a vertical prototype that addresses all of the design requirements you identified in P1, following the selected idea and storyboard you made in P2. This prototype should be functional: not only in that the interface appears correct, but that the core functionality actually works the way that it is intended. The goal, remember, is to allow someone to understand how it would feel to interact with the system.
  • Demo your system. You will demo your system to your TA and your fellow classmates in your tutorial section. Think carefully about how to demo the interaction of your system. You have 10 minutes to do your demo, and will need to answer questions from the class and your TA for 5 minutes.
  • Conduct a heuristic analysis. You will conduct an heuristic evaluation of your system as outlined in class. Each member of your deep dive team will use the heuristics, and individually make his/her way through the interface, identifying when some aspect of the interface violates one of the heuristics. It is important that this step is conducted independently. You will then meet as a team, and again walk through the interface, discussing each of the problems that you all identified. Your goal is to identify major problem areas of your interface through this method, what heuristic(s) have been violated to cause these problems, the severity of the problem, and to make recommendations on how to address them.

Deliverable

  • There are two deliverables: an in-tutorial demo to your TA, and a written component.
  • The in-tutorial demo will be scheduled by your TA. You will have 10 minutes to say what your project is, and to demo the core features of your system (consider using your storyboards as a guide). You will then need to respond to 5 minutes of questions.
  • On the due date for this project component, you will hand in your portfolio binder in lecture with a written report about your prototype and the results of your heuristic analysis. This written report should address:
    • In about two pages, how the prototype was built, and the major features that are exposed in the interface. This should include small screenshots of the interface where appropriate. These major features should align with the design requirements that you specified in P1, and explored in P2. Where there is variance from these original ideas, point them out, and justify the design changes.
    • The results of your heuristic analysis should be written in 3-4 pages (maximum 6 pages). Identify a small set of major problems that must be fixed, and summarize these. Then, describe the issues that were identified, along with which heuristics were violated, and finally, how you would address them in another iteration. You can sort these in terms of severity, in terms of functional/conceptual area (i.e. in a way that makes sense with respect to your system), or in terms of each heuristic. Justify your choice for presentation, and make it clear that sort is being done in the written presentation. You may not have enough space for everything: this is fine, put the remainder in an appendix.
  • Include as an appendix the raw notes from your heuristic evaluation -- in particular, the notes from your individual heuristic evaluations.

Grading Sheet

  • Ensure that your grading sheet is placed in front of the section of this component.
  • Bring a copy of the grading sheet to your demo with your names and email addresses filled in. Your TA will use this grading sheet to evaluate your demo.

Resources