1.
Of
Prototypes,
Rubber
Ducks and
little men behind
the
curtain
quack bryan rieger <bryan@yiibu.com>

2.
last millennium since then...
theatre
design web
illustration
from T
oronto,
Canada mobile
animation
, eh!
design
development
writing
Sabbatical in
Web games South East Asia
entertainment animation open source
DIY Tools
Mosaic
Director advertising management Java
Processing Qt
netscape
Hypercard
AfterEffects
Flash media on devices
WAP
Flash Lite
Web rapid prototyping mobile craft animation
Bill Buxton Web
motion graphics MPEG4 SVG UML research
graphic design QuickTime
animation
multimedia
SMIL standards John Maeda
UK design
Brenda Laurel
theatre design dot.com boom
research and design
1991 1996 2000 2005 2009
a little bit about me...
“a straight line may be the shortest distance between two points, but is by no means the most interesting...”

3.
a few caveats...

4.
i don’t have the answers

5.
i make lots of mistakes
but i learn from
most of them

6.
business goals
and customer needs
i’m more concerned with finding the best way
rather than the generally accepted right way...
industry opinion

7.
December 2nd 2009
where my mind is at today...

8.
documentation issues

9.
Options View Back
My Photo Sharing App My Photo Sharing App My Phot
preview image preview image
what size?
photo album 1
See 5.1.3.5a photo album 1 remove!
pr
img img img img img
photo album 2
photo album 3 animated? photo album 2
photo album 4 photo album 3 Previous
Options Select Back Options View Back Options
lor sit amet, Upon entering this screen the Lorem ipsum dolor sit amet, Once the user has clicked on a After pressin
pisicing elit, sed user is presented with a list of consectetur adipisicing elit, sed selected photo album list item (or fire butto
por incididunt photo albums from which to do eiusmod tempor incididunt they are presented with various presented w
re magna choose from. ut labore et dolore magna image previews from which to the image th
aliqua. select. selected.
Pressing up on the navi-pad or
m veniam, quis joystick will change the focus of Ut enim ad minim veniam, quis Using the left and right navi-pad It rubs the lo
tion ullamco the selected list item towards nostrud exercitation ullamco or joystick controls the user can else it gets th
quip ex... the top of the screen... laboris nisi ut aliquip ex... select a preview image...
Version 3.25
nobody actually reads the docs

10.
abandoned
atrophy sets in as errors increase

11.
http://www.flickr.com/photos/pedrosimoes7/161993169
we tend to better understand those
things we interact with directly

12.
language matters

13.
Bright
On
state
Off
Bright
Bright
Dim
Off Dim
state Dim
Off state
Off
Dim
state diagram for a lightbulb
standards such as UML will require literacy
from all contributors and stakeholders

14.
literary reference
literary reference is often required to ensure
understanding throughout the entire team

15.
taking
a poll
http://www.flickr.com/photos/tvandervossen/537557249
nobody will ever admit that they don’t
understand something in public

16.
prototype problems

17.
proof-of-concept
lo-fidelity
functional
design-the-box
experience
PDF
vision
paper
Expression
design
wireframe
Flash
demo HTML
video
hi-fidelity Axure
technical
jQuery
definition of prototype varies considerably

18.
http://www.flickr.com/photos/rosenfeldmedia/3978119393
paper is of course very lovely

19.
some assembly
required
http://www.flickr.com/photos/rosenfeldmedia/3978126471
but it does have its limits

20.
more on those later...
http://www.flickr.com/photos/mellis/304872324
eventually you do have to make something

21.
http://www.flickr.com/photos/philliecasablanca/2455765649
a lack of development resources

22.
risk of development occurring during design

23.
http://www.flickr.com/photos/solyoung/2786530077
often solving the wrong problems

24.
7 years for Vista?
high investment = low iteration

25.
this tends to get much worse as
you move across platforms

26.
prototypes elsewhere

27.
http://www.flickr.com/photos/wonderlane/2303683368
architects build models as a tool to better
communicate the ideas of a project

28.
http://www.flickr.com/photos/anikascreations/2047860479
automotive designers create
non-functional, full-scale clay models

29.
http://www.flickr.com/photos/24375810@N06/4116604728/sizes/o/
sculptors often experiment using
unconventional materials

30.
http://www.flickr.com/photos/m500/3853413759
actors stage rehearsals to craft the
optimal audience experience

31.
and I’m telling you this because...

32.
a funny thing happened
on the way to the theatre...
actually, I was
in the audience...

33.
http://www.flickr.com/photos/brainfarts/130711975
how do you climb a mountain
without a an actual mountain?

34.
and a tiny
experiment
the aha moment...

35.
imagination interpretation
the ability to see the ability to fill in the
things that are not gaps that imagination
there... leaves behind

36.
lawn chair?

37.
Is this the lawn chair you had in mind?

38.
pay no attention to the
little man behind the curtain

39.
this got me thinking...

40.
3rd law of prediction
“Any sufficiently advanced technology is
indistinguishable from magic.”
Arthur C. Clarke

41.
...could the inverse be true?

42.
“Magic is sufficiently indistinguishable
from any advanced technology.”

43.
click!
apparently tap is the new click

44.
make magic
thanks Bill!

45.
Nokia 6680
Oyster card sticky tape
http://www.flickr.com/photos/chrismear/2068295183
make small pieces loosely joined

46.
arduino
wii
remote
processing
http://www.flickr.com/photos/adactio/2338746600
do the simplest thing that could possibly work

47.
Nokia 6630
python
arduino
http://www.flickr.com/photos/mellis/304872324
keep exploring, and iterate constantly

48.
Minority
Report
inspire and capture the imagination

49.
kept being told to
ship our models... XML is platform agnostic
views <view id="main" src="main_view.png">
<state id="a" />
states
<event key="fire" view="preview_1" />
<event key="down" view="list_item4" />
processing <event key="rsk" action="exit()" />
</state>
events
</view>
<view id="other" src="other_view.png">
</view>
experience should
lots of be very similar
but build models, not the actual things

50.
the Eliza Effect fooled many people
and don’t hesitate to fake it

51.
behind the scenes

52.
familiar displays
familiar platforms standard networks
or Windows...
commodity hardware familiar boxes
and software
use what we already have

53.
edge case
edge case
more and more platforms
are being built on the web each day
already magical
embrace the web...

54.
processing arduino
software sketching
on the hardware interface
inside made for
artists and designers
lots of options
add a little open source

55.
unavoidable
get comfortable with code

56.
version control
methods
variables
model-view-controller design
parameters
functions
patterns
objects
classes
conditionals arguments
source
states datatypes
compile declarations
scripting
iterators
API this takes time
focus only on learning the basic concepts

57.
http://www.flickr.com/photos/bopuc/868543385
don’t be afraid of a little DIY

58.
http://www.flickr.com/photos/hendry/3053419265
opportunity to learn
start simple, invest little and fail early

59.
models
disposable
don’t be afraid to fill the bin

60.
http://www.flickr.com/photos/shokai/2530721619
reuse bits and pieces
but recycle what you can

61.
http://www.flickr.com/photos/dumbledad/486423418
or experiment
give yourself permission to play

62.
but, most of all keep it human

63.
tell more stories

64.
http://www.flickr.com/photos/kodomut/3616898946
a very human approach to
sharing knowledge

65.
http://www.flickr.com/photos/gaelic-arts/171283468
we can all participate equally

66.
http://www.flickr.com/photos/kodomut/3928119113
use models to enhance the experience

67.
http://www.flickr.com/photos/kodomut/3509669737
share stories with everyone involved

68.
and the rubber ducks...

69.
“If it looks like a duck, swims like a duck and
quacks like a duck, then it probably is a duck.”
James Whitcomb Riley

70.
add behaviour more like a duck ...more like a bath toy
add context
quack

71.
thank you
bryan rieger <bryan@yiibu.com>