Design Better And Faster With Rapid Prototyping

• About The Author
• Ulteriori letture su SmashingMag:
• Il processo di prototipazione rapida
• Scoping A Prototype
• Cosa deve essere prototipato?
• Quanto dovrebbe essere prototipato?
• Trovare la storia
• Pianifica le tue iterazioni
• Scegliere la fedeltà appropriata
• Lo spettro della prototipazione
• Bassa fedeltà
• Medium Fidelity
• High Fidelity
• Selezionare un livello di fedeltà
• Selezionare gli strumenti
• Dos And Don’ts
• Fare…
• Non…
• Altre risorse

About The Author

Lyndon Cerejo è un user experience strategist certificato nella pratica Rapid Design & Visualization di Capgemini, con un curriculum di successo …More aboutLyndon↬

Il vecchio adagio, “un’immagine parla più di mille parole” cattura ciò che è la prototipazione dell’interfaccia utente: usare immagini per descrivere migliaia di parole di specifiche di design e sviluppo che dettagliano come un sistema dovrebbe comportarsi e apparire. In un approccio iterativo alla progettazione dell’interfaccia utente, la prototipazione rapida è il processo di simulazione rapida dello stato futuro di un sistema, sia esso un sito web o un’applicazione, e di convalida con un team più ampio di utenti, stakeholder, sviluppatori e designer.

Fare questo rapidamente e in modo iterativo genera feedback presto e spesso nel processo, migliorando il design finale e riducendo la necessità di modifiche durante lo sviluppo.

Ulteriori letture su SmashingMag:

• Ottimizzare il tuo design per il test rapido dei prototipi
• Scegliere il giusto strumento di prototipazione
• Content Prototyping in Responsive Web Design
• Risorgere dai prototipi di interfaccia utente (senza creare zombie)

I prototipi vanno da schizzi di carta grezza a simulazioni interattive che assomigliano al prodotto finale. Le chiavi per una prototipazione rapida di successo sono la revisione rapida basata sul feedback e l’uso dell’approccio di prototipazione appropriato. La prototipazione rapida aiuta i team a sperimentare approcci e idee multiple, facilita la discussione attraverso le immagini invece delle parole, assicura che tutti condividano una comprensione comune, e riduce il rischio ed evita i requisiti mancati, portando ad un design migliore più velocemente.

Il processo di prototipazione rapida

La prototipazione rapida comporta iterazioni multiple di un processo a tre fasi:

1. Prototipo Convertire la descrizione degli utenti della soluzione in mock-up, tenendo conto degli standard e delle best practice della user experience.
2. Revisione Condividere il prototipo con gli utenti e valutare se soddisfa i loro bisogni e le loro aspettative.
3. Perfezionamento Sulla base del feedback, identificare le aree che hanno bisogno di essere perfezionate o ulteriormente definite e chiarite.

Il prototipo di solito inizia in piccolo, con poche aree chiave prese in giro, e cresce in ampiezza e profondità in più iterazioni man mano che le aree richieste vengono costruite, finché il prototipo viene completato e consegnato allo sviluppo del prodotto finale. La rapidità del processo è più evidente nelle iterazioni, che vanno da cambiamenti in tempo reale a cicli di iterazione di pochi giorni, a seconda della portata del prototipo.

Scoping A Prototype

La parola prototipo spesso evoca immagini di una versione codificata e completamente funzionante di un’applicazione o interfaccia. I prototipi rapidi non sono destinati ad evolversi in soluzioni completamente funzionali, ma sono intesi per aiutare gli utenti a visualizzare e creare l’esperienza utente del prodotto finale. Con questo in mente, quando si definisce l’ambito di un prototipo, decidere su alcune questioni chiave prima di iniziare qualsiasi lavoro di prototipazione.

Cosa deve essere prototipato?

I buoni candidati per la prototipazione includono interazioni complesse, nuove funzionalità e cambiamenti nel flusso di lavoro, nella tecnologia o nel design. Per esempio, la prototipazione dei risultati di ricerca è utile quando ci si vuole discostare significativamente dall’esperienza di ricerca standard; per esempio, per introdurre la ricerca sfaccettata o la possibilità di vedere l’anteprima di un documento senza lasciare i risultati della ricerca.

Quanto dovrebbe essere prototipato?

Una buona regola generale è quella di concentrarsi sul 20% della funzionalità che sarà usata l’80% del tempo; cioè la funzionalità chiave che sarà usata più spesso. Ricordate, lo scopo della prototipazione rapida è di mostrare come qualcosa funzionerà o, in fasi successive, come sarà il design, senza prototipare l’intero prodotto.

Trovare la storia

Dopo aver identificato le aree da prototipare, intrecciatele in uno o più scenari: identificate i percorsi coerenti attraverso l’esperienza utente che il prototipo simula. Per un sito web che vende scarpe, uno scenario potrebbe essere “Joe il noioso” che compra le stesse identiche scarpe da corsa Nike che ha comprato sei mesi fa, mentre un altro scenario potrebbe essere “Sam l’esploratore” che sfoglia il numero 10 per trovare un paio di Oxford e un paio di mocassini che gli interessano.

Pianifica le tue iterazioni

L’intero prototipo di solito non è costruito in una singola iterazione ma piuttosto pezzo per pezzo. Un buon approccio è quello di iniziare a prototipare in modo ampio e diffuso e poi immergersi in profondità in aree selezionate della soluzione. Per un sito web, questo significherebbe costruire la home page e le landing page per le sezioni principali nella prima iterazione (a volte indicato come un prototipo orizzontale) e poi rivedere e rivedere quel quadro. Le iterazioni successive potrebbero approfondire una o più sezioni del sito web (un prototipo verticale); per un sito web di download di media, potrebbe trattarsi dei passi che un utente farebbe per trovare un video e scaricarlo, o come gestirebbe i media nella sua libreria online.

Scegliere la fedeltà appropriata

La fedeltà si riferisce a quanto strettamente un prototipo assomiglia alla soluzione finale. Ci sono molteplici dimensioni di fedeltà, e i prototipi possono trovarsi ovunque nello spettro di ciascuna di queste dimensioni. A seconda della fase del processo di progettazione e degli obiettivi del prototipo, selezionare la fedeltà appropriata per ciascuno dei seguenti aspetti:

• Fedeltà visiva (abbozzata ↔ stilizzata) L’aspetto e la sensazione sono la dimensione più evidente della fedeltà di un prototipo e, se non selezionati correttamente, possono ostacolare le revisioni del prototipo. Andare troppo presto in hi-fi e gli utenti si concentreranno sul design visivo, che non è appropriato nelle fasi iniziali. Da un punto di vista visivo, i prototipi non devono essere perfetti al pixel ma dovrebbero essere proporzionali; per esempio, se l’area di navigazione sinistra deve occupare un quinto di uno schermo da 1024 pixel, non è necessario che sia esattamente larga 204 pixel, purché sia rappresentata proporzionalmente nel prototipo. Man mano che la prototipazione progredisce nel ciclo di progettazione, aumentare la fedeltà visiva secondo le necessità introducendo elementi di stile, colore, branding e grafica.
• Fedeltà funzionale (statica ↔ interattiva) Il prototipo rivela come la soluzione funzionerà (statica) o sembra essere completamente funzionale e rispondere all’input dell’utente (interattiva)? Questa dimensione distrae meno gli utenti, ma l’aggiunta di interattività nelle iterazioni successive aumenta la fedeltà funzionale e permette di utilizzare il prototipo per i test di usabilità e per la formazione e la comunicazione.
• Fedeltà del contenuto (lorem ipsum ↔ contenuto reale) Un’altra dimensione che spesso distrae gli utenti è il contenuto che viene visualizzato nel prototipo. Linee a ghirigori e testo fittizio come il lorem ipsum sono utili da evitare nelle prime fasi della prototipazione. Ma man mano che il prototipo viene raffinato, valutate la necessità di sostituire il testo fittizio con un contenuto reale per avere un’idea di come esso influenzi il design complessivo.

Lo spettro della prototipazione

Bassa fedeltà

Il modo più veloce per iniziare la prototipazione è anche il più semplice: mettere la penna (cil) sulla carta. Lo schizzo su carta è un approccio a bassa fedeltà che chiunque può fare; non sono richiesti strumenti speciali o esperienza. Più spesso usato durante le prime fasi di un ciclo di design, lo sketch è un modo veloce per creare mock-up grezzi di approcci e concetti di design e per ottenere un feedback dagli utenti. La prototipazione su carta è ideale durante il brainstorming e la concettualizzazione e può essere fatta da soli in un cubicolo con uno sketchbook o in un gruppo con una lavagna a fogli mobili (o bianca) e pennarelli.

Situato all’estremità a bassa fedeltà dello spettro della prototipazione, i prototipi di carta sono statici e solitamente hanno una bassa fedeltà visiva e di contenuto. Questo costringe gli utenti a concentrarsi su come useranno il sistema invece di come sarà, e rende i designer più aperti ai cambiamenti basati sul feedback degli utenti.

La prototipazione a bassa fedeltà si presta alla prototipazione rapida. Non ha una curva di apprendimento ma ti permette di fare cambiamenti facilmente e rapidamente.

Medium Fidelity

Quando iniziamo ad usare strumenti basati su computer come Visio e Omnigraffle per prototipare, la fedeltà aumenta sulla maggior parte dei fronti, producendo prototipi a media fedeltà. Wireframes, flussi di attività e scenari che sono creati con questi strumenti richiedono più tempo e sforzo ma sembrano più formali e raffinati. Mentre gli elementi visivi di branding, colori e stile possono essere introdotti, i prototipatori spesso ne stanno lontani, concentrandosi invece sulla dimostrazione del comportamento dell’applicazione. L’interattività può essere simulata collegando pagine o schermate, ma la fedeltà funzionale qui è media al massimo. Questi prototipi sono più adatti a determinare se i bisogni dell’utente sono soddisfatti e se l’esperienza dell’utente è ottimale.

Ci sono due ragioni per cui si potrebbe intenzionalmente fare in modo che un prototipo a media fedeltà non sembri un prototipo a media fedeltà:

• La prima è che, usando Balsamiq o stencil Visio abbozzati per far sembrare il prototipo a bassa fedeltà, si costringe gli utenti a vederlo come una bozza o un lavoro in corso, piuttosto che un prodotto rifinito e finito.
• Il secondo è che, dando al prototipo un’alta fedeltà visiva (per esempio, in un layout completo fatto in Photoshop), si porta l’utente a concentrarsi sul design visivo e sull’aspetto, inclusi colore, font, layout, logo e immagini.

La velocità della prototipazione a media fedeltà si ottiene con modelli, stencil e widget ed elementi riutilizzabili. Diventa più veloce man mano che diventi più abile con i tuoi strumenti di scelta.

High Fidelity

I prototipi ad alta fedeltà sono i più realistici e sono spesso scambiati per il prodotto finale, ma di solito richiedono molto tempo. Qualche anno fa, l’unico modo per creare prototipi ad alta fedeltà era quello di codificare usando un linguaggio di programmazione, il che spesso richiedeva che il designer e lo sviluppatore lavorassero insieme. Oggi, tuttavia, gli strumenti di simulazione delle applicazioni permettono agli utenti non tecnici di trascinare e rilasciare i widget dell’interfaccia utente per creare prototipi ad alta fedeltà che simulano la funzionalità del prodotto finale, anche per la logica di business e le interazioni con il database. Axure e iRise sono alcuni esempi di strumenti di simulazione di applicazioni che possono essere usati per creare prototipi ad alta fedeltà.

Questi prototipi sono appropriati quando è richiesta un’alta fedeltà visiva e funzionale; per esempio, quando si introduce una nuova tecnologia (per esempio, quando si passa da un’applicazione mainframe – sì, esistono ancora! La maggior parte di questi prototipi non possono essere convertiti in codice utilizzabile, ma servono come un eccellente riferimento per gli sviluppatori. Sono anche utili per condurre test di usabilità e formare gli utenti.

La prototipazione ad alta fedeltà è relativamente rapida, considerando il livello di interattività e fedeltà coinvolto, e può essere accelerata usando strumenti di simulazione drag-and-drop. Inoltre, alcuni di questi strumenti facilitano la raccolta del feedback degli utenti e la documentazione dei requisiti, accelerando ulteriormente il processo di progettazione. Anche se non è necessario imparare un nuovo linguaggio di programmazione, questi strumenti hanno una curva di apprendimento.

Selezionare un livello di fedeltà

Nella scelta della fedeltà del prototipo, non esiste un approccio corretto. La maggior parte dei progetti di nuovi prodotti è meglio iniziare con degli schizzi, per poi passare a prototipi di media o alta fedeltà, a seconda della complessità del sistema e dei requisiti delle dimensioni di fedeltà.

Nel lavorare con un particolare cliente dell’industria farmaceutica, siamo passati da lavagne bianche a prototipi interattivi che avevano un’alta fedeltà funzionale e di contenuto ma una bassa fedeltà visiva. Si preoccupavano meno del look and feel che di aderire alle linee guida aziendali.

Per un altro cliente, questo nella vendita al dettaglio, il nostro prototipo interattivo doveva avere un’alta fedeltà visiva e funzionale. La fedeltà del contenuto non aveva importanza perché avrebbero riutilizzato il contenuto e avevano già familiarità con esso. Per loro, l’aspetto e l’esperienza interattiva erano più importanti perché questa era la loro prima implementazione di SharePoint e volevano che il portale avesse un aspetto “non SharePointy”!

Selezionare gli strumenti

A seconda del tuo approccio, hai una grande varietà di strumenti da scegliere. Dan Harrelson ha compilato una lista di strumenti di prototipazione popolari sul blog di Adaptive Path.

Ogni strumento ha le sue caratteristiche e i suoi punti di forza. In base alle vostre esigenze e ai requisiti dei progetti su cui lavorate, valutate quale strumento sarebbe più appropriato. Ecco alcune domande da considerare quando si valutano gli strumenti:

• Quanto è facile imparare e usare lo strumento?
• È flessibile per supportare prototipi per applicazioni web, pacchettizzate e personalizzate, così come applicazioni desktop e mobili?
• C’è un archivio di stencil riutilizzabili, modelli o widget disponibili?
• Quanto è facile condividere il prototipo con altri per la revisione? Il loro feedback può essere catturato usando lo strumento?
• Quanto è facile fare cambiamenti al volo o incorporare feedback?
• Ha delle caratteristiche di collaborazione, come permettere a più persone di lavorarci contemporaneamente?
• Quali sono i termini di licenza e i costi?

Dos And Don’ts

Per iniziare, ecco alcuni punti sulla prototipazione rapida efficace da tenere a mente:

Fare…

• Lavorare in modo collaborativo con gli utenti, il business e gli stakeholder IT durante la prototipazione rapida. Oltre a dare un feedback prezioso, guadagnano anche un senso di proprietà del prodotto finale.
• Evitare il “prototipo strisciante” impostando le aspettative per il processo, incluse quelle che riguardano lo scopo, la fedeltà, lo scopo e la durata. Ricorda a tutti, compreso te stesso, che la prototipazione rapida è un mezzo per raggiungere un fine, non un fine in sé.
• Quando si creano prototipi e simulazioni interattive ad alta fedeltà, inserisci dei ritardi realistici (per esempio, per l’aggiornamento dello schermo o il passaggio attraverso le fasi di una transazione), in modo che gli utenti non si aspettino tempi di risposta istantanei dal prodotto finale.
• Riutilizzare, riutilizzare, riutilizzare. Per la prototipazione basata sul computer, questo significa salvare modelli, stencil, modelli e widget riutilizzabili per progetti futuri.
• Più importante, iniziate ogni sessione di revisione del prototipo con la dichiarazione che questo è solo un prototipo, un mock-up, non la soluzione reale. Questo ricorda agli utenti che si tratta di un lavoro in corso, incoraggia il feedback e, nel caso di prototipi ad alta fedeltà, impedisce agli utenti di scambiarlo per una soluzione funzionante.

Non…

• Non prototipare caratteristiche o funzionalità che non possono essere implementate – spesso un problema con le implementazioni dei pacchetti software. Quando sei in dubbio, conferma con gli sviluppatori prima di iniziare.
• Non prendere ogni cambiamento o richiesta che esce da una revisione del prototipo come un nuovo requisito. La prototipazione rapida aiuta a catturare i requisiti mancati, ma questi nuovi requisiti dovrebbero essere valutati attentamente. Alcuni possono essere implementati, mentre altri vengono rimandati ad una release futura.
• Non iniziare le sessioni di revisione del prototipo senza chiare linee guida per il feedback. Siate molto specifici sul tipo di feedback che state cercando. (I passi sono disposti in modo logico? La navigazione è chiara e intuitiva?) In caso contrario, siate preparati a: “Non mi piace il blu dell’intestazione”, o “Non possiamo usare questo carattere?” o “Puoi farlo più grande, più audace, in rosso e lampeggiante?”
• Non siate perfezionisti. Nella maggior parte dei casi, la prototipazione rapida non deve essere perfetta al 100%, solo abbastanza buona per dare a tutti una comprensione comune.
• Non prototipare tutto. La maggior parte delle volte, non dovrebbe essere necessario.

Altre risorse

• Se hai bisogno di una spinta per iniziare a fare sketch, prova il libro di Dan Roam The Back of the Napkin.
• Scopri di più sulla prototipazione su carta nel libro Paper Prototyping di Carolyn Snyder: The Fast and Easy Way to Design and Refine User Interfaces.
• Sketchboarding, una tecnica per esplorare e raffinare i concetti.
• Hai bisogno di contenuti a bassa fedeltà? Genera un testo Lorem Ipsum per il tuo prototipo.
• Vuoi far sembrare il tuo schizzo su carta ad alta fedeltà? Prova questi stencil per Web, iPad e iPhone.
• Strumenti di schizzo e prototipazione per applicazioni iPhone
• Semplice schizzo e prototipazione in Firefox con l’add-on Pencil.
• Modelli PDF stampabili gratuiti per lo sketch, il wireframing e l’annotazione
• 50 kit gratuiti per UI e Web Design Wireframing, risorse e file sorgente

(al)