Prototyping is a key tool for improving the user experience and defining a product. What's the best approach: incrementally use the target development environment to create the code, or use a technique that explores design ideas without delivering on the prototype platform?

1.
Make
It
or
Break
It:
Evolu0onary
Vs.
Throwaway
Protoyping
EdUI
–
Nov
8,
2010
Make
It
or
Break
It:
Evolu0onary
Vs.
Throwaway
Protoyping
November
8,
2010
Joe
Sokohl
joe@regularjoeconsul2ng.com
@mojoguzzi

2.
Make
It
or
Break
It:
Evolu0onary
Vs.
Throwaway
Protoyping
EdUI
–
Nov
8,
2010
Agenda
• What’s
a
prototype?
• Why
should
we
prototype?
• What
kinds
of
prototypes
are
we
chaDng
about
today?
• Which
one
do
I
use?
• Discussion,
sources,
&
wrap
(and
a
discount!)

3. So, what is a prototype, anyway?
3

4.
Make
It
or
Break
It:
Evolu0onary
Vs.
Throwaway
Protoyping
EdUI
–
Nov
8,
2010
A
representa0ve
model
or
simula0on
of
the
final
system
Todd
Zaki
Warfel,
Prototyping:
A
Prac//oner’s
Guide

5.
Make
It
or
Break
It:
Evolu0onary
Vs.
Throwaway
Protoyping
EdUI
–
Nov
8,
2010
A
prototype
is
intended
to
answer
specific
ques0ons
about
func0onality
or
interac0on
styles.
If
you
don't
have
any
ques0ons,
don't
bother
with
a
prototype.
Karl
Wiegers,
“In
Search
of
Excellent
Requirements”

6.
Make
It
or
Break
It:
Evolu0onary
Vs.
Throwaway
Protoyping
EdUI
–
Nov
8,
2010

7.
Make
It
or
Break
It:
Evolu0onary
Vs.
Throwaway
Protoyping
EdUI
–
Nov
8,
2010

8.
Make
It
or
Break
It:
Evolu0onary
Vs.
Throwaway
Protoyping
EdUI
–
Nov
8,
2010
Paul
Kunkel:
Apple
Design:
The
Work
of
the
Apple
Industrial
Design
Group

9.
Make
It
or
Break
It:
Evolu0onary
Vs.
Throwaway
Protoyping
EdUI
–
Nov
8,
2010

10.
Make
It
or
Break
It:
Evolu0onary
Vs.
Throwaway
Protoyping
EdUI
–
Nov
8,
2010
hQp://edibleapple.com/wp-­‐content/uploads/2009/08/augmented-­‐reality-­‐paris-­‐2.jpg

11.
Make
It
or
Break
It:
Evolu0onary
Vs.
Throwaway
Protoyping
EdUI
–
Nov
8,
2010
Why
should
we
protoype?
Reduced
risk
Smaller
systems
Less
complex
systems
Reduc0on
in
creeping
requirements
Improved
visibility

12.
Make
It
or
Break
It:
Evolu0onary
Vs.
Throwaway
Protoyping
EdUI
–
Nov
8,
2010
Why
should
we
protoype?
Genera0ve
Show,
tell
&
experience
Reduc0on
of
misinterpreta0on
Savings
in
0me/effort/money
Reduc0on
of
waste
Real-­‐world
value

13.
Make
It
or
Break
It:
Evolu0onary
Vs.
Throwaway
Protoyping
EdUI
–
Nov
8,
2010
http://www.flickr.com/photos/rosenfeldmedia/3978302604/

14.
Make
It
or
Break
It:
Evolu0onary
Vs.
Throwaway
Protoyping
EdUI
–
Nov
8,
2010
http://www.flickr.com/photos/rosenfeldmedia/3978302604/
As
I
see
it,
knowing
how
to
prototype,
test,
and
evaluate
results
quickly
is
the
most
valuable
skill
for
designers
of
persuasive
technology.
BJ
Fogg,
“Crea0ng
Persuasive
Technologies:
An
Eight-­‐Step
Design
Process”

15. Types of Prototypes
Evolu0onary
Throwaway
12

16.
Make
It
or
Break
It:
Evolu0onary
Vs.
Throwaway
Protoyping
EdUI
–
Nov
8,
2010
Evolu2onary
Prototype

17.
Make
It
or
Break
It:
Evolu0onary
Vs.
Throwaway
Protoyping
EdUI
–
Nov
8,
2010
This is the first one. This is it exactly. This is my hand-wired
prototype, not a real Apple I or Apple ][ PC board. There are
4 white 2KB EPROMs on the upper board - that's how I
developed BASIC and all the other routines of the Apple I.
This is an Apple ][ prototype. I can tell by how few chips it is.
The Apple I had a computer board attached to my video
terminal board, in the prototype stage." __Steve Wozniak
hp://www.geekculture.com/joyo^ech/joystuff/apple1cake/firstapple.jpg

18.
Make
It
or
Break
It:
Evolu0onary
Vs.
Throwaway
Protoyping
EdUI
–
Nov
8,
2010
Paul
Kunkel:
Apple
Design:
The
Work
of
the
Apple
Industrial
Design
Group

19.
Make
It
or
Break
It:
Evolu0onary
Vs.
Throwaway
Protoyping
EdUI
–
Nov
8,
2010

20.
Make
It
or
Break
It:
Evolu0onary
Vs.
Throwaway
Protoyping
EdUI
–
Nov
8,
2010

21.
Make
It
or
Break
It:
Evolu0onary
Vs.
Throwaway
Protoyping
EdUI
–
Nov
8,
2010

22.
Make
It
or
Break
It:
Evolu0onary
Vs.
Throwaway
Protoyping
EdUI
–
Nov
8,
2010

23.
Make
It
or
Break
It:
Evolu0onary
Vs.
Throwaway
Protoyping
EdUI
–
Nov
8,
2010

24.
Make
It
or
Break
It:
Evolu0onary
Vs.
Throwaway
Protoyping
EdUI
–
Nov
8,
2010
Throwaway
Prototype

25.
Make
It
or
Break
It:
Evolu0onary
Vs.
Throwaway
Protoyping
EdUI
–
Nov
8,
2010

26.
Make
It
or
Break
It:
Evolu0onary
Vs.
Throwaway
Protoyping
EdUI
–
Nov
8,
2010

27. So...which do I use?
22

28.
Make
It
or
Break
It:
Evolu0onary
Vs.
Throwaway
Protoyping
EdUI
–
Nov
8,
2010
Use
evolu0onary
prototype
(EVP)
when
• User
requirements
are
(almost)
defined.
• Few
interac0on
and
visual
design
problems
exist,
and
informa0on
architecture
is
defined.
• UX
team
is
highly
experienced.
• UXers
also
create
the
deployable
front-­‐
end
code.
• Usability
tes0ng
is
summa0ve,
not
forma0ve.
• Project
requires
lile
documenta0on.

29.
Make
It
or
Break
It:
Evolu0onary
Vs.
Throwaway
Protoyping
EdUI
–
Nov
8,
2010
Use
throwaway
prototype
(TAP)
when
• User
requirements
are
ill-­‐defined.
• Major
interac0on
or
visual
design
(or
both)
issues
remain,
and
the
IA
is
not
well
defined.
• You
have
less
experienced
UXers.
• UX
does
not
do
development.
• Usability
tes0ng
is
forma0ve
and
occurs
mul0ple
0mes
throughout
the
project.
• Project
requires
detailed
documenta0on.

30.
Make
It
or
Break
It:
Evolu0onary
Vs.
Throwaway
Protoyping
EdUI
–
Nov
8,
2010
TAP TAP/EVP
EVPTAP
Paper
Screen
comps
Axure/Balsamiq/
iPlotz/iMockup...
Sketchflow/Expression
Flash
Catalyst
Fireworks
Hand-­‐coded
HTML

31. Let’s Discuss Amongst Ourselves
What’s
your
experience?
How
have
you
succeeded?
Where
have
you
been
challenged?
26

32.
Make
It
or
Break
It:
Evolu0onary
Vs.
Throwaway
Protoyping
EdUI
–
Nov
8,
2010
Hackos,
JoAnn
&
Janice
(Ginny)
C.
Redish:
User
and
Task
Analysis
for
So@ware
Design
Kunkel,
Paul:
AppleDesign:
The
Work
of
the
Apple
Industrial
Design
Group
McConnell,
Steve:
Rapid
Development:
Taming
Wild
So@ware
Schedules
and
So@ware
Project
Survival
Guide
Snyder,
Carolyn:
Paper
Prototyping:
The
Fast
and
Easy
Way
to
Design
and
Refine
User
Interfaces
Warfel,
Todd
Zaki:
Prototyping:
A
Prac//oner’s
Guide
Winograd,
Terry,
ed.:
Bringing
Design
to
So@ware
Some
Books
Special
discount
code:
order
Todd’s
book
from
Rosenfeldmedia.com
and
use
code
MOJOGUZZI.
Save
25%.

33. Thank you!
Joe
Sokohl
joe@regularjoeconsul0ng.com
@mojoguzzi
28