Week 9- Design and Prototyping

What is Prototype?
- paper-based outline of  a screen or a set of screen
- 3D paper or cardboards mockup
- stacks of hyperlink screenshot
- electronic "picture"

To me, prototype is the first sample of your product.which is use for testing purposes before the real product is made.
It allows stakeholders to interact with the envision product, gain experience in realistic setting and explore the imagined users.

Prototype:
- limited representation of a design that allows users to interact and explore it's usability.
- aid where discussing ideas with stakeholders.
- communication device among team members.
- effective ways to test ideas.

Example:
It clarify vague requirements.
To do user testing and evaluation.
Check the design direction is compatible with the rest of the system.

Types of Prototyping
1. Low-fidelity Prototype
2. High-fidelity Prototype

Low-fidelity Prototype
- Does not look very much like final product.
- Use material like paper or cardboard rather than electronic screens or metals.
- Simple, cheap and quick to produce => support ideation exploration.

Types of low-fidelity prototype includes:

Storyboard
- consist of a series of sketches showing how user might progress through a task when the product is under development.

Sketching
- relies on sketching but often find people difficult to engage in this activity.
- uses symbol or icon.

Prototyping with index cards
- use index cards (small pieces of cardboard about 3x5 inches).
- each card 1 screen.

Wizard of Oz
- uses a software based prototype
- user sits at a computer screen and interacts with the software as though interacting product.

High-fidelity Prototype
- Uses material that you would expect to be in final product and produces a prototype that looks much mire like the final thing.
- Example: Prototype of a software system developed in Visual Basic versus Paper-based Mockup.
- Common prototyping tools: Flash, Visual Basic and Smalltalk.
- Issues with high-fidelity prototype:
   = take too long to build
   = reviewers and testers tend to comment on superficial aspects rather than content
   = developers are reluctent to change something that have created for hours
   = can set high expectations
   = one bug can bring test to a halt
   = useful for selling ideas.

Advantages of low-fidelity prototypes:
- lower development costs
- evaluate multiple design concepts
- useful communication device
- address screen layout issue
- useful for identifying market
- proof-of-concept

Compromises (intention to produce something quickly to test an aspect of the product)
Prototype design built with key issue.

Two common compromises
- Horizontal prototyping
- Vertical prototyping

Conceptual design: moving from requirements to first design
- Concept model: an outline of what people can do with a product and what concepts are needed to understand how to interact with it.
- Discuss ideas with stakeholders.
- Use low-fidelity.
- Iteration.

Developing Initial Conceptual Model
- Interface metaphor = help user understand
- Interface types = support user activity
- Interface types = suggest alterative design option

3 steps in choosing a good interface metaphor
- understand what the system do
- generate the metaphor
- understand bits

Evaluating metaphor
Four types of Interaction
- Instructing
- Conversing
- Manipulating
- Exploring

Example: Computer games implied these interaction. Instructing (tutorial), Conversing (talking to players and NPC; non-player characters), Manipulating (changing costume, face expression or style) and Exploring (new places in the game).


Interface types- different interface types prompt and support perspective on product under development
- WIMP or GUI interface
- Sharable interface
- Tangible interface
- Advanced graphical interface