of prototypes, rubber ducks and little men behind the curtain
DESCRIPTION
Presentation by Bryan Rieger of Yiibu for MEX 09 in London 02/12/09.TRANSCRIPT
designillustration
animation
research and design
from Toronto, Canada, eh!
motion graphics
1991 20092000
theatre design
multimedia
mobiledevelopment
design
webtheatre
rapid prototyping
media on devices
dot.com boom
Hypercard
Mosaic
mobile
Sabbatical in South East Asia
Flash Lite Web
DIY Toolsopen source
design
research
last millennium since then...
UML
writing
AfterEffects
Processing
Bill Buxton
Brenda Laurel
MPEG4SMIL
1996 2005
John Maeda
Qt
Flash
QuickTime
advertising
a little bit about me...“a straight line may be the shortest distance between two points, but is by no means the most interesting...”
UKgraphic design
Web
Web
animation
SVG
standards
animation
craft
management
animation
Java
WAP
games
entertainment
netscapeDirector
a few caveats...
i don’t have the answers
i make lots of mistakesbut i learn frommost of them
i’m more concerned with finding the best way rather than the generally accepted right way...
business goals
industry opinion
and customer needs
where my mind is at today...
December 2nd 2009
documentation issues
nobody actually reads the docs
Options Back
preview image
My Photo Sharing App
Previous Next
photo album 1
Options Back
photo album 2
photo album 3
preview image
My Photo Sharing App
photo album 4
Select Options Back
photo album 2
photo album 3
preview image
My Photo Sharing App
View
photo album 1
img img img img img
Upon entering this screen the user is presented with a list of photo albums from which to choose from.
Pressing up on the navi-pad or joystick will change the focus of the selected list item towards the top of the screen...
After pressing the centre softkey (or fire button) the user is then presented with a full preview of the image they had previously selected.
It rubs the lotion on it’s skin or else it gets the hose again.
Once the user has clicked on a selected photo album list item they are presented with various image previews from which to select.
Using the left and right navi-pad or joystick controls the user can select a preview image...
Version 3.25
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex...
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex...
See 5.1.3.5a
Options Back
photo album 2
photo album 3
preview image
My Photo Sharing App
View
photo album 1
img img img img img
what size?
animated?
See 8.2.14.f
remove!
atrophy sets in as errors increase
abandoned
http://www.flickr.com/photos/pedrosimoes7/161993169
we tend to better understand those things we interact with directly
language matters
Onstate
Offstate Dim
state
Dim
Off
Bright
BrightBright
Dim
Off
Dim
Off
state diagram for a lightbulb
standards such as UML will require literacy from all contributors and stakeholders
literary reference is often required to ensure understanding throughout the entire team
literary reference
nobody will ever admit that they don’t understand something in public
http://www.flickr.com/photos/tvandervossen/537557249
takinga poll
prototype problems
definition of prototype varies considerably
proof-of-concept
visionwireframe
functional
demodesign
technical
paper
hi-fidelity
lo-fidelity
Flash
AxureHTML
jQuery
ExpressionPDFdesign-the-box
video
experience
paper is of course very lovelyhttp://www.flickr.com/photos/rosenfeldmedia/3978119393
but it does have its limitshttp://www.flickr.com/photos/rosenfeldmedia/3978126471
some assemblyrequired
http://www.flickr.com/photos/mellis/304872324
eventually you do have to make something
more on those later...
a lack of development resourceshttp://www.flickr.com/photos/philliecasablanca/2455765649
risk of development occurring during design
often solving the wrong problemshttp://www.flickr.com/photos/solyoung/2786530077
high investment = low iteration
7 years for Vista?
this tends to get much worse as you move across platforms
prototypes elsewhere
http://www.flickr.com/photos/wonderlane/2303683368
architects build models as a tool to better communicate the ideas of a project
http://www.flickr.com/photos/anikascreations/2047860479
automotive designers createnon-functional, full-scale clay models
http://www.flickr.com/photos/24375810@N06/4116604728/sizes/o/
sculptors often experiment using unconventional materials
http://www.flickr.com/photos/m500/3853413759
actors stage rehearsals to craft the optimal audience experience
and I’m telling you this because...
a funny thing happenedon the way to the theatre...
actually, I wasin the audience...
how do you climb a mountain without a an actual mountain?
http://www.flickr.com/photos/brainfarts/130711975
the aha moment...
and a tinyexperiment
imagination interpretationthe ability to see things that are not there...
the ability to fill in the gaps that imagination
leaves behind
lawn chair?
Is this the lawn chair you had in mind?
pay no attention to thelittle man behind the curtain
this got me thinking...
“Any sufficiently advanced technology is indistinguishable from magic.”
Arthur C. Clarke
3rd law of prediction
...could the inverse be true?
“Magic is sufficiently indistinguishable from any advanced technology.”
click!apparently tap is the new click
make magicthanks Bill!
make small pieces loosely joined
http://www.flickr.com/photos/chrismear/2068295183
Oyster card
Nokia 6680
sticky tape
do the simplest thing that could possibly work
wii
http://www.flickr.com/photos/adactio/2338746600
remote
arduino
processing
http://www.flickr.com/photos/mellis/304872324
keep exploring, and iterate constantly
arduino
python
Nokia 6630
MinorityReport
inspire and capture the imagination
but build models, not the actual things
experience should
<view id="other" src="other_view.png">
</view>
<event key="rsk" action="exit()" />
<event key="down" view="list_item4" />
<event key="fire" view="preview_1" />
</view>
<view id="main" src="main_view.png">
XML is platform agnostic
<state id="a" />
</state>
states
views
events
be very similar
kept being told toship our models...
lots of
processing
and don’t hesitate to fake it
the Eliza Effect fooled many people
behind the scenes
commodity hardware
use what we already have
standard networks
or Windows...
familiar platforms
familiar boxes
familiar displays
and software
embrace the web...
more and more platformsare being built on the web each day
already magical
edge caseedge case
hardware interface
software sketching
add a little open source
made forartists and designers
on theinside
processing arduino
lots of options
get comfortable with codeunavoidable
focus only on learning the basic concepts
version control
patternsconditionals
variables
states
design
iterators
objects
compile
methods
source
scripting
datatypes
classesfunctionsmodel-view-controller
arguments
parameters
declarations
this takes timeAPI
http://www.flickr.com/photos/bopuc/868543385
don’t be afraid of a little DIY
http://www.flickr.com/photos/hendry/3053419265
start simple, invest little and fail early opportunity to learn
don’t be afraid to fill the bin
disposable
models
http://www.flickr.com/photos/shokai/2530721619
but recycle what you canreuse bits and pieces
or experimenthttp://www.flickr.com/photos/dumbledad/486423418
give yourself permission to play
but, most of all keep it human
tell more stories
http://www.flickr.com/photos/kodomut/3616898946
a very human approach to sharing knowledge
http://www.flickr.com/photos/gaelic-arts/171283468
we can all participate equally
http://www.flickr.com/photos/kodomut/3928119113
use models to enhance the experience
http://www.flickr.com/photos/kodomut/3509669737
share stories with everyone involved
and the rubber ducks...
“If it looks like a duck, swims like a duck and quacks like a duck, then it probably is a duck.”
James Whitcomb Riley
quack
add behaviour
add context
...more like a bath toymore like a duck
thank youbryan rieger <[email protected]>