Upload
others
View
6
Download
0
Embed Size (px)
Citation preview
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