1. Lean Prototyping
verifica, misura e valida le tue
assunzioni con il minimo sforzo
e nel più breve tempo possibile.
by Luca Scarpa
DevMarche
Ancona, Novembre 13, 2014

2. Luca Scarpa
CTO, CFO e frontend developer @ GNV&Partners
@luscarpa

3. Che cos’è un
prototipo

4. Definizione
Il prototipo è il modello originale o il primo
esemplare di un manufa o, rispe o a una sequenza
di eguali o similari realizzazioni successive.
Normalmente costruito in modo artigianale e in
scala 1:1, sul prototipo verranno effe uati collaudi,
modifiche e perfezionamenti, fino al prototipo
definitivo, da avviare alla produzione in serie.
Source: h p://it.wikipedia.org/wiki/Prototipo

5. Una primissima
versione di un’idea

6. Una primissima
versione di un’idea
testabile
{

8. Perché?

9. Per rispondere alle domande

10. Per rispondere alle domande
e generarne di nuove

11. Testare le assunzioni

12. Comparare alternative

13. Ridurre i rischi

14. Condividere le vostre
idee con gli altri

15. Condividere le vostre
idee con gli altri
Team
Stakeholders Users
Angels
Investors Clients
Boss

16. Quando?

17. ideare
prototipare
testare / validare
condividi

18. ideare
prototipare
testare / validare
condividi
Prima possibile!

19. Sketch
“L’intento dello sketching è di
separare il design dal processo di
creazione”
• veloce
• tempestivo
• economico
• monouso
• esplorativo
• non dettagliato
• opportuno
• divergente
• comunicativo
Caratteristiche

20. Wireframe
“Lo scopo di un wareframe è di comunicare ed
esplorare i conce i che escono dallo sketching, quei
conce i che si vuole ulteriormente approfondire
durante la fase di design dell’interfaccia utente”
• veloce
• economico
• attuabile
• ambiguo
• minimale
• opportuno
• confirmatorio
Caratteristiche

21. Elaborazione
delle idee
Riduzione delle
dell’ideeLaseau’s Funnel
Processo di design

22. Prototipo

23. Rapido
Il prototipo deve essere realizzato nel minor tempo
possibile per supportare la creazione di molteplici
versioni.
Deve poter essere modificato in maniera iterativa e
lasciar spazio al cambiamento in modo veloce.

24. Economico
Il prototipo, sopra u o nelle primissime versioni,
potrebbe prendere strade completamente opposte
al desiderata, per cui è necessario poter
ricominciare da zero senza avere ripercussioni
disastrose nell’andamento del proge o.

25. Minimale
Il prototipo deve rispondere a domande funzionali,
non estetiche o di de aglio, deve contenere le
funzionalità principali che riescono a ridurre gli
sprechi futuri.

26. Testabile
Il prototipo deve poter essere utilizzato dai vostri
utenti, deve essere utilizzabile, non deve
soffermarsi sul raccontar loro del prodo o, ma
focalizzarsi sulla funzionalità che necessita di
essere validata.

27. Misurabile
Il prototipo deve poter fornire dati su cui basare le
proprie scelte e deve potervi “parlare” su livello di
gradimento dei vostri utenti. Anche il dato
negativo è tanto importante quanto il dato
positivo, ma in entrambi i casi vanno raccolti.

28. Pianifica per come
deve FUNZIONARE,
NON per come deve
sembrare

29. Sketch vs Prototipo

30. Sketch Prototipo
Evocative Didactic
Suggest Describe
Explore Refine
Question Answer
Propose Test
Provoke Resolve
Tentative Specific
Non-commi al Depiction
Fonte: Sketching User Experiences di Bill Buxton

31. Esempio pratico
LA FUSIONE

32. Idea

33. Steps 1/7

34. Steps 2/7

35. Steps 3/7

36. Steps 4/7

37. Steps 5/7

38. Steps 6/7

39. Steps 7/7

40. Risultato

41. Visual Design 1/3

42. Visual Design 2/3

43. Visual Design 3/3

44. Prototipo

45. Predisporsi al fallimento

46. Reiterare
#FAIL

47. Reiterare
#FAIL

48. Reiterare
#WIN

49. Cura dei de agli

50. Risultato finale

51. Qual è il grado di fedeltà?

52. Fedeltà
Il grado di precisione con cui qualcosa è riprodo o

53. Bassa fedeltà Alta fedeltàvs

54. Bassa fedeltà Alta fedeltàvs
Veloce Lento
{
{

55. Bassa fedeltà Alta fedeltàvs
Veloce Lento
{
{

56. Prime iterazioni di esplorazione
Tempo
Fedeltà
Sketches
Wireframes
Prototipi
Design
Ideazione Validazione
concetti User Experience

57. Iterazioni di avanzamento
Tempo
Fedeltà
Sketches
Prototipi
Design
Ideazione Validazione
concetti User Experience

58. Prototipi a
bassa fedeltà

59. “I prototipi a bassa fedeltà sono costituiti da
limitate funzionalità e minima interazione. Sono
costruiti per rappresentare conce i, alternative di
design e diverse risoluzioni… Questi prototipi
sono creati per comunicare, educare ed
informare.” cit. Low vs. high-fidelity prototyping debate
Esempi:
Prototipi su carta
Prototipi cliccabili

60. Prototipi su carta
Realizzati con componenti molto semplici: carta,
penna e nastro adesivo consentono di simulare
esperienze in modo veloce, divertente e furbo.
Non richiedono alcun tipo di investimento digitale
e grazie alla creatività è possibile simulare
avanzamenti di stato o interazioni particolari.
Sono molto utili sopra u o in ambienti touch che
richiedono all’utente la manipolazione degli
elementi sullo schermo.

61. Prototipi su carta
Pro
• Possono esser creati in poco tempo, 1
ora
• Facili da ada are e riada are
• Economici
• Possono essere prodo i con materiali
facilmente reperibili in qualsiasi
situazione
• Possono esser prodo i in real-time
con l’interlocutore
• A ività divertente che può me ere a
proprio agio l’interlocutore
• Tengono basse le aspe ative di design
e aiutano a rimanere focalizzati sulle
funzionalità e i comportamenti
Contro
• La facilità di cambiamento può
diventare dispersiva e time-
consuming
• Richiedono una buona
immaginazione e un o imo livello di
astrazione da parte
dell’interlocutore
• Il feedback è limitato alla stru ura
di alto livello e al comportamento
del prodo o

62. Prototipi su carta - Esempi

63. Prototipi su carta - Interviste
Componenti per la sessione di test:
• Un facilitatore che spiega la procedura e fornisce dei task
all’utente, deve cercare di far parlare l’intervistato al fine di carpire
il ragionamento che sta dietro ad ogni azione.
• Un membro del team di design che fa il ruolo di computer, cambia
i vari wireframe di fronte all’utente, fondamentale che chi fa il
ruolo del computer rimanga completamente in silenzio.
• L’intervistato può interagire con il prototipo su carta con una
penna per evidenziare dove cliccherebbe o dove effe uerebbe
l’azione di touch/swipe/etc.. nel caso di device mobile

64. Prototipi cliccabili
Aumentano l’esperienza dell’utente e portano ad un
livello superiore il grado di fedeltà.
Richiedono un investimento digitale in cambio di
un flusso di lavoro molto più realistico.
Abbassano il livello di astrazione offrendo insight e
feedback maggiori nel modo con cui l’utente
interagisce con il prodo o.

65. Prototipi cliccabili
Pro
• Possibilità di rappresentare più stati
della stessa interfaccia
• Offrono maggiori “ostacoli” al
completamento dei task principali
• Consentono la valutazione della
reperibilità degli elementi
fondamentali
• Richiedono meno persone per la
sessione di test con l’utente
• Offrono una base di discussione e
condivisione interna al team
Contro
• Molti utenti possono non essere
abbastanza esperti per comprendere
che non si parla di un prodo o finito
• Richiedono maggiore a enzione sul
copy e sulle etiche e
• Richiedono un’introduzione precisa
di cos’è a ivo e di cosa si sta
visualizzando

66. Prototipi cliccabili - Tools
InVision
Proto.io
Mockup.io
POP (import paper designs)
Flinto
Solidify
Balsamiq
Axure

67. Demo

68. Prototipi cliccabili - Interviste
Componenti per la sessione di test:
• Un facilitatore che spiega la procedura e fornisce dei task
all’utente.
• Un intervistato che può interagire con il prototipo.
• Il device che riproduce il tool (desktop, mobile, tablet).
L’intervista può essere più o meno guidata a seconda del
grado di azioni abilitate nel prototipo.

69. Prototipi a
medio-alta
fedeltà

70. “Userete questa tipologia di prototipo per mostrare e
testare le funzionalità concretizzate ad un livello di
interazione, design e contenutistica simile (o
indistinguibile da) all’esperienza del prodo o
finale.“ cit. Lean UX book
Esempi:
Prototipi codati

71. Prototipi codati
Offrono il più alto livello di esperienza simulata
Possono essere utilizzati per qualsiasi tipo di scopo.
Propongono un’esperienza pressoché reale, l’unico
modo per l’utente di capire che sta navigando un
prototipo e non il prodo o finale è entrare in qualche
funzionalità non implementata.
Si distinguono in due tipologie, codati a mano o
guidati da dati reali.

72. Prototipi cliccabili
Pro
• Possibilità di riutilizzo del codice per
la fase di produzione
• Esperienza utente il più realistico
possibile
• Possono essere generati da asset
esistenti
• Possibilità di testare su diversi
viewport e device
contemporaneamente
• Obbliga l’intero team a rimanere
allineato sugli avanzamenti di
proge o
• Abba e il waterfall
• Offre una precisa base di discussione
e condivisione interna al team
Contro
• Il tempo di sviluppo per la
realizzazione può esplodere
• Potrebbe aumentare i diba iti del
team su aspe i poco cruciali per le
domande a cui si vuol dar risposta
• Aggiornamenti e manutenzione
possono portar via tempo
• Tendenza ad o imizzare e
perfezionare il codice o la qualità del
rilascio

73. Demo

74. It’s really hard to design
products by focus groups.
A lot of times, people
don’t know what they
want until you show it to
them.
-Steve Jobs

75. Grazie a tu i
@luscarpa
www.gnvparterns.com