Morte al Wireframe. Direttamente all'alta fedeltà!

Il design UX è una disciplina affascinante. Per farlo bene, i praticanti devono essere esperti in un'ampia varietà di argomenti e abilità. Per mettere in pratica la metodologia di progettazione incentrata sull'utente e creare soluzioni innovative e facili da usare per le sfide quotidiane della progettazione dei prodotti, l'abilità e la comprensione di un professionista dell'esperienza utente coinvolge tutto, dal disegno di base alla progettazione narrativa/del viaggio alla psicologia cognitiva.

Esiste un'ampia varietà di strumenti utilizzati, artefatti generati e risultati scoperti nel processo di progettazione UX/UI e vengono acquisiti in un assortimento di documenti o persino in un prototipo. Il nostro manufatto più riconoscibile, pane e burro, è il buon vecchio wireframe.

I wireframe, in genere scheletri monocromatici di progetti creati per una rapida valutazione, sono fantastici. Ci consentono di tradurre l'input di molte parti non correlate in un documento che tutti possono rivedere. Molte diverse funzioni di lavoro valutano i wireframe; analisti aziendali, project manager, dirigenti di marketing, designer e sviluppatori di ogni tipo, vari altri fornitori e fornitori di servizi, anche il pubblico di destinazione durante il test del prodotto. Il wireframe consente a tutti di vedere come verranno affrontate le proprie esigenze individuali e offre all'intero team la possibilità di risolvere tutti i nodi prima che si verifichino operazioni di sollevamento pesanti.

Ci sono pro e contro, ma in alcuni casi ha senso saltare del tutto la fase di wireframing. È possibile risparmiare molto tempo gestendo l'esperienza utente e il design visivo a livello di alta fedeltà subito dopo la scoperta o durante la preparazione per la prototipazione. Ciò darebbe ad altri l'opportunità di valutare sia la funzionalità che l'aspetto del prodotto allo stesso tempo, dai partecipanti ai test degli utenti a clienti e colleghi.

Scopriamo perché a volte i wireframe possono essere problematici, quando ha senso saltarli e come adattare un processo senza wireframe a un flusso di lavoro.

Il problema con i wireframe

Che si tratti di un ambiente a cascata o agile, il tipico processo di progettazione prevede fasi di ricerca, definizione, ideazione, prototipazione, test e distribuzione, nonché molti punti di contatto per la revisione con le parti interessate lungo il percorso.

Diamo un'occhiata al processo di progettazione per esempi in cui il design wireframe può essere un collo di bottiglia:

Motivo 1: i clienti non capiscono cosa stanno guardando

Il processo di progettazione in genere inizia con una sorta di ricerca sul problema. Ricerche a tavolino, interviste agli stakeholder e interviste agli utenti sono solo alcune delle attività che possono essere intraprese per ottenere una comprensione più profonda. Dopo la ricerca, il team di progettazione inizia a valutare una serie di idee e concetti per trovare la soluzione migliore.

Quando un concetto è più approfondito, il team di progettazione condividerà spesso una serie di wireframe con il cliente durante una sessione di revisione.

Il problema è che i wireframe sono molto astratti.

Descrivono qualcosa che è come la cosa, ma non la cosa reale che verrà costruita. In questa fase, i wireframe conterrebbero immagini segnaposto e tutti i tipi di TK (a venire), FPO (solo per il posizionamento) e TBD (da decidere) come nell'esempio seguente.

Probabilmente ci sono dettagli su funzionalità, requisiti aziendali e gestione degli errori che verranno indicati in un vasto elenco di annotazioni. In genere, non c'è mai abbastanza tempo per esaminarli in dettaglio, quindi il cliente sarà lasciato a leggerli da solo.

Durante le revisioni wireframe, chiediamo ai nostri clienti di concentrarsi sul concetto descritto e di valutare se sembra risolvere o meno i problemi aziendali e degli utenti. Tuttavia, riceviamo ancora domande su cose che, a noi, non sembrano essere correlate. I clienti vogliono sapere se il wireframe è la "copia finale" o se possono vedere esempi delle foto da visualizzare nell'immagine dell'eroe o un'altra domanda su qualcosa che sarà gestito nel design visivo, nella prototipazione dell'interfaccia utente o nello sviluppo.

I wireframe potrebbero essere troppo astratti per essere valutati efficacemente dai clienti e persino dalle parti interessate interne. I wireframe raccontano alle persone come sarà un progetto quando sarà finito, ma devono ancora lavorare molto mentalmente per farlo combaciare nelle loro teste. I nostri clienti possono essere o meno pensatori visivi e potrebbe essere troppo aspettarsi che guardino un progetto e immaginino un prodotto o un sito di successo.

Ci sono stati alcuni clienti che hanno richiesto specificamente di rivedere i progetti visivi annotati perché è molto più facile per loro collegare i punti, avere una discussione ponderata e fornire un feedback ben ponderato.

Motivo 2: non sono sempre adatti per i test degli utenti

Si spera che alcuni test utente siano stati programmati nel processo di progettazione, poiché è un buon modo per testare tutto, dalla fattibilità di un intero concetto al livello di dettaglio da visualizzare in una transazione.

Un modo tipico per testare questo genere di cose è attraverso la prototipazione.

I wireframe possono e funzionano per la prototipazione. Il team di progettazione si limita a testare solo il flusso e la funzionalità e, poiché manca un livello di progettazione visiva, gli stili visivi che influiscono sul comportamento dell'utente possono essere facilmente ignorati.

È saggio? UX, visual e copy design si influenzano a vicenda. È difficile separarli e isolarli in un ambiente di test. Simile a uno studio scientifico, i risultati di una funzione testata isolatamente non possono controllare o prevedere come si comporterà in natura.

A volte, è più efficace testare tutte queste cose insieme in modo olistico.

Esempio calzante: un prodotto o servizio multilingue. Le lingue possono avere grammatica, alfabeti e larghezze dei caratteri diversi che potrebbero influire sul design generale.

Inoltre, poiché il contenuto della copia influisce sull'UX, la traduzione stessa potrebbe influire sull'UX.

Ad esempio, abbiamo avuto un compito in cui ci è stato richiesto di testare alcune architetture di informazioni diverse a causa di come i vari concetti dovevano essere spiegati nella lingua locale. Non avremmo scoperto l'impatto sul copywriting e sulla traduzione senza testare la copia effettiva nell'interfaccia utente.

Abbiamo scoperto che erano necessarie più parole per descrivere concetti simili nella lingua locale e che avremmo dovuto modificare le dimensioni e le forme dei pulsanti a livello globale per adattarsi alla formulazione dettagliata richiesta per quella lingua. Senza concentrarci sui problemi di testo durante il test dei componenti visivi effettivi nell'interfaccia utente, non avremmo scoperto che i pulsanti dovevano occupare l'intera larghezza dello schermo mobile, il che ha influenzato il nostro design UX in futuro.

Conclusione chiave: ha senso preparare interfacce utente ad alta fedeltà fin dall'inizio, soprattutto per un progetto multilingue.

Motivo 3: rendono la vita un inferno per sviluppatori e QA

Ciò che inevitabilmente accade durante la fase di visual design è che tutto si muove. Le immagini impilate diventano tessere. Il testo centrato diventa allineato a sinistra. Le icone del grilletto della fisarmonica erano + e - , ma ora sono un paio di galloni.

Questa è una parte normale del processo di progettazione visiva. Ciò che è anche normale è che tutte le modifiche apportate al design visivo non si rifletteranno nei wireframe perché i wireframe sono stati "firmati".

Quando tutte le immagini sono state approvate, è il momento di consegnare tutto agli sviluppatori. Nella maggior parte dei casi, riceveranno una serie di wireframe dettagliati e annotati e una serie di bellissimi design visivi insieme a una guida di stile. Ora tocca a loro incrociare questi due documenti e dargli vita.

Questa è un'area in cui il processo di progettazione può davvero fallire. Diamo agli sviluppatori troppi documenti a cui fare riferimento e lasciamo a loro il compito di determinare quali informazioni hanno la precedenza. Ciò aumenta la quantità di tempo necessaria per le chiamate di supporto e il QA, con un impatto naturale sul tempo necessario per portare un prodotto o un aggiornamento sul mercato.

Perché non fornire agli sviluppatori un documento accurato che includa tutto? La maggior parte dei clienti apprezzerebbe anche una copia da utilizzare come riferimento completo per il lavoro.

La soluzione: saltare i wireframe

Chiaramente, ci sono momenti in cui è necessaria una fase wireframe completa e ci sono momenti in cui non lo è. Ci sono anche momenti in cui passare direttamente all'alta fedeltà vince del tutto la fase wireframe.

Potresti considerare di saltare la fase wireframe se uno di questi è vero:

È presente un solido materiale di riferimento.

Dai un'occhiata al lavoro esistente in atto. Potrebbero essere già disponibili riferimenti dettagliati dell'interfaccia utente. Se stai aggiornando un sito Web esistente o aggiungendo una nuova funzionalità a un'app esistente, guarda il sito Web e l'app correnti per trovare modelli e stili da riutilizzare.

Sarebbe ancora meglio se avessi accesso ai file di origine per il lavoro esistente. Alcune funzionalità ed elementi potrebbero essere andati persi durante la traduzione, per così dire, durante il processo di sviluppo, e potresti fare riferimento al file di origine per vedere come avrebbe dovuto essere eseguita quella funzionalità.

Oltre a (o in assenza di) un prodotto o sito esistente, controlla se è disponibile una guida di stile o una libreria di modelli. Il cliente potrebbe aver già pagato per alcuni lavori di branding e visual design e queste risorse potrebbero essere riutilizzate per il tuo progetto.

Usa il maggior numero di stili e pattern che riesci a trovare in modo che i tuoi output ad alta fedeltà siano il più precisi possibile.

Hai programmato molti prototipi iterativi e test lungo il percorso.

Risparmiati un po' di fatica durante le settimane di prototipazione e test. Se imposti il ​​tuo documento con cura la prima volta e fai un uso intelligente di stili, modelli e simboli ripetuti, puoi facilmente effettuare aggiornamenti incrementali in alta fedeltà e pubblicarli direttamente nel tuo flusso di lavoro di prototipazione. Nessun wireframe necessario.

Come grande vantaggio, puoi prendere due piccioni con una fava. Puoi ottenere un feedback visivo e dell'interfaccia utente insieme al tuo feedback sull'esperienza utente e apportare tutte queste modifiche in una volta sola.

I tuoi partecipanti al test sono molto letterali.

Proprio come i tuoi clienti e colleghi a volte possono richiedere esempi concreti, così potrebbe essere il pubblico di destinazione del tuo progetto.

Un recente concerto mi ha fatto progettare schermi finanziari per un pubblico di destinazione con scarsa alfabetizzazione. La comprensione della lettura non era l'unico problema: i concetti astratti erano spesso molto difficili da affrontare. Questo pubblico di destinazione in genere aveva bisogno di discutere concetti finanziari usando esempi concreti; altrimenti, non erano in grado di seguire davvero la conversazione.

Per comprendere i concetti finanziari, i partecipanti al test in questo pubblico dovevano sentirsi come se stessero effettivamente effettuando una transazione. E per capire come funzionava il prodotto, doveva apparire e sentire come una vera applicazione.

Dimentica i wireframe per un pubblico come questo! Finirai per passare molto tempo a spiegare cosa sono e il tuo pubblico non si concentrerà sui compiti, né su come si sentono riguardo a loro perché non possono relazionarsi con l'uso di qualcosa di così sconosciuto nelle loro vite.

Il tuo cliente ha tempo e/o budget limitati.

È raro avere il tempo, le risorse e il budget a tuo favore. Spesso ti ritrovi a cercare di ridurre la portata e il prezzo, o a rimescolare per vedere dove puoi risparmiare e risparmiare e continuare a fornire un ottimo servizio al tuo cliente.

Se hai un cliente che non può permettersi (o che probabilmente non acquisterà) un workup completo di UX, posso suggerire di ritagliare il tempo di wireframing? Creane alcuni internamente se necessario, ma mantieni il progetto in movimento per il tuo cliente. Prova progetti reali e tangibili e fai reagire il tuo cliente al lavoro reale.

Come eliminare la fase Wireframe

Questa parte è piuttosto soggettiva, poiché dipenderà dal tuo flusso di lavoro personale e dalle esigenze specifiche del tuo cliente.

Detto questo, questo è un "modello" di processo che potresti inizialmente provare ad adattare al tuo flusso di lavoro, quindi modificare man mano che fai più pratica lavorando in questo modo.

Passaggio 1: inizia con il tuo solito processo di ricerca e scoperta.

Interviste, osservazioni sul campo, ricerche a tavolino, analisi competitive: qualunque cosa tu faccia normalmente (o hai programmato di fare), completa questa fase come faresti normalmente.

Passaggio 2: disegnare un po' lungo il percorso.

Mentre stai conducendo ricerche, probabilmente stai ricevendo alcune idee per layout e modelli utili, flussi coinvolgenti e simili. Registrali come fai di solito. Mi piace fare schizzi in miniatura sul mio taccuino, con note scritte accanto. Potresti preferire disegnare su una lavagna o acquisire schermate di modelli di interfaccia utente interessanti. Qualunque cosa ti aiuti a ricordare le buone idee, fallo.

Passaggio 3: prepara il tuo documento ad alta fedeltà

Apri lo strumento di progettazione che preferisci e imposta il documento correttamente. Scegli alcune dimensioni della tavola da disegno e inizia a creare forme, gruppi e simboli ripetibili.

Prenditi il ​​​​tempo necessario per salvare la tavolozza dei colori del marchio come campioni individuali, creare e organizzare gli stili di testo e creare ombre discendenti e filtri standard che puoi applicare a tutte le forme, se necessario.

Dedica molto tempo a ottenere i tuoi simboli nel modo giusto. Potresti avere un pulsante che, a seconda del suo stato, potrebbe avere quattro colori diversi. Utilizza le sostituzioni dei simboli, se possibile, in modo da poter applicare facilmente diversi colori ed etichette di testo secondo necessità.

Se vengono utilizzate icone personalizzate, salvale come singoli simboli su una tavola da disegno quadrata (o qualsiasi forma sia appropriata). In questo modo, sarà facile per te ridimensionarli su e giù pur mantenendo la spaziatura e l'allineamento corretti.

Passaggio 4: inizia a progettare.

Il tuo primo round potrebbe essere un po' difficile man mano che ti abitui a lavorare in questo modo e vedere dove regge la tua guida di stile (e dove no). Oltre a creare soluzioni per modelli che non hanno già uno stile definito, aspettati di fare un bel po' di modifiche per ottenere tutti gli stili corretti.

Durante questo processo, segui una buona "direzione della copia" o con una copia reale se ce l'hai. Non creare titoli che dicano "Il titolo della pagina va qui". Dai allo spettatore un'idea di cosa accadrebbe qui se fosse reale.

Allo stesso modo, non creare un elenco di nomi che dicono tutti John Smith con il numero di telefono 555-1212. Usa un generatore di elenchi casuali o un plug-in per creare nomi e numeri diversi o creare qualsiasi set di dati che devi visualizzare. Questo può sembrare eccessivo, ma ti consente di risolvere i problemi con il layout e la larghezza dei caratteri e aiuta il tuo spettatore a capire che queste cinque voci sono tutte diverse.

Passaggio 5: sapere quando interrompere la progettazione.

Ci sono alcuni dettagli di cui non dovresti occuparti a questo punto perché impiegheranno davvero troppo tempo. Forse sta scegliendo l'immagine esatta per entrare in un eroe o progettare un'icona personalizzata per indicare uno stato di download. Questi sono alcuni casi in cui potresti scegliere di utilizzare un'immagine o un'icona segnaposto e testare immagini o iconografie reali in un secondo momento.

Dovrai fare la chiamata su ciò che è appropriato qui, poiché dipenderà dagli obiettivi del progetto e da quanto sei avanti con esso.

Tieni presente che potrebbe dipendere da ciò di cui i partecipanti al test utente hanno bisogno per valutare correttamente il lavoro. Per il pubblico di destinazione con scarsa alfabetizzazione che ho menzionato sopra, niente era troppo dettagliato. Per ogni partecipante, ho realizzato una variante del prototipo con il loro vero nome e numero di telefono utilizzati in tutto in modo che l'applicazione sembrasse davvero "loro". Meno dovevano presumere, più facile era per loro seguire e migliori erano i miei risultati.

Passaggio 6: goditi feedback e risultati dei test di alta qualità.

Pubblica i tuoi progetti direttamente sul tuo strumento di prototipazione preferito e portali sul campo per i test. Ora puoi ricevere feedback su qualcosa di più della semplice funzionalità. Puoi scoprire potenziali problemi visivi, come problemi con il contrasto del colore o la leggibilità, e puoi scoprire problemi con la direzione della copia o la traduzione. Puoi anche stuzzicare i sentimenti positivi o negativi che gli utenti possono provare riguardo all'aspetto grafico o al marchio.

Queste sono tutte cose su cui probabilmente avresti ricevuto feedback comunque quando sei arrivato alla fase di progettazione visiva. Perché non ricevere tutto quel feedback ora? Alcuni dei feedback sugli elementi visivi potrebbero influenzare direttamente l'UX e viceversa, quindi è bene elaborare tutto contemporaneamente, se possibile.

Avvolgendo

Indubbiamente ci sono molti casi in cui una fase wireframe completa è necessaria per il successo del progetto. Un design complesso, come un'applicazione web reattiva, necessita di un focus separato e dedicato sui wireframe. Farebbe risparmiare tempo e denaro per elaborare tutti i requisiti aziendali, i casi limite e la gestione degli errori nella fase wireframe, rispetto a quanto accadrebbe se fosse già stato concepito e applicato un livello visivo completo.

Tuttavia, nei casi giusti, passare direttamente all'alta fedeltà può migliorare il tuo processo:

• Migliorare il feedback degli stakeholder . Clienti, sviluppatori, altri designer e partecipanti al test del pubblico di destinazione possono vedere esattamente cosa otterranno, consentendo loro di fornire feedback di qualità superiore.
• Accelera il flusso di lavoro di prototipazione . Non solo i tuoi progetti saranno subito pronti per essere testati, ma potrai ricevere feedback su una serie di cose contemporaneamente: l'UX, il testo e gli elementi visivi.
• Distribuisci un unico documento a clienti e sviluppatori . Elimina la necessità di fare riferimenti incrociati e controllare una varietà di documenti per capire come dovrebbe funzionare un pulsante. Questo è anche un ottimo modo per il tuo cliente di discutere il lavoro con i suoi stakeholder interni per ottenere ancora più feedback.
• Risparmia tempo e denaro . Ed è praticamente sempre una buona cosa!

Prova questo approccio la prossima volta che hai un progetto in cui hai alcuni materiali di design esistenti a cui fare riferimento o in cui farà una grande differenza per il tuo pubblico se il lavoro è in bassa o alta fedeltà.

• • •

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