Of Prototypes, Rubber Ducks And Little Men Behind The Curtain

  • 5,223 views
Uploaded on

Presentation by Bryan Rieger of Yiibu for MEX 09 in London 02/12/09.

Presentation by Bryan Rieger of Yiibu for MEX 09 in London 02/12/09.

More in: Design , Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
5,223
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
171
Comments
2
Likes
24

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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>