Upload
others
View
2
Download
0
Embed Size (px)
Citation preview
prototipazione
I prototipi
Un prototipo è una simulazione del prodotto finale. Obiettivo del prototipo è testare il prodotto
prima della sua produzione vera e propria al fine di individuare e
risolvere problemi, e migliorarne la funzionalità.
PROTOTIPO
Interactivity Representation
Precision/FidelityEvolution
PROTOTIPO
InteractivityGrado di funzionalità
esplorabili
RepresentationModo in cui il prototipo prende forma (carta, digitale…)
Precision/FidelityLook&fill
EvolutionCiclo di vita del prototipo
PROCESSO DINAMICO
Strumento di verifica(cosa non va?)
Processo generativo(nuove idee)Immediato
(più di qualsiasi documento)
COSA NONÈ IL PROTOTIPO
Non è il prodotto finitoNon è un prodotto statico:
deve essere interattivo
Come prototipare: strumenti
Wireframe
Sono la base per lo ui designer per la costruzione dei visual
Sono uno strumento di verifica per gli altri stakeholder
Alcune lacune emergono solo quando si passa ad una
rappresentazione a struttura
Come si realizzano?Carta penna (colla, postit, varie
ed eventuali)Software
Framework html+css
WireflowWireframe+Flowchart
Tipologie di prototipazione
Svantaggi
non è realistico e richiede agli utenti uno sforzo di immaginazione
gestione delle modifichemacchinosa (forbici/gomma/colla etc..) e non propagabile da uno sketch all’altro
Vantaggi
Immediato e non necessita skill tecniche
Ideale nelle prime fasi del progetto
Economico
Team-building
Le annotazioni possono essere fatte
direttamente sul prototipo
SimulazioneSimulazione
completamente offline (richiede un assistente)
Simulazione onlineSi fotografano i wireframe e si collegano tra
loro attraverso un software per gestire i flussi.
POPAPP
Mockupè un modello “in scala” e può essere utilizzato per valutare
il design e non solo l’interazione e la disposizione
degli elementi
Strumenti per il visual design
Ide graficiTool Online
Toolkit & Frameworknon reinventate la ruota
Simulazione
Simulazione completamente offline
(richiede un assistente)
Simulazione onlineInvision o tool simili
Html Prototypingcostruire dei prototipi utilizzando html+css(ed eventualmente
javascript)
Simulazione e responsive realistici
Toolkit & Frameworknon reinventate la ruota
Strumenti visuali che generano codice
(esempi)Webflow
Pingendo (bootstrap)
Interfaccia drag&drop
Native Prototyping
app/web app vere e proprieper poter testare
“nativamente” il prototipo su diversi device reali.
La prototipazione nativa consente di poter interagire con i dispositivi e con tutti i loro sensori e dispositivi
(fotocamera, giroscopio, gps, microfono, etc…), ed è fondamentale quando questi sono alla base della costruzione dell’esperienza che si
sta progettando.
Il primo passoConoscere i flussi
Risultati di ricerca
sugli utentiEs. Personas
Scenari, mappe, ia
Risultati dell’analisi dei requisiti e funzionalità
Flowchart
documento che serve a tracciare le interazioni tra
utente e app/sitoweb.
La sua caratteristica è la sequenzialità step by step
Possono essere redatti congiuntamente a personae/scenario
Ancore:punto di partenza e di arrivo
Steps:le azioni che l’utente compie per proseguire nel percorso
Paths:le linee che compongono il percorso e che identificano la scelta
Decision Point:Rappresentano le scelte che l’utentePuò incontrare nel suo percorso
SWIM LANEle aree in cui vengono racchiuse un gruppo di azioni
Tratto
da -
Comu
nica
re la
usere
xperie
nce
Nell’esempio Anna, la nostra personae, vuole prenotare il proprio abbonamento a teatro tramite telefono mobile (trigger = elemento scatenante)
Tratto
da -
Comu
nica
re la
usere
xperie
nce
Il primo punto decisionale (decision point) lo incontra nella scelta se fare uno o più abbonamenti.
Tratto
da -
Comu
nica
re la
usere
xperie
nce
Scegliendo l’opzione di attivare un solo abbonamento Anna si trova a dover scrivere sul proprio telefonino una sequenza numerica: il primo numero indica la località, il secondo il numero della carta arrivata per posta e il terzo il tipo di abbonamento che si vuole acquistare
Tratto
da -
Comu
nica
re la
usere
xperie
nce
Viene inviato l’SMS con il codice numerico
Tratto
da -
Comu
nica
re la
usere
xperie
nce
secondo decision point:il sistema centrale riceve l’SMS di Anna e stabilisce la cifra da pagare in base alla data di invio (prima o dopo il 30 ottobre)
Tratto
da -
Comu
nica
re la
usere
xperie
nce
Anna riceve un sms di conferma con l’importo che le verrà prelevato dalla scheda telefonica.
Il processo si conclude positivamente.”
Tratto
da -
Comu
nica
re la
usere
xperie
nce