PrototypingCommunication 337

http://www.defense.gov/photos/Dec2000/001120-M-6514O-001.htmlDoD photo by Cpl. Branden P. O'Brien, U.S. Marine Corps.

Ready. Fire. Aim.

Years ago a guy at Cadbury introduced me to the phrase “Ready. Fire. Aim.” – which I've

always loved. As a young Navy midshipman, I 

learned that was what the military does. You

fire to the left, you fire to the right, then you

figure out how to hit the ship broadside.

– Tom Peters, @issue, 6 (1), p. 4

Development Stages

• Design = Ready

• Prototyping = Fire

• Evaluation = Aim

Iterative Process

1

2

3

4

5

Iterative Design

The key to iterative design is quickly creating design prototypes that are good enough to provide feedback but flexible enough for significant changes to be made down the line. The goal is as much iteration as possible to solve as many problems as possible early, when they are inexpensive to fix.

– The Design of Sites, pp. 61–62

Why Prototype?

• Explore design alternatives easily

• Fix problems easily & inexpensively

• Encourage user-centered design

Types of Prototypes

• Throwaway

• Evolutionary

• Lo- or Hi-fi (rough or detailed)

• Horizontal, Vertical, or Global

Throwaway vs Evolutionary

• Throwaway (Revolutionary)

• used to discover requirements & problems but then discarded

• Evolutionary

• refined through a number of stages to the final version

Lo-Fi Prototypes

• Typically paper-based

• Easy to create; easy to modify

• Maximizes possibility of iterations

• Removed from final look-and-feel

6

7

8

9

10

Lo-Fi Tabbed Interface

http://www.nngroup.com/reports/prototyping/video_stills.html

Lo-Fi Wireframe Sketches

Wireframe Prototype

Hi-Fi Prototype

http://www.pbs.org/remotecontrol/bestpractices/bemoreprototype

11

12

13

14

15

Building a Paper Prototype

D. McCracken - User-Centered Website Development, p. 131

Wireframes Desirables

Ani Phyo - Return on Design, p. 152

PrototypeFunctionality & Features

• Horizontal Prototype

• includes all features but little functionality

• Vertical Prototype

• limited features but much functionality for those pages

• Global Prototype

• combines horizontal & vertical

Horizontal Prototyping

16

17

18

19

20

Vertical Prototyping

Global Prototyping

Ani Phyo - Return on Design, p. 156

21

22