Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

Of Prototypes, Rubber Ducks And Little Men Behind The Curtain

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

  • Soyez le premier à commenter

Of Prototypes, Rubber Ducks And Little Men Behind The Curtain

  1. 1. Of Prototypes, Rubber Ducks and little men behind the curtain quack bryan rieger <bryan@yiibu.com>
  2. 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. 3. a few caveats...
  4. 4. i don’t have the answers
  5. 5. i make lots of mistakes but i learn from most of them
  6. 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. 7. December 2nd 2009 where my mind is at today...
  8. 8. documentation issues
  9. 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. 10. abandoned atrophy sets in as errors increase
  11. 11. http://www.flickr.com/photos/pedrosimoes7/161993169 we tend to better understand those things we interact with directly
  12. 12. language matters
  13. 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. 14. literary reference literary reference is often required to ensure understanding throughout the entire team
  15. 15. taking a poll http://www.flickr.com/photos/tvandervossen/537557249 nobody will ever admit that they don’t understand something in public
  16. 16. prototype problems
  17. 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. 18. http://www.flickr.com/photos/rosenfeldmedia/3978119393 paper is of course very lovely
  19. 19. some assembly required http://www.flickr.com/photos/rosenfeldmedia/3978126471 but it does have its limits
  20. 20. more on those later... http://www.flickr.com/photos/mellis/304872324 eventually you do have to make something
  21. 21. http://www.flickr.com/photos/philliecasablanca/2455765649 a lack of development resources
  22. 22. risk of development occurring during design
  23. 23. http://www.flickr.com/photos/solyoung/2786530077 often solving the wrong problems
  24. 24. 7 years for Vista? high investment = low iteration
  25. 25. this tends to get much worse as you move across platforms
  26. 26. prototypes elsewhere
  27. 27. http://www.flickr.com/photos/wonderlane/2303683368 architects build models as a tool to better communicate the ideas of a project
  28. 28. http://www.flickr.com/photos/anikascreations/2047860479 automotive designers create non-functional, full-scale clay models
  29. 29. http://www.flickr.com/photos/24375810@N06/4116604728/sizes/o/ sculptors often experiment using unconventional materials
  30. 30. http://www.flickr.com/photos/m500/3853413759 actors stage rehearsals to craft the optimal audience experience
  31. 31. and I’m telling you this because...
  32. 32. a funny thing happened on the way to the theatre... actually, I was in the audience...
  33. 33. http://www.flickr.com/photos/brainfarts/130711975 how do you climb a mountain without a an actual mountain?
  34. 34. and a tiny experiment the aha moment...
  35. 35. imagination interpretation the ability to see the ability to fill in the things that are not gaps that imagination there... leaves behind
  36. 36. lawn chair?
  37. 37. Is this the lawn chair you had in mind?
  38. 38. pay no attention to the little man behind the curtain
  39. 39. this got me thinking...
  40. 40. 3rd law of prediction “Any sufficiently advanced technology is indistinguishable from magic.” Arthur C. Clarke
  41. 41. ...could the inverse be true?
  42. 42. “Magic is sufficiently indistinguishable from any advanced technology.”
  43. 43. click! apparently tap is the new click
  44. 44. make magic thanks Bill!
  45. 45. Nokia 6680 Oyster card sticky tape http://www.flickr.com/photos/chrismear/2068295183 make small pieces loosely joined
  46. 46. arduino wii remote processing http://www.flickr.com/photos/adactio/2338746600 do the simplest thing that could possibly work
  47. 47. Nokia 6630 python arduino http://www.flickr.com/photos/mellis/304872324 keep exploring, and iterate constantly
  48. 48. Minority Report inspire and capture the imagination
  49. 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. 50. the Eliza Effect fooled many people and don’t hesitate to fake it
  51. 51. behind the scenes
  52. 52. familiar displays familiar platforms standard networks or Windows... commodity hardware familiar boxes and software use what we already have
  53. 53. edge case edge case more and more platforms are being built on the web each day already magical embrace the web...
  54. 54. processing arduino software sketching on the hardware interface inside made for artists and designers lots of options add a little open source
  55. 55. unavoidable get comfortable with code
  56. 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. 57. http://www.flickr.com/photos/bopuc/868543385 don’t be afraid of a little DIY
  58. 58. http://www.flickr.com/photos/hendry/3053419265 opportunity to learn start simple, invest little and fail early
  59. 59. models disposable don’t be afraid to fill the bin
  60. 60. http://www.flickr.com/photos/shokai/2530721619 reuse bits and pieces but recycle what you can
  61. 61. http://www.flickr.com/photos/dumbledad/486423418 or experiment give yourself permission to play
  62. 62. but, most of all keep it human
  63. 63. tell more stories
  64. 64. http://www.flickr.com/photos/kodomut/3616898946 a very human approach to sharing knowledge
  65. 65. http://www.flickr.com/photos/gaelic-arts/171283468 we can all participate equally
  66. 66. http://www.flickr.com/photos/kodomut/3928119113 use models to enhance the experience
  67. 67. http://www.flickr.com/photos/kodomut/3509669737 share stories with everyone involved
  68. 68. and the rubber ducks...
  69. 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. 70. add behaviour more like a duck ...more like a bath toy add context quack
  71. 71. thank you bryan rieger <bryan@yiibu.com>

×