Perfeziona il tuo processo di progettazione UX: una guida alla progettazione di prototipi

Il processo di prototipazione, dalla creazione di semplici wireframe al test di modelli completamente funzionali, è una delle competenze più potenti e potenti che un designer possa padroneggiare. È anche irto di pericoli nei luoghi di lavoro in cui il processo viene saltato al posto della semplice "progettazione di un prototipo" come semplice risultato da consegnare al reparto successivo da costruire. Non importa quanto sia diligente la tua attività con la prototipazione, il processo effettivo può spesso creare o distruggere il tuo prodotto finale.

Come e perché realizzare effettivamente un prototipo è spesso un mistero. Chiedi a molti designer e inclineranno la testa come cuccioli confusi. "Cosa intendi? Fallo e basta,” diranno. E abbastanza vero: sappiamo tutti come creare un prototipo. Semplicemente non sappiamo come lo sappiamo.

Ciò è particolarmente critico considerando come i prototipi siano spesso il risultato più prezioso. Clienti e manager vogliono vedere cosa hai fatto, che si tratti di un sito web o di un prodotto fisico. Vogliono provarlo, ispezionare i vari elementi e comprendere il flusso di lavoro. Vogliono vedere "come funziona".

Costruire un prototipo non è sufficiente; dobbiamo comprendere il processo coinvolto nella costruzione delle bozze iniziali di un prodotto. Questo articolo approfondirà tutto ciò che un designer deve sapere e fare per raggiungere questo obiettivo.

Progettazione di prototipi: a cosa servono i prototipi

Gli esseri umani sono altamente visivi. In effetti, il 30 percento della nostra corteccia cerebrale è dedicato esclusivamente alla vista. Quindi, quando vedi un prototipo, la cosa più importante è che tu lo veda ! Quando il cliente può visualizzarlo e comprendere tutti i processi coinvolti con il prodotto, in particolare le aree di contesa per i test futuri, quel prototipo prende vita.

Allora cos'è un prototipo? Un prototipo è uno strumento per visualizzare un buffet di lavori di progettazione interattiva; in effetti, i prototipi (in quasi tutte le fasi) sono una fusione di tutto il lavoro precedente in un unico pezzo visibile e funzionale. Questa rappresentazione visiva mostra cosa sta facendo il prodotto in un dato momento, quali sono gli elementi interattivi e come funzionerebbe il prodotto nel mondo reale.

Sebbene ci siano molti meccanismi per i vari aspetti della progettazione di prototipi (come la creazione di schizzi), è facile perdere le cose e commettere errori.

Ciò rende il lavoro su come viene costruito un prototipo estremamente prezioso, poiché in molti modi descrive come viene realizzato lo scopo del prodotto. Non perfettamente, e sicuramente non accuratamente la maggior parte delle volte, ma come suggerisce il nome, i prototipi non sono definitivi.

Ci rallentano per accelerare. Dedicando del tempo alla prototipazione delle nostre idee, evitiamo errori costosi come diventare troppo complessi troppo presto e restare fedeli a un'idea debole per troppo tempo.

Tim Brown, CEO e presidente di IDEO

Un modo semplice di pensare ai prototipi è come un meccanismo per dimostrare la funzionalità.

Quella spiegazione pratica di come funziona qualcosa ha una serie di vantaggi di alto valore, tra cui:

• Renderlo reale – Prima che qualsiasi prototipo venga costruito, il prodotto è completamente concettuale! Per un po' va bene, ma alla fine deve diventare qualcosa che gli stakeholder e gli utenti alla fine capiranno e apprezzeranno. Un prototipo è il primo passo per passare dal concettuale al reale.
• Lavorare un problema – A volte, abbiamo una sfida di progettazione senza una soluzione. Come abilità, la prototipazione è un ottimo modo per visualizzare il problema e introdurre rapidamente soluzioni. Se non funziona, butta via il prototipo e riprova.
• Iterare – La prototipazione avviene in più fasi, ma il risultato è lo stesso: far evolvere le tue idee. Dagli schizzi all'hi-fi, ogni nuova iterazione offre una miriade di comportamenti e funzioni da testare. E con più dati, possiamo iterare sia più velocemente che in modo più intelligente.
• Rileva scenari non intenzionali - Una volta che qualcosa è visibile, abbiamo i limiti del nostro prodotto disponibili per lo studio, che fornisce anche un contesto migliore su cosa dovrebbe essere lì... e cosa non dovrebbe!
• Rileva problemi di usabilità – È qui che vivono molti designer: una volta che un prodotto ha un prototipo di qualsiasi tipo, le sfide di usabilità diventano improvvisamente facili da individuare e risolvere.
• Presentazione – I prototipi in qualsiasi fase sono uno standard per la presentazione. Che tu stia testando una versione di una pagina o presentando un prodotto a un cliente, dovrebbe esserci un prototipo in qualche forma. E se non lo è, puoi scommettere che qualcuno chiederà dove si trova e perché non è stato incluso.

Come avviare il processo di prototipazione

Dopo aver ricevuto un documento dei requisiti di 50 pagine da un cliente, guardare una tela bianca può essere scoraggiante. Rivedere i pensieri disorganizzati dalle riunioni dei clienti, gli schizzi sui tovaglioli e le foto sporche della lavagna raramente aiuta.

Poiché i prototipi si basano su molte altre informazioni, è importante raccogliere i dettagli necessari in anticipo per mettere nero su bianco. Considera la seguente lista di controllo e rivedi i dettagli forniti dal tuo cliente o manager:

1. Quali sono gli obiettivi del progetto?

Inizia con il quadro generale. Il prodotto risolve una reale esigenza? Come risolve questo bisogno? Comprendere l' utilità del prodotto è fondamentale per fornire qualsiasi tipo di soluzione praticabile.

2. Quali prodotti della concorrenza utilizzano attualmente le persone?

Un'analisi competitiva forte fornirà un quadro chiaro dello stato del mercato per il tipo di prodotto, oltre a ciò che gli utenti di oggi si aspettano.

3. Chi è il pubblico? Quali sono i loro obiettivi?

Comprendere i dati demografici e le esigenze degli utenti fornisce il contesto necessario per creare prodotti orientati a soddisfare quei particolari tipi di utenti e soddisfare le loro esigenze.

4. Che tipo di prodotto è ea cosa serve (dispositivo)?

Con così tante tecnologie e soluzioni diverse, i designer UX devono sapere come verrà utilizzato il prodotto (app Web, sito Web reattivo, app mobile, ecc.), Su quale dispositivo/i e come coesisteranno (se non del tutto) versioni diverse ).

5. Ci sono precedenti visivi da seguire?

Se il prodotto esiste già e il progetto prevede miglioramenti o riprogettazione, è possibile che esistano alcuni requisiti in considerazione del comportamento attuale dell'utente con il prodotto.

6. Quali sono i risultati finali?

Stabilire le aspettative sui risultati finali e sul processo è fondamentale per la pianificazione e il flusso di lavoro. Ogni progetto è diverso, ma se i risultati finali sono ben definiti, il resto del processo di progettazione dell'esperienza utente ha maggiori possibilità di procedere senza intoppi.

Disegna i tuoi prototipi

Con i nostri dati disponibili e organizzati, il passo successivo è iniziare a disegnare. Molti designer avranno già un'idea per il layout, la struttura o anche dove appartengono elementi specifici del design visivo prima ancora di estrarla. Va bene, ma lo scopo degli schizzi iniziali è esplorare lo spazio disponibile per evidenziare ciò che è possibile e, soprattutto, ciò che non lo è.

Raccogli i tuoi strumenti di scrittura preferiti, che si tratti di carta e matita o lavagna e pennarello. Il processo di sketch è simile a quello di uno scrittore che scrive liberamente o di un musicista che strimpella; disegna ciò che senti in base a tutto il lavoro che hai svolto in anticipo e considerando i pezzi seguenti:

01 | Flussi utente: seguire l'identificazione dei flussi utente. Guarda come gli utenti raggiungono i loro obiettivi e come interagiscono all'interno del sistema.

02 | Entità informative: ogni flusso utente mostrerà alcuni input e output dell'utente. Identifica cosa sono, come si relazionano con il comportamento e le aspettative degli utenti, con quali interazioni sono coinvolti e come funzionano.

03 | Primi schizzi – Dopo aver avuto un'idea di chi utilizzerà il sistema, cosa faranno e con cosa, è il momento di vedere come. Disegna i tuoi flussi utente: non è ancora necessario creare il layout, basta risolvere la funzionalità.

04 | Disegna una struttura rudimentale: dopo aver disegnato i flussi utente, avrai un'idea migliore del miglior layout per il prodotto. Ciò includerà contenuti (testo, foto, video, ecc.) che verranno visualizzati come riquadri di base o scarabocchi. Se scritti a mano, non si adattano alle dimensioni, quindi tutta la struttura e il contenuto sono solo per la visualizzazione, non per l'uso effettivo.

Un ulteriore suggerimento è quello di utilizzare blocchi per schizzi, carta appositamente formulata o strumenti per rendere più chiari i wireframe durante lo schizzo. Forniscono il layout di base per il viewport in questione, sono abbastanza economici e, con lo stencil appropriato, rendono anche gli schizzi più puliti. Questi sono estremamente utili se sei un cassetto disordinato poiché forniscono le proporzioni e le griglie corrette per smartphone e browser web.

Questo processo può continuare per tutto il tempo che desideri, ma è il momento di passare al passaggio successivo una volta completato un flusso utente e il processo di completamento di tale flusso è chiaro. È una buona idea rimbalzare avanti e indietro tra lo schizzo e la costruzione di wireframe digitali, principalmente per mantenere il processo creativo. Man mano che avanzi attraverso più flussi, il prodotto sembrerà più concreto e ti allontanerai naturalmente dallo schizzo.

Passaggio al digitale (prototipi da bassa ad alta fedeltà)

Una volta che ci sono abbastanza schizzi completi per andare avanti, è il momento di digitalizzarli. Che si tratti di Adobe XD o Sketch, Framer o Flinto o qualcos'altro, la creazione di versioni digitali degli schizzi è il primo passo per formalizzarli. L'attenzione si sposta quindi dall'aggiunta creativa degli elementi necessari all'organizzazione delle risorse e della struttura all'interno dei progetti.

Man mano che i prototipi diventano più pratici e gli elementi più strutturati, il prodotto prende forma. Quando si passa ai prototipi digitali, la fedeltà è determinata dal livello di interattività , design visivo e contenuto . Un prototipo può essere a bassa o alta fedeltà individualmente su queste aree, sebbene gli hi-fi incorporino tutti e tre al livello più alto.

Considera la gerarchia per quanto riguarda il raggiungimento delle esigenze degli utenti. Ogni schizzo si collega a un flusso utente e a una storia e gli schizzi sono un primo passo verso la determinazione del layout e della struttura di un prodotto. Gli strumenti digitali odierni possono velocizzare molto di questo, ad esempio, impostando elementi master che si applicano a tutte le pagine e modelli per i tipi di pagina.

Con ogni nuovo filo e iterazione, poni due domande principali: questa pagina tiene conto del suo scopo nel flusso di utenti più ampio? E l'interazione ha senso (nel senso che l'utente ha capito come completare l'azione)? Ci poniamo spesso queste domande. Più facciamo, più è probabile che ogni nuova iterazione avvicini i prototipi alla bozza finale.

I prototipi digitali sono anche molto più facili da testare poiché non solo sono più leggibili ma anche più veloci da riprodurre e ripetere in massa. È qui che gli strumenti di prototipazione UX come InVision e Proto.io sono molto utili per creare prototipi cliccabili. Quando è cliccabile, diventa facile testare l'usabilità di vari aspetti, dai singoli pulsanti a interi flussi.

La prototipazione cliccabile è diventata particolarmente popolare negli ultimi anni grazie alla facilità d'uso di programmi come InVision. È ancora più prezioso per i dispositivi mobili, dove ora tutti i principali strumenti di prototipazione forniscono una strada per vedere o testare i cavi mobili direttamente su un dispositivo di prova.

Con alcune conoscenze ingegneristiche o strumenti più potenti come Justinmind o Axure, è anche possibile costruire prototipi funzionali, che sono interattivi oltre al semplice clic. Gli utenti possono testare cose come la compilazione di moduli, l'esecuzione di attività semplici o complesse e l'utilizzo effettivo dell'applicazione come è concepita per essere utilizzata, il tutto senza crearla effettivamente. I progettisti con una formazione in progettazione dell'interazione uomo-computer (HCI), inclusi molti designer Toptal, costruiscono e testano regolarmente con prototipi funzionali.

I prototipi interattivi sono ottimi per testare animazioni, operazioni utente all'interno dell'app e funzioni di livello superiore che a volte non possono essere testate senza un'azione funzionale.

Prototipo con scopo

La bellezza e la sfida della prototipazione sono in corso. Possiamo dire lo stesso di quasi tutto, ma i prototipi iniziano e finiscono con uno scopo. Senza sapere perché un determinato schermo deve comportarsi in un certo modo, come dovrebbe funzionare una funzionalità o se gli utenti necessitano o meno di un funnel, il prototipo realizzato non viene sviluppato; viene disegnato e poi creato ad hoc.

Eppure, anche se ogni singolo wireframe costruito è fatto in modo così intelligente, con le domande poste lungo il percorso, con ogni storia dell'utente correlata presa in considerazione e l'architettura dell'informazione usata come mappa, è comunque possibile perdere qualcosa. Questa è la sfida della progettazione di prototipi: clienti, manager e persino designer dimenticano che i prototipi non sono definitivi . Sono solo una bozza, un'iterazione fino alla prossima versione. Fa tutto parte del processo di progettazione dell'UX.

Quindi, quando costruisci il tuo prossimo set di prototipi, ricorda di porre almeno una domanda importantissima: questo produce il risultato desiderato? In caso contrario, è un'altra opportunità per redigere una nuova versione.

• • •

Ulteriori letture sul blog di Toptal Design:

• eCommerce UX: una panoramica delle migliori pratiche (con infografica)
• L'importanza del design incentrato sull'uomo nel design del prodotto
• I migliori portfolio di designer UX: casi di studio ed esempi stimolanti
• Principi euristici per interfacce mobili
• Design anticipatorio: come creare esperienze utente magiche