of prototypes, rubber ducks and little men behind the curtain

quack

Prototypes,Ducks

Of

Rubber

behindmen

and

curtainlittle

the

bryan rieger <bryan@yiibu.com>

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 <bryan@yiibu.com>