Prototyping - Explore ideas, improve your product!

Prototyping - Explore ideas, improve your product!

Ogni giorno aumenta nel mercato la necessità di progettare, produrre e rilasciare prodotti digitali in modo veloce, efficace e a basso costo. Per essere competitivi sul mercato questi prodotti devono però rispettare le esigenze, i bisogni e le aspettative degli utenti. In questo contesto la prototipazione svolge il fondamentale compito di poter rendere facilmente testabile, comunicanicabile e valutabile un’idea all’interno di un processo di design.

782a82776fc2baace6d3bda3e23d1157?s=128

Michele Mazzuco

March 26, 2019
Tweet

Transcript

  1. Explore your ideas, improve your product Prototyping

  2. Chi sono Michele Mazzucco Head of Design at Portchain @michelemazzucco

  3. Chi sono Michele Mazzucco Head of Design at Portchain @michelemazzucco

  4. Chi sono Michele Mazzucco Head of Design at Portchain @michelemazzucco

  5. Chi sono Michele Mazzucco Head of Design at Portchain @michelemazzucco

  6. None
  7. React
 Wonderland Samuele Verzi (@samu_)
 27 Marzo 2019 - Cobox,

    Cremona Prossimo evento
  8. Il talk?

  9. 01 Rivedere

  10. L’idea limitata di prototyping data dai trend degli ultimi anni*

    01 *nell’ambito del design digitale
  11. None
  12. None
  13. Condividere 02

  14. Ciò che ho imparato, i tools, le problematiche e i

    consigli 02
  15. https://goo.gl/e2Zzd6 https://goo.gl/1RFQgr ⭐

  16. Affrontare 03

  17. Viviamo in un momento dove ogni cosa si evolve velocemente

    03
  18. None
  19. None
  20. Prototyping & User Testing sono i principali strumenti per creare

    un prodotto efficace per l’utente finale
  21. Prototyping & User Testing sono i principali strumenti per creare

    un prodotto efficace per l’utente finale
  22. Prodotto creato non solo basandosi sull’opinione del designer

  23. Prodotto creato non solo basandosi sull’opinione del designer

  24. Prototipo Osservare / Testare Analisi Rifinitura prototipo

  25. Prototipo Osservare / Testare Analisi Rifinitura prototipo

  26. Il designer impara molto dai prototipi: capisce i limiti stessi

    del prodotto che deve progettare
  27. Image credit: Studio 7.5

  28. Image credit: designerpages.com

  29. I software vanno e vengono dobbiamo migliorarci come designer

  30. Prototipo?

  31. Tutto è un prototipo

  32. None
  33. Tutti gli artefatti che produciamo possono essere migliorati*

  34. Tutti gli artefatti che produciamo possono essere migliorati* *vanno considerati

    i limiti di progetto (scadenze, budget, etc…)
  35. Come designer se consideriamo tutto come un prototipo saremo più

    affini ad accettare feedback e migliorarlo*
  36. Come designer se consideriamo tutto come un prototipo saremo più

    affini ad accettare feedback e migliorarlo* *dando vita ad un prodotto migliore
  37. Design without Ego Davide “Folletto” Casali (https://goo.gl/JxpGTL)

  38. Migliori scelte per gli utenti, non per noi stessi

  39. Developer Designer Stakeholder Diverse idee di prototipo

  40. Developer Designer Stakeholder Diverse idee di prototipo

  41. Developer Designer Stakeholder Diverse idee di prototipo

  42. Developer Designer Stakeholder Diverse idee di prototipo

  43. Tutte sono idee valide, ma in parte limitate

  44. Primo esemplare, modello originale di una serie di realizzazioni successive,

    costruito, per lo più artigianalmente, nella sua grandezza normale e suscettibile di collaudi e perfezionamenti.
  45. Primo esemplare, modello originale di una serie di realizzazioni successive,

    costruito, per lo più artigianalmente, nella sua grandezza normale e suscettibile di collaudi e perfezionamenti.
  46. Primo esemplare, modello originale di una serie di realizzazioni successive,

    costruito, per lo più artigianalmente, nella sua grandezza normale e suscettibile di collaudi e perfezionamenti.
  47. Una manifestazione di un’idea realizzata in un formato utile al

    comunicarla o testarla (attraverso gli utenti) ponendosi il fine di migliorarla nel tempo.
  48. Una manifestazione di un’idea realizzata in un formato utile al

    comunicarla o testarla (attraverso gli utenti) ponendosi il fine di migliorarla nel tempo.
  49. Una manifestazione di un’idea realizzata in un formato utile al

    comunicarla o testarla (attraverso gli utenti) ponendosi il fine di migliorarla nel tempo.
  50. Permettendoci anche di capire e di sostenere le nostre decisioni.

    (attraverso gli utenti) ponendosi il fine di migliorarla nel tempo.
  51. Permettendoci anche di capire e di sostenere le nostre decisioni.

    (attraverso gli utenti) ponendosi il fine di migliorarla nel tempo.
  52. Permettendoci anche di capire e di sostenere le nostre decisioni.

    (attraverso gli utenti) ponendosi il fine di migliorarla nel tempo.
  53. Rendere le idee visuali e tangibili*

  54. *raccontare un’idea o un ipotesi può diventare molto complesso Rendere

    le idee visuali e tangibili*
  55. Scegliere il livello di fedeltà di un prototipo è una

    delle parti più critiche e complesse
  56. Scegliere il livello di fedeltà di un prototipo è una

    delle parti più critiche e complesse
  57. Tre livelli di fedeltà Bassa, Media e Alta

  58. Tempo e impegno Valore ottenuto

  59. Tempo e impegno Valore ottenuto

  60. Fedeltà bassa

  61. Image credit: UX Playground

  62. Non sono simili al prodotto finito* *no visual, non sono

    presentati sul medium corretto, ecc…
  63. Velocità e basso costo

  64. Fedeltà media

  65. Image credit: Marvel App

  66. Aumentano i dettagli, prime interazioni *diamo all’utente più contesto

  67. Fedeltà alta

  68. Video credit: Framer

  69. In questa fase lavoriamo a stretto contatto con chi implementerà

    il prodotto*
  70. *confrontiamoci con loro per capire la fattibilità In questa fase

    lavoriamo a stretto contatto con chi implementerà il prodotto*
  71. Bassa fedeltà Media fedeltà Alta fedeltà Vantaggi Veloci e poco

    costosi, non servono skills particolari. Possiamo usare qualsiasi tipo di materiale. Più interattivi, più facili da testare, buon compromesso tra tempo e qualità Design completo, inclusa: la parte visual, la parte di contenuto e le varie interazioni. Possiamo testare interazioni molto dettagliate. Svantaggi Interazioni limitate, risulta difficile testare flussi completi o particolari dettagli. Gli utenti non hanno contesto. Più tempo per un prototipo non completamente funzionante. Richiedono molto tempo, skills, software e a volte anche saper scrivere codice. Utilizzo Possiamo testare concetti di “alto livello” come flussi utente e architettura delle informazioni. Il miglior tipo di prototipo per testare differenti versioni. User testing su specifiche interazioni e flussi guidati. Possiamo presentare le nostre realizzazioni agli stakeholders. Questi prototipi hanno invece più contesto. User testing su interazioni molto specifiche e su alcuni dettagli. Possiamo eseguire test finali su i flussi e presentare il prodotto praticamente finito agli stakeholders.
  72. Cinque dimensioni Visual, Ampiezza, Profondità, Interazione, Dati

  73. Diversi livelli di fedeltà, massima ottimizzazione del nostro prototipo

  74. Visual

  75. Spesso è la dimensione che viene usata come unità di

    misura della fedeltà* *concetto sbagliato, anche se il visual ha un costo molto alto
  76. Ampiezza

  77. None
  78. None
  79. Profondità

  80. None
  81. None
  82. Interattività

  83. Il punto di contatto tra utente e sistema* *in tutte

    le sue forme, non solo animazioni
  84. Un’animazione può arricchire o distruggere un’esperienza* *queste rappresentano la risposta

    del sistema ad un’azione
  85. Dati

  86. Nullam quis risus eget urna mollis ornare vel eu leo.

    Praesent commodo cursus magna.
  87. der Technik ein für die jeweiligen Zwecke funktionsfähiges, oft aber

    auch vereinfachtes Versuchsmodell eines geplanten Produktes oder Bauteils dar. Es kann dabei nur rein äußerlich oder auch technisch dem Endprodukt entsprechen. Ein
  88. None
  89. https://goo.gl/tGof1w https://goo.gl/ZVgU7g https://goo.gl/AJUaXg

  90. I tools?

  91. None
  92. Provare un tool è un conto, doverlo insegnare un altro

  93. None
  94. None
  95. None
  96. Principle https://principleformac.com/

  97. ‣ Diverse modalità di export ‣ Import da Figma e

    Sketch ‣ Animazioni di impatto a basso costo ‣ Molto facile apprendere concetti base ‣ Driver - una timeline basata sull’interazione ‣ Components Principle - vantaggi
  98. Principle - svantaggi ‣ No cloud (ma sostituibile con il

    formato “nativo”) ‣ Funziona solo su macOS ‣ UI che rende difficile gestire flussi complessi ‣ Import non sempre perfetto
  99. None
  100. ProtoPie https://www.protopie.io/

  101. ProtoPie - vantaggi ‣ macOS e Windows ‣ Import da

    Figma, Adobe XD e Sketch ‣ Numero di interazioni e “trigger” molto ampia ‣ Logica condizionale, variabili, input, … ‣ Cloud per condivisione veloce ‣ Molto facile apprendere concetti base
  102. ProtoPie - Svantaggi ‣ No symbols, troppi copia-incolla ‣ Uno

    screen per pagina ‣ Community attiva ma ridotta ‣ Import non sempre perfetti
  103. Video credit: ProtoPie

  104. Framer Classic https://classic.framer.com/

  105. Framer Classic - Svantaggi ‣ Import da Sketch, Figma e

    Photoshop ‣ Estremamente flessibile (power by code) ‣ Core è open source ed è nato così ‣ Nato anche per progettare (starter-kits) ‣ Cloud per condivisione veloce
  106. Framer Classic - Svantaggi ‣ CoffeScript ‣ Curva di apprendimento

    alta per un designer ‣ Non esistono symbols ‣ Framer Studio (software) gira solo su macOS
  107. Video credit: Framer

  108. Domande? Dubbi?

  109. That’s all! @michelemazzucco hello@michelemazzucco.it