Rapid Prototyping - Arte e artigianato

1,453 views

Published on

Il mio workshop all'Italian IA Summit 2012 su come costruire prototipi in maniera molto veloce.

Thanks to my mentors:
Nathan A Curtis
Todd Zaki Warfel
Andrew Payne

Published in: Technology

Rapid Prototyping - Arte e artigianato

  1. 1. @rainwiz #iias12 #prototypingrapid prototypingarte e artigianatoRaffaele BoianoITALIAN IA SUMMIT 2012@rainwiz #prototyping
  2. 2. A intro B materia C tavolozza D processo E outro @rainwiz #iias12 #prototypingperché sono qui?e perché ci siete anche voi?
  3. 3. A intro B materia C tavolozza D processo E outroabout me @rainwiz[chi]rainwiz a.k.a. Raffaele Boiano[dove]Fondazione Enasarco, Roma[cosa]User Experience Team Leader[perché]Perché fare prototipi e come?[addictions]Rugby, Refn, Radiohead, Renato Rosaldo, Remo Remotti
  4. 4. A intro B materia C tavolozza D processo E outroVoi... HTML 32% 38% CSS 25% 32% JS 32% 38% XML 32% 32% per niente poco medio abbastanza moltoRIsposte all’indagine 6/10 maggio 2012
  5. 5. A intro B materia C tavolozza D processo E outro Stories Scenarios Personas Content Inventories Analytics Proverbs Process Flows System Maps Concept Maps User Surveys Wireframes Prototypes Storyboards Concept Designs Narrative Reports Presentations Design Patterns Style Guides Specifications Plans User E Xperience Treasure Map by Jeffery Callender and Peter Morvillehttp://semanticstudios.com/publications/semantics/000228.php
  6. 6. A intro B materia C tavolozza D processo E outroPersona[per-soh-nuh]n. Un personaggio inventato che rappresenta obiettivi e comportamento di un gruppo di utenti.
  7. 7. Neil James Turner, UXfortheMasses
  8. 8. Angel Brown, TheTeam
  9. 9. PERSONAGGIO PRIMARIO Paolo Stanchi Agente pensionando (agente attivo) INFORMAZIONI PERSONALI Età: 63 PROFILO Sesso: M Studi: Ragioniere Paolo Scarpi ha fatto l’agente di commercio per quasi 40 anni. È giovanile e USO DI INTERNET potrebbe continuare ma dopo tanto tempo vorrebbe smettere per stare Esperienza: 1 anno Attività svolte: posta elettonica accanto alla sua famiglia e crescere i nipotini. Ore/sett.: 2 Crede di avere diritto alla pensione ma non ne è sicuro al 100%. È interessato a Pc: Windows – IE7 Connessione: Dial up (56kb) capire a quanto ammonterebbe il suo assegno nel caso andasse subito in pensione o nel caso restasse al lavoro per un altro paio di anni. OBIETTIVI PERSONALI OBIETTIVI AZIENDALI MOTTO Usa il sito per: Vogliamo che usi il sito per: “Tra poco andrò in •  Calcolare la sua pensione e simulare •  Inviare una domanda di pensione pensione ma non so ancora a quanto altri scenari nel caso resti 1 o 2 anni; corretta, cioè recante tutta la ammonterà!” •  informarsi,scaricare la modulistica e documentazione necessaria. inviare la domanda di pensione. EOL 2008: personas analisysRaffaele Boiano, © Fondazione Enasarco 2008
  10. 10. A intro B materia C tavolozza D processo E outroScenario[si-nair-ee-oh]n. Una storia plausibile su una persona in una situazione specifica mentre usa il prodotto/servizio futuro che state progettando
  11. 11. Priyanka Chaurasia
  12. 12. Post it scenario
  13. 13. nForm
  14. 14. A intro B materia C tavolozza D processo E outroWireframe[si-nair-ee-oh]n. È una schematizzazione di un artefatto. Nel caso di una pagina web, il wireframe rappresenta il layout, indicando i contenuti, gli elementi dell’interfaccia, il sistema di navigazione e descrive le relazioni tra tutti questi elementi.
  15. 15. Sketch
  16. 16. Mainstream wireframe
  17. 17. Annotated wireframe - © Fondazione Enasarco
  18. 18. A intro B materia C tavolozza D processo E outroMockup[mok-uhp]n. Un mockup (o mock-up), è un modello, in scala o a dimensione, di un prodotto. È usato per valutare il design, per fare formazione, promozione o altri scopi. Un mockup è un prototipo se è in grado di simulare almeno una parte delle funzionalità del sistema e consente quindi dei veri e propri test del design.
  19. 19. Fabio e i suoi alianti LS10-S
  20. 20. Photoshop look&feel
  21. 21. A intro B materia C tavolozza D processo E outroPrototype[proh-tuh-tahyp]n. Un prototipo è un mockup che permette la simulazione di almeno uno scenario. Consente cioè a una persona di vivere l’esperienza di un prodotto potenziale. Non è il prodotto, è qualcosa che ne simula l’esperienza.
  22. 22. A intro B materia C tavolozza D processo E outro @rainwiz #iias12 #prototypingche significafedeltà?
  23. 23. A intro B materia C tavolozza D processo E outrovisual 1B/N o grafica coordinata al brand?
  24. 24. A intro B materia C tavolozza D processo E outrofunctional 2Completamente statico o dinamico?
  25. 25. A intro B materia C tavolozza D processo E outrocontent 3“Lorem ipsum” o contenuti reali (testi, label)?
  26. 26. A intro B materia C tavolozza D processo E outrodepth 4Un solo stato per component o tutti gli stati?
  27. 27. A intro B materia C tavolozza D processo E outrobreadth 5Un solo step/pagina o tutto il flusso/sito?
  28. 28. demo naked code prototype guideVISUAL wireframe FUNCTIONAL mockup
  29. 29. A intro B materia C tavolozza D processo E outro @rainwiz #iias12 #prototypingla materiadesign patterns & components
  30. 30. Piet Mondrian, composition II in red, blue and yellow, 1930
  31. 31. A intro B materia C tavolozza D processo E outrodi cosa parliamo quando parliamo didesign patterns?
  32. 32. A intro B materia C tavolozza D processo E outro“ Each pattern describes a problem which occurs over and over again in our environment, and then describes the core of the solution to that problem, in such a way that you can use this solution a million times over without ever doing it the same way ” twice Cristopher Alexander, 1977
  33. 33. A intro B materia C tavolozza D processo E outroChristopher Alexander, A pattern Language, © 1977
  34. 34. “ In essence, pattern are structural and behaviourial features that improve the habitability of something - a user interface, a website, an object oeriented program or even a building. They made things easier to understand or more beautiful; they make tools more useful and usable. As such, patterns can be a description of best practices within a given design domain. They capture common solutions to design ” tensions. Jenifer Tidwell
  35. 35. A intro B materia C tavolozza D processo E outrodesign pattern[dih-zahyn pat-ern]n. A global solution to a common design problem
  36. 36. A intro B materia C tavolozza D processo E outronavigationcome fanno gli utenti a sapere dovesono, dove andare e come muoversi?
  37. 37. Routes
  38. 38. Directions
  39. 39. Placeholders
  40. 40. Mappe http://www.clarksbury.com/cdl/maps.html
  41. 41. A intro B materia C tavolozza D processo E outroSignpost: page title, url, favicon, logo
  42. 42. Breadcrumbs
  43. 43. Breadcrumbs
  44. 44. Breadcrumbs
  45. 45. A intro B materia C tavolozza D processo E outroDirections: navigation elements (list item, dropdown Menu,shifting bar, tabs)
  46. 46. Navigation menu
  47. 47. Navigation dock
  48. 48. A intro B materia C tavolozza D processo E outroi design pattern si basano spesso suconvenzioni
  49. 49. A intro B materia C tavolozza D processo E outroIo, un bagno e la Germania
  50. 50. A intro B materia C tavolozza D processo E outroe quindi cosa sono icomponents?
  51. 51. A intro B materia C tavolozza D processo E outro An Experiencehierarchy is made up Collections of flows & hierarchies ofPensiamo in maniera gerarchica Pages assembled via Components composed of ElementsNathan A Curtis, Modular Web Design
  52. 52. A intro B materia C tavolozza D processo E outro An A A E-commerce Travel News site includes a site has a site includes a Shopping Search World Newsof flow that includes a flow that contains section with a Product Results Article page with a page that includes a page that has as Cart Summary Visual Map Action button component with a component with a component with a Link Zoom in Share to the shopping cart element button Nathan A Curtis, Modular Web Design
  53. 53. 13components
  54. 54. A intro B materia C tavolozza D processo E outrothe Web is rectagles! Page Layout Component Composition Source Code !"#$%& !"#$%&" /#-%+%+0 ()*+,)-. 1,)0 2%.") 3-4"# 5$"+6 1. Logo 6:3+/-3GTTI3+E*.GTTI4(6)*.GTTI=016/-*+2( C#6%&,"8D%09,%096 A#&%& 2. Utility Bar 7)+6-&685%096!9-4" 3. Search =) GL)/07,-4024,024/I GL)/07,-/0/,-/4+/7+1*:+1+16=D-) =) GL)/07,-4024,024/I "()*+,-*./)+01012.+13(/4-)2-1-)+, =) GL)/07,-4024,024/I 01560)0-*.7(1/+7/6*%0+/4-8(,,(9012 (8,01-*3-:-13012(1/4-/0/,-I =) GL)/07,-4024,024/I (:/0(1*; DEGL6/4()J+=-I 79-68:)* 4. Primary Navigation 8()-024/*4+:-*F7(= GM(1/4IGHHI.G@@@@I » » <=+0, >+,, 5. Article Title N())():()6=560(30/-=:()-=+356(30+-7/(/+/-=56(0:*+=*61/- » !+%-?*>+,,@(6 %(,6:/6*.(77+D0:0/-(30+/6)*-30/+)70-10/0*70=(,6:/+/6*-+56-%(,( 06*.%-1/.5661/4+)70:*+=-/)-:-)0*1(1-(*+-76*=+0(*-*-560*+,0/. 1(1*-)(302-10-/+:0-/0*0+D():())6=%(,6:/6)OL/3(,6:/0+/0*-)-:63 » !"#$%&%()*+, -(. ) 6. Article Highlights +13+1/6))-:/+*6,:+)740,0/+/-=0:*6*)-+77+/-10-1-*/0+13+-(36/ "#&%& +1/862+FL/+6/%(,-13+=,+D())(D,+D()*6136703-(*+%-,,056(3056+/ %(,6:/+/)-:-3-*/)6=3(,-*/.(:/0*61/862+FJ-=-070-1/01:-:-30+*: !%0+8;+8:)* 7. Author Attribution -)0()-*/0+=+6/-P-P-)())6=6,:+)0+%(,,+D():()*-1/F */.)01.)%"$"#(2(%)(3%431)5(364.)3)#(2($$(3.)%)#(.(74()"+, -0() *6=%(,())(3(,6:/+=6*3+1(1-*%-,06)-:/+-16*700**017/+/-=-6= ) ?*-)1+=- 8. Video 4+)6=56+=+D()-:(*:())()-1(D0/+*:-)61/-6=*01)-)6=0=0, B+**9()3 -P:,0+3(,-1-/+6/-1(1-P-)8-)-:-)(/-76*+13-,,0210=-:(*/(/+/-*/. +*)-:)-06=)-=56(361/5603(,-10=-10*-(*+%-,-*-06=56+- C-=-=D-)=-(1/40*7(=:6/-) 9. Article Tasks *0=01706=56+/6)OQ+D()6=8620/-P7-:630/862+FJ+=56+-76= 10. Article Content -**-130*01-10*0/0,056(*3(,-7/06/,0*56+/6*/0(**(,6:/+*0=+7(1 !%0+8;+ 1(1*-560*3(,6:/+*+=-3(,(-P-**-56+=5607()0(=10=6*+-)1+/0* +:-)+%(,-7/(/+/0D6*.560D6**-307036*F "()2(/E(6); ?*-)1+=- 80()#(6)041)0.).31(3.)6")69)"+, -0/":);1)(19)74.)5($<3.1)2$0/":) ) L:-)-:630*+=.*0/+*0=016*./-1/6)*-56+/-:,+776*%0/-=56--+560* +63+=.(30*:)(/()-:-,,+=.%(,()0/-,+/-*-*/(7(=10*3(,6:/+/F A2%.")8/%6,"B GS03-(3-*7)0:/0(1Q+6/0*0/0(7(=10=+%-,-1/0*/+6/862+F :)68<"68-8=">?"#@ 11. Contact Us ?/+6/,056(3=(30/+/-03-+56--(*16=56035661/0,07 C+/6).*0/061/30/+*61/0+%(,6:/+/0()-*-P:,+6/:()+/-10/862+FL*+* .4.03%)-1"3.(74.)364.0)-"3.(#")"+, -1010)."$"#)0$74)#()5(3.)3.) ) /-=:-356+/6)-:-)8-)6=862+F"-)I » M()-<024/A4+:-*S03-(* >)-+/-+1+77(61/ 8()+77-**/( -024/*4+:-*F7(=F 12. Sign In )-7/0*06*+6/560356-%-,0/0*-+)70+=.1(1:+)6=06=*01/6).*6=16= +3560*-P:-)0/+/-=:-)0D6*F R)-:)+/0(1*-76,,+630+=-:-)0/+-))()-.16=-P-)6=1(D0*3-)0D-+ A4+)- <=+0, B)01/U-P/A0V-; C8 8 CC J#K%& ()*+,)-. 13. Downloads 7(=1040/+6/-+/-=0:*6=8620+/-7-:)+-560D,+=.+7-*-P:,02-10+1/0* GH(76=-1/1+=-I 56+/-=%03-=56+-%(,(0170(=10*+6/-*-*/%(,6:/0(*+,05603=++:-,-*/0()+30*)-7()-=:())(%03-D0/+10*/(/+=76*+=.+:-, =0,0+/6*+630/56001%-10*7030/%(,()0()-:)-=-P:-,-%-,-*-%-,0/61/862+FJ+=36*+)0D6*30/-/+7-))(-/6,,():()0+3(,()0+/0()-*-30* GH(76=-1/1+=-I GH(76=-1/1+=-I 14. Footer 3(,6:/+*:-)1+/FNathan A Curtis, Modular Web Design
  55. 55. A intro B materia C tavolozza D processo E outroComponent[kuhm-poh-nuhnt]n. A reusable building block for consistent interface design specific to a design system Also sometimes called a module, page chunk, portlet, widget etc
  56. 56. A intro B materia C tavolozza D processo E outrocomponentsvspatterns
  57. 57. A intro B materia C tavolozza D processo E outroandare dal pattern al componentistanziare Active Tab Inactive Tab Inactive Tab Inactive Tab Inactive Tab
  58. 58. A intro B materia C tavolozza D processo E outroandare dal pattern al componentistanziare Active Tab Inactive Tab Inactive Tab
  59. 59. A intro B materia C tavolozza D processo E outroandare dal component al patternastrarre Video Player Pattern
  60. 60. Brandplace Search AuthenticateGlobal nav Register Window controls Advertising Video player Get info RatingRecommend Authenticate Advertising AvantGoPopular content
  61. 61. Search Brandplace Register Authenticate Blurb Register Advertising Tabs Video playerPopular content Main navigation Rating
  62. 62. A intro B materia C tavolozza D processo E outro Shared components: 0 Shared patterns: 7 Brandplace, authenticate, register, search, advertising, video player, popular content
  63. 63. A intro B materia C tavolozza D processo E outroproviamo a ricapitolare ledifferenze pattern component comportamento, flusso, page chunk page chunkTipo principi generali applicabili in molti specifici di un design, contraddistintiSpecificità contesti dal look&feel non dipendono dalla posizione sono istanziati in una zona specificaPosizione del layout aperti a trattamenti di stile molto specifici di un sistema, possono avereStile diversi molte variazioni Non presentano linee editoriali Hanno un tono, lessico e carattereCopy specifico Possono essere rappresentati da un Hanno un HTML/CSS/JS definito perMarkup codice generico funzionare in un sistema specifico
  64. 64. @rainwiz #iias12 #prototyping EXERCISE 1patterns vs components
  65. 65. Brand Sign up Featured Call to action Brand ColophonToh.. Una splash page!
  66. 66. +1 The splash page ;)
  67. 67. A intro B materia C tavolozza D processo E outro @rainwiz #iias12 #prototypingla tavolozzacreare una design library
  68. 68. Hieronymus Bosch, trittico del giardino delle delizie, 1840/1890
  69. 69. A intro B materia C tavolozza D processo E outrocomponentvalue
  70. 70. A intro B materia C tavolozza D processo E outroQual è il component? ?entrambi: dipende dal grado di riusoNathan A Curtis, Modular Web Design
  71. 71. A intro B materia C tavolozza D processo E outroFrequenza di riuso Alta Media BassaNathan A Curtis, Modular Web Design
  72. 72. A intro B materia C tavolozza D processo E outrocomponent clusterUn gruppo di component che spesso sonopresentati insieme nella stessa page regionNon sono un unico component perché possonoessere presentati anche separatamente
  73. 73. A intro B materia C tavolozza D processo E outroHeaderNYT - U.S.
  74. 74. A intro B materia C tavolozza D processo E outroHeaderNYT - Travel
  75. 75. A intro B materia C tavolozza D processo E outrovariationsOgni cluster o singolo component può assumerediversi statiLe variazioni sono un’opportunità per comunicare inmaniera più accurata delle situazioni epersonalizzare l’esperienza utente
  76. 76. A intro B materia C tavolozza D processo E outroVariazioni di statoUtente anonimoUtenteloggato
  77. 77. A intro B materia C tavolozza D processo E outroVariazioni di target
  78. 78. A intro B materia C tavolozza D processo E outroconsistency[kuhn-sis-tuhn-see]n. Il grado di uniformità e coerenza tra le parti che costituiscono il tutto (la composizione, l’esperienza ecc)
  79. 79. A intro B materia C tavolozza D processo E outrostabilityQuante iterazioni hanno vissuto i component?Sono stati testati?
  80. 80. A intro B materia C tavolozza D processo E outroFrequenza delle iteractions approved completed iterated drafted notyetstartedBenoît Meunier
  81. 81. A intro B materia C tavolozza D processo E outrocomponentlibrary
  82. 82. A intro B materia C tavolozza D processo E outroSun Component Library
  83. 83. A intro B materia C tavolozza D processo E outroQuando un design system è maturo il visual si puòconcentrare sull’innovazione (nuovo/redesign) Project with significant custom design work wireframes visual code Project reusing visual existing components wireframes check codeNathan A Curtis, Modular Web Design
  84. 84. Organizzare il component catalog senza barriere
  85. 85. Un content inventory per soli IA
  86. 86. A intro B materia C tavolozza D processo E outroorganizzazione 1Come raggruppare i component?Come nominarli?
  87. 87. A intro B materia C tavolozza D processo E outroClassi di componentGlobal (Global Nav, Header, Footer)Navigation (Secondary or Local)Sidebar (Sidenav, Right Rail, Related Links)Content (Body, Main)Spotlight (Lead, Billboard, Hero, Big Top)Popup (Popins, Hovers, Lightboxes)Nathan A Curtis, Modular Web Design
  88. 88. A intro B materia C tavolozza D processo E outrosun.com • Global • Navigation • Side • Content • SpotlightNathan A Curtis, Modular Web Design
  89. 89. A intro B materia C tavolozza D processo E outrocisco.com • Global • Navigation • Side • Content • SpotlightNathan A Curtis, Modular Web Design
  90. 90. A intro B materia C tavolozza D processo E outroDare il giusto nome alle cosecategorie contengono componenti che possono avere variazioni ognuna delle quali ha almeno un esempio variazione categoria G 01 v1 x1 esempio componenteNathan A Curtis, Modular Web Design
  91. 91. A intro B materia C tavolozza D processo E outroresponsabilità 2Assegnare a una persona la gestione della libreria
  92. 92. A intro B materia C tavolozza D processo E outroIl mastro di chiavi deve:gestire le richieste di nuovi componentsaper delegare la progettazione di componentcontrollare le iterazioni in corsoevangelizzare il teamè il pm che sogni
  93. 93. A intro B materia C tavolozza D processo E outrocomunicazione 3Semplice per gli sviluppatoriSemplice per il team di front-endSemplice per il content strategy & copySemplice per il marketingSemplice per il bossAccessibile agli utenti!
  94. 94. A intro B materia C tavolozza D processo E outroUn sistema di regole, un lessicocomune crea il team
  95. 95. @rainwiz #iias12 #prototypingEXERCISE 2 built your library
  96. 96. A intro B materia C tavolozza D processo E outroMaterialiAvete una serie di pagine. Una è speciale!
  97. 97. A intro B materia C tavolozza D processo E outro1. OrganizzareGuardate le differenze tra le pagine e individuate i component più usati
  98. 98. A intro B materia C tavolozza D processo E outro2. IsolareTagliate ogni component dal foglio
  99. 99. A intro B materia C tavolozza D processo E outro3. RaggruppareScegliete delle caratteristiche per raggruppare i component
  100. 100. A intro B materia C tavolozza D processo E outro4. ClassificareTrovate etichette per i gruppi che avete individuato
  101. 101. A intro B materia C tavolozza D processo E outro5. ArchiviareDate un nome ad ogni component e pensate alle possibili variazioni
  102. 102. A intro B materia C tavolozza D processo E outro @rainwiz #iias12 #prototypingil processorapid prototyping HTML/CSS/JS
  103. 103. Lucio Fontana, concetto spaziale, 1959
  104. 104. Lucio Fontana
  105. 105. A intro B materia C tavolozza D processo E outro visual content ia & ux dev designer strategist team team
  106. 106. Todd Zaki Warfel, Methods & Tools Comparision Martix
  107. 107. EXPLICIT CODE SOON
  108. 108. A intro B materia C tavolozza D processo E outroun mondo ditools
  109. 109. A intro B materia C tavolozza D processo E outroHTMLCSSJS design concept prototyping production
  110. 110. demo naked code prototype guideVISUAL wireframe FUNCTIONAL mockup
  111. 111. A intro B materia C tavolozza D processo E outroEsserver o non esserver?Èsserver o non esserver? oggetti di design
  112. 112. A intro B materia C tavolozza D processo E outrola cassetta degli attrezzi di oggifirefox & firebug
  113. 113. A intro B materia C tavolozza D processo E outroon your mark, get set, gohttp://dl.dropbox.com/u/950969/8b_iias12.zip
  114. 114. A intro B materia C tavolozza D processo E outro @rainwiz #iias12 #prototypingso what?che mi porto a casa?
  115. 115. A intro B materia C tavolozza D processo E outro 1hai un amico e non lo saisi chiama git
  116. 116. https://github.com/
  117. 117. A intro B materia C tavolozza D processo E outro 2c’ho messo un po’ a imparare comeessere responsive
  118. 118. http://mediaqueri.es/
  119. 119. A intro B materia C tavolozza D processo E outro 3 strumentii deliverables sono documenti cheraccontano storie
  120. 120. FONDAZIONE ENASARCO - TOUCHPOINTS MANAGEMENT Processi Primari: gestione iscritti, entrate, uscite, attività ispettiva Strategia LINE OF INTERNAL ACTION Attività Ambito owned digital media management social media management press owned press staff training LINE OF VISIBILITY Content & Design & Write post Send Produce Tweet & Socialize Update Write & Manage Face to face knowledge development & manage targeted awareness relate contents professional activity produce customer relations & Interventi base 24/7 self- interactions messages video & manage network & & media editions relation solutions management service interactions projects relations FONDAZIONE 01 Enasarco Magazine Affrontare il cambiamento: la nuova sfida per il presente Agente: un lavoro che dà valore all’azienda Speciale convenzioni Soggiorni termali e climatici 2010 Touchpoints enasarco.it Portale inEnasarco Blog Newsletter Youtube Twitter Facebook LinkedIN Press & Media Magazine Contact Cent. Sedi LINE OF USER INTERACTION Fruire di servizi core Inviare feedback Discutere/condividere Chiedere aiuto/info Fare network Scoprire novità Approfondire Ideale Adatto ma non ideale InadattoTouchpoints management
  121. 121. “ Storytelling reveals meaning without committing the error of defining it. ” Hannah Arendt
  122. 122. “Storieswho are able to tell those only happen to them. ” Paul Auster
  123. 123. “Those who tell the stories rule society. ” Platone
  124. 124. A intro B materia C tavolozza D processo E outroI love you guys!Raffaele Boiano @rainwizMentorsNathan A CurtisAndrew Payne

×