Goal:

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

UI Redesign:

Using the results of your low-fi prototyping sessions, come up with a revised UI design and storyboard. Make sure the ideas will work for your tasks scenarios. (The scenarios used in the low-fi assignment should be work for this, but if you need to adjust them, that's ok.)

You have a very short period of time to come up with this prototype, so you should focus on only showing what is essential and try to avoid writing code where it is not necessary. This short period should force you to make some hard choices. You will have the opportunity to tell us what you had to leave out and why.

Prototyping:

Use a prototyping tool (e.g., Visual Basic, DreamWeaver+Cold Fusion, DENIM, Director, PowerPoint) or a user interface builder (e.g., Visual Cafe for java, tcl/TK) to create a prototype of your application. Which tool you use depends on the characteristics of your system. If you use a limited-interaction tool like DENIM or PowerPoint, you will probably want to move to one with more capabilities for the second interactive prototype.

This prototype should allow us to run through the scenarios that you worked with in the last assignment (if you have some reason to want to change these, that's fine, but you should have at least three). The underlying functionality does not have to work fully; you can fake much of the output. For example, the ReadingTree system does not have to do real searches over the books available using a real database backend. Instead it can have several "canned" query results just stored away in a file.

Your prototype must work in such a way that other people in the class can run it, either over the web or by downloading files or code and running it. It is preferable if it is setup so lots of tools don't have to be downloaded; keep in mind that other students will also have to be able to run your interface in order to do the heuristic evaluation. Include a web page that informs us how to run the application, and has links to the scenarios.

Resources:


Latest DENIM release
A tutorial on cold fusion (ppt) by Chris Marin
A tutorial on cold fusion by Mohammad Shamma (may be out of date)

Write-up:

This is a group assignment, so please work as a group.

Your write-up should be no more than four pages of text, plus figures, turned in on the web. due date as well as having the information up on the web. The writeup should include

• Revised Interface design
  • At least 3 representative scenarios based on earlier task analyses (you can make links to the descriptions from earlier assignments if they haven't changed, otherwise include the updated versions)
  • Differences as a result of low-fi testing (refer to screen shots)
  • Storyboards of the scenarios (annotated screen shots)
  • Sketches of screens you planned but did not have time to implement (if applicable)
• Prototype overview
• 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 (if applicable)
• Tools you used
• how the tools helped
• how the tools did not help
• problems with the tools
• Screen shots (as many as needed)
• Description of how to run the interface and the scenarios
  • Remember this will be used by people doing the heuristic evaluation of your interface
  • This description (along with the screen shots) falls outside the four page limit.
• Contributions by each team member

Project Quality:

When working on your project, think about the following questions. Our judgements of the answers will be used in grading.
• How good are the user interface ideas?
  • Are they novel and creative?
  • Are they appropriate for the supported tasks?

• How well does the new design:
  • Accommodate the original task analysis?
  • Incorporate the results of the low-fi prototyping study?
  • Incorporate general sound reasoning?

• How much functionality is achieved in the interface prootype?
  • Enough to illustrate the representative tasks?
  • Enough to give a flavor of the interface?
  • Appropriate amount given difficulty of interface ideas?

• Does the writeup:
  • Properly cover the required material?
  • Exhibit good writing?

• Is the class presentation:
  • Clear and informative?
  • Within the time constraints?

Class Presentation:

Each group will get 15 minutes to discuss their project. This leaves 5 minutes between groups for setup time. Be sure to make a link to your presentation from your project page, to save on setup time. The talk should cover at least the following:
• Goals of the project
• Main scenarios and personas
• Current design, including how/why it differs from the low-fi prototypes
• Demo of the interactive prototype (optional for groups that talk on Tuesday)
• Biggest lesson learned so far
• Summary

Presentation Schedule:

Tuesday, March 20
Travelite
SIMIANs discussion group
SFNight
Content Management System


Thursday, March 22

ReadingTree.org
SFMOMA-DAM
SIMS Textbook Exchange
McInterface

HE Assignments:

Travelite <-> ReadingTree
SFMOMA-DAM <-> Content Management System
SIMS Textbook Exchange <-> SFNight
McInterface <-> SIMIANS discussion group

Upcoming due dates:

• Thur Mar 22: First Interactive Prototype
• Tues/Thur Mar 20 & 22: Class presentations
• Spring Break!!!
• Thurs April 5: Project Heuristic Evaluation