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