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.

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
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
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
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
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
79. Profondità
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
89. https://goo.gl/tGof1w https://goo.gl/ZVgU7g https://goo.gl/AJUaXg
90. I tools?
92. Provare un tool è un conto, doverlo insegnare un altro
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
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