ISP 666 Week 6

Prototyping

Design a Solution

• From task to system

• From abstract to concrete

Task Models

UI Presentationevaluation

ConceptualModel

System descriptionArchitectural

ModelPrototype

Design Artifacts

• How do we express early design ideas?– No coding at this stage

• Key notions– Make it fast!!!– Allow lots of flexibility for radically different

designs– Make it cheap– Promote valuable feedback

*** Facilitate iterative design and evaluation ***

Dilemma

• You can’t evaluate design until it’s built– But…

• After building, changes to the design are difficult

• Simulate the design, in low-cost, easily changeable manner

Prototyping

• A Prototype is a concrete but partial implementation of system design

• A User Interface Prototype is a prototype built to explore usability issue

Prototyping Dimensions

• 1. Representation– How is the design depicted or

represented?– Can be just textual description or can be

visuals and diagrams

• 2. Scope– Is it just the interface (mock-up) or does it

include some computational component?

Dimensions (contd)

• 3. Executability– Can the prototype be “run”?– If coding, there will be periods when it can’t

• 4. Maturation– What are the stages of the product as it

comes along?• Revolutionary - Throw out old one• Evolutionary - Keep changing previous design

Terminology

• Early Prototyping

• Late Prototyping

• High fidelity prototype

• Low fidelity prototype

Early prototypingLow fidelity

Late prototypingHigh fidelity

continuum

Terminology (2)

• Horizontal prototype

• Vertical prototype

Very broad, does or shows much of the interface,but does this in a shallow manner

Fewer features or aspects of the interface simulated,but done in great detail

Low Fidelity Prototyping

• Uses a medium which is unlike the final medium, e.g. paper, cardboard

• Is quick, cheap and easily changed

• Examples:sketches of screens, task sequences, etc‘Post-it’ notesstoryboards‘Wizard-of-Oz’

Sketch

Storyboard

• Describe a “script” of important events– leave out the details – concentrate on the important interactions

• Depict “key frame”– file & animation

• Black: page content

• Red: page title• Green:

annotations• Blue: links

A Storyboard

Wizard of Oz

• Person simulates and controls system from “behind the scenes”– Long tradition in computer industry

• prototype of a PC w/ a VAX behind the curtain

– Much more important for hard to implement features• Speech & handwriting recognition

Wizard of Oz (2)

• Can work for paper based prototypes too!• Tips

– Rehearse your actions • For a complicated UI, make a flowchart which

is hidden from the user• Make list of legal words for a speech interface

– Stay “in role”• You are a computer, and have no common

sense, or ability to understand spoken English.

Paper Sketches

• Advantages– support brainstorming– do not require specification of details– designers feel comfortable sketching

• Drawbacks– do not evolve easily– lack support for “design memory”– force manual translation to electronic format– do not allow end-user interaction

Computerized tool support may be needed.

DENIM: Designing Web Sites by Sketching

• DENIM’s features are based on interviews with many designers.

• Support early-phase information & navigation design– Support pen-based interaction

• http://guir.berkeley.edu/projects/denim/• Video

Advantage of Low-fi Prototypes

• Fast– prototype -> test -> iterate

• Can simulate the interaction– sketches act as prototypes

• designer “plays computer”• other design team members observe & record

• Kindergarten implementation skills– allows non-programmers to participate in the design

process

• Good for Conceptual Design

High-fidelity Prototyping

•Uses materials that you would expect to be in the final

product.

•Prototype looks more like the final system than a low-

fidelity version.

•Good for physical design

•Look and feel

•Component Layout

•Interaction

•Danger that users think they have a full system

Tools for High-fi prototyping

• Web sites– HTML/XHTML + CSS, Web IDEs

• drag-and-drop GUI toolkits for standard UI mockups– e.g. Visual designers in IDEs, Hypercard, Visual Basic

• scripting languages & interface libraries for additional flexibility– e.g. tcl/tk, python

• graphical languages for visualization and novel interface creation– Director, Flash

• special purpose tools and environments– e.g. speech, haptics, Supercard/Revolution

Hi-fi Prototypes are not good for Conceptual Design

• Perceptions of the tester/reviewer?– formal representation indicates “finished” nature

• comments on color, fonts, and alignment

• Time?– encourage precision

• specifying details takes more time

• Creativity?– lose track of the big picture

Assignment 2

• This assignment continues your mini-project started in assignment 1

• Produce a low-fidelity prototype to implement one use case of your mini-project

• If you use DENIM, send me the .dnm file• If you use paper sketches, hand in all the

papers• This assignment due in class on Mar. 29

Food Volunteer?