Interactive Prototype #1 (Group)

Due: Friday, October 26, 2001

Goals

The goal of this assignment is to learn how to build prototypes of user interface ideas using an interactive user interface builder. You will revise your user interface ideas and then use interactive tools to build a prototype of the design.

Interface Redesign

Use the results of your low-fi prototype tests to design a revised user interface. Develop new and/or revised scenarios for your tasks by storyboarding your ideas with pen and paper. The tasks that most of you used in the low-fi assignment should be sufficient for this, but some were simple or partial tasks that did not adequately cover your proposed functionality. Make sure to revise those tasks. If you are changing your tasks, make an appointment with us to present your new tasks, design ideas, and storyboards for discussion.

Prototyping

You will use a prototyping tool to create an interactive prototype of your application. For most web applications, we would like you to use Microsoft FrontPage to develop your prototype. For applications that require more interactivity or run on mobile devices, we would like you to use Java and Borland JBuilder. There are Java VMs for both the Clios (Personal Java platform) and for the HP Jornadas (Embedded Java). Its also possible to target both the mobile devices, which run WindowsCE, using Microsoft Visual Basic. We dont recommend this method since Microsoft recently changed their tool suite for WindowsCE development and all the tools you need may not be available.

Your prototype should implement the three scenarios that you developed for your tasks. In addition, the design of the prototype should now start to account for the size, resolution, colors, and other attributes of your target platform. However, the underlying functionality does not have to be fully implemented. For example, applications requiring large databases of information can instead have a sufficient number of hard-coded data points for supporting the three tasks.

You have a very short period of time to complete this prototype, so you should focus on showing only what is essential and try to avoid writing code where it is not necessary. You will likely have to make some hard choices!

Deliverables

1. Prototype
   Your prototype must be accessible and/or executable by everyone in the class from your website. It must be accompanied by a README document that describes any installation requirements and operating instructions, including any limitations in the implementation. The prototype should ideally be executable without installing any additional software.
2. Report
   You will submit two copies of a printed report of no more than four pages of text in class. You must also put a copy of the report online on your website.
3. Presentation
   One member of your team will present your project in class, including a demo of your prototype. You will have only six minutes for your presentation and one additional minute for questions. Practice in advance! You must use PowerPoint slides and make them available for download on your website.

Report

The report should follow this outline with separate sections for the top-level items, although using more subsections will make it even more readable for us:

1. Problem and solution overview (1 paragraph)
2. Tasks (1/4 page)
• 3 representative tasks to test your interface (3 levels of difficulty)
3. Revised Interface design (1 page + screen dumps)
• differences as a result of Low-fi testing & why (refer to screen dumps)
• use sketches for screens you may not have implemented
• scenario for 3 tasks
• storyboards of scenarios (annotated screen dumps)
4. Prototype overview (2 pages)
• tools you used
• how the tools helped
• how the tools did not help
• overview of the UI you actually implemented (reference figures from next section)
• what was left out and why
• any wizard of oz techniques that are required to make it work
5. Prototype screen dumps (as many as needed)

Grading

The report and prototype will be graded together, and the presentation will be graded separately. Here is the grading for the report and prototype (50 pts total):

 20pts Design

• Tasks
• Do the tasks cover the interesting features of the project?
• Do the tasks have an appropriate difficulty/complexity specified?
• Do the tasks altogether form a compelling story for the project?
• Changes
• Were appropriate changes made to address the important problems discovered?
• Are these changes well illustrated with scans and screenshots?
• Transition from low-fi to interactive prototype
• Were the limitations of the low-fi addressed?
• Were appropriate constraints from the final target platform considered?
• Does the design adequately represent the final target platform?
• Were any non-standard interactions described and justified?           

15pts Prototype

• Is the prototype accessible and working?
• Can users complete the three tasks with the prototype?
• Were appropriate tradeoffs made between functionality and completeness?
• Are the limitations and tradeoffs described and justified in the report?
• Does the README file summarize these limitations and any other details needed?

15pts Report

• Writing
• Does the report cover all the topics in the outline?
• Does the organization follow the outline?
• Are sub-sections used for easy scanning of important parts?
• Screenshots and Storyboards
• Are important figures referenced and placed inline with the text? ^*
• Is there a complete set of scans and screenshots in the appendix?
• Are the scans, screenshots, and storyboards clearly annotated?

 ^* Use Relevance-Enhanced Image Reduction to create effective thumbnail images.

Presentation (10/30)

The presentation grading will be broken into two components: the individual grade of the presenter and a group grade for the presentation of the prototype. The grades for each of these components are explained in more detail below.

Presenter grade:
The presenter will be graded on the following factors:

• Organization
  • Give an overview of what you are going to discuss
  • First discuss the overall problem
  • Then the representative tasks
  • Then the overall UI idea including differences from low-fi prototype and rationale
  • Summary
• Presentation
  • Use slides. Ensure that the presentation shows appropriate preparation, and that visual aids are effective, properly prepared, and properly employed. Make sure that people at the back of the room can see your slides.
  • Cover the required scope within the 6+1 minute time period. Practice and time your presentation.
  • Ensure the presenter makes eye contact and projects well.

Group grade:
The group will be graded on the following factors:

• How good were the representative tasks chosen?
  • Good coverage?
  • Too easy or too hard?
• How good were the user interface ideas presented?
  • Novel and creative?
  • Appropriate for the supported tasks?
  • Follow from the task analysis, low-fi prototype, and other sound reasoning?
• How much functionality was shown?
  • Enough to illustrate the representative tasks?
  • Give a flavor of the interface?
  • Appropriate amount given difficulty of interface ideas?