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

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

@luscarpa

Che cos’è un prototipo

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

Una primissima versione di un’idea

Una primissima versione di un’idea

testabile{

Perché?

Per rispondere alle domande

Per rispondere alle domande

e generarne di nuove

Testare le assunzioni

Comparare alternative

Ridurre i rischi

Condividere le vostre idee con gli altri

Condividere le vostre idee con gli altri

Team

Stakeholders Users

Angels

Investors Clients

Boss

Quando?

ideare

prototipare

testare / validare

condividi

ideare

prototipare

testare / validare

condividi

Prima possibile!

Sketch“L’intento dello sketching è di separare il design dal processo di creazione”

• veloce• tempestivo• economico• monouso• esplorativo

• non dettagliato• opportuno• divergente• comunicativo

Caratteristiche

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

Elaborazionedelle idee

Riduzione delledell’idee

Laseau’s Funnel

Processo di design

Prototipo

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.

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.

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.

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.

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.

Pianifica per come deve FUNZIONARE, NON per come deve sembrare

Sketch vs Prototipo

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

Esempio pratico

LA FUSIONE

Idea

Steps 1/7

Steps 2/7

Steps 3/7

Steps 4/7

Steps 5/7

Steps 6/7

Steps 7/7

Risultato

Visual Design 1/3

Visual Design 2/3

Visual Design 3/3

Prototipo

Predisporsi al fallimento

Reiterare#FAIL

Reiterare#FAIL

Reiterare#WIN

Cura dei de!agli

Risultato finale

Qual è il grado di fedeltà?

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

Bassa fedeltà Alta fedeltàvs

Bassa fedeltà Alta fedeltàvs

Veloce Lento

{ {

Bassa fedeltà Alta fedeltàvs

Veloce Lento

{ {

Prime iterazioni di esplorazione

Tem

po

Fedeltà

SketchesWireframes

Prototipi

Design

Ideazione Validazioneconcetti User Experience

Iterazioni di avanzamento

Tem

po

Fedeltà

Sketches

Prototipi

Design

Ideazione Validazioneconcetti User Experience

Prototipi a bassa fedeltà

“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

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.

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

Prototipi su carta - Esempi

Prototipi su carta - IntervisteComponenti 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

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.

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

Prototipi cliccabili - Tools

InVision

Proto.io

Mockup.io

POP (import paper designs)

Flinto

Solidify

Balsamiq

Axure

Demo

Prototipi cliccabili - IntervisteComponenti 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.

Prototipi a medio-alta fedeltà

“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

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.

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

Demo

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

Grazie a tu!i

@luscarpa

www.gnvparterns.com