P2+Prototyping

=P2: Prototyping= For interactive designers, prototyping is used to demonstrate a product, an idea or a particular set of interactions as a partial representation of the design. It can be made from any number of materials from paper to software but no matter what, it needs to be //interactive//. It may serve to focus on just the interface or a particular set of functions, but it will capture some of the features highlighted in the envsionment stage.

A prototype can be built in varying degrees of fidelity depending on what the designers are looking for and where they are in the development process. First and foremost, the prototype move the design out the designer's world (system maps, flowcharts) and makes it a conversation piece with people in evaluating your design ideas.


 * What is a Prototype?**
 * a piece of wood (ie. Palm Pilot development)
 * cardboard mockup
 * video simulation
 * paper-based outline
 * hyperlinked screens shots
 * software


 * Why Prototype?**
 * useful aid when discussing idea with stakeholders
 * communication device amongst designers
 * answer questions and support designers in choosing between alternatives


 * Also**
 * to test technical feasibilty
 * clarify vague requirements
 * user testing and evaluation


 * Low Fidelity Prototype**
 * materials of low cost and fast assembly
 * affords multiple concept testing in short time frame
 * outlined screens for GUI


 * High Fidelity Prototype**
 * looks and acts more like the finished design
 * interactive, functional
 * useful for marketing ideas, testing technical issues

Process
The team needs to decide on which part of the system is the most engaging and worthy of developing into a functioning prototype. By developing a set of interactive functions, the goal of this phase is to simulate a user experience with a focus on the tasks in this section.

It will most likely involve fewer choices than the entire system, with an emphasis on a particular task. For example, your prototype might involve finding a work of art, looking for certain details and sharing with others. Therefore your team will build the facade of the entire system to make it plausible, but just focus on making the needed functions to perform the above task. In doing so, the users can evaluate how well the system supports this tasks for the typical person using the system.

In reference to your system map and flowcharts (can be modified), these steps need to be followed:

//These four stages are not mutually exclusive and there is much interdependency in their timelines and goals.//
 * 1) Functional Wireframe
 * decide on a series of screens/states needed to create the desired experience
 * use the desired technologies - HTML/CSS, Flash, Director, etc.
 * insert boxes and text placeholders within each screen with needed functionality (eg. drag and drop, rollover, scroll, links, etc.)
 * continue developing the series into the desired simulation
 * 1) Information Design
 * organization and groupings of information
 * decide on how much information per screen/state
 * develop a labeling system for naming of information
 * 1) Visual Design
 * develop a visual language of colour palette, typography, icons, etc.
 * design a consistent layout and hierarchy using visual design elements
 * 1) Content Mapping
 * map content on to functional wireframe
 * apply info and visual design approaches

These steps are meant as a guide to building a prototype and is not a prescription to a successful outcome. Interactive and visual problem solving greatly benefits from a variety of perspectives coming from thoughtful engagement with the process ... from all team members.

Deliverables
A functional prototype that offers adequate interactivity to simulate a user experience for testing in the next phase. It will consist of:
 * 1) a web-based interactive system with appropriate interaction and visual design
 * 2) documentation and updates in the group wiki area

Week 04 - Mar 30
in class
 * introduction to prototyping
 * define scope of group's prototype
 * discussion and consultation of next phase
 * production of functional wireframe

at home
 * continued production of functional wireframe

Week 05 - April 6
in class
 * present team scope
 * review functional wireframes
 * information design
 * team consultation and production
 * information visualization potential

at home
 * refine functional wireframe
 * develop information design

Week 06 - April 13
in class
 * present team work
 * visual design and content mapping for interface
 * team consultation and production

at home
 * apply visual design and content
 * finalize all prototype work

Week 07 - April 20
Prototype due for in class presentation/ Bill Kirby will be a guest