Sono certo che abbiate sentito parlare dei vantaggi della creazione di wireframe durante i vostri corsi di gestione del prodotto oppure da colleghi o professionisti del settore. Immagino anche che abbiate provato a introdurre una qualche forma di processo di creazione di wireframe nel vostro prodotto.
Ma il vostro processo funziona bene? Riuscite a ottenere il massimo dai vostri wireframe con il metodo che utilizzate ora? Beh, dipende davvero dal processo che state usando.
Per aiutarvi ad aumentare l'efficacia della creazione di wireframe, lasciate che condivida la mia esperienza e vi parli di un processo di creazione di wireframe che ho trovato essere il migliore in assoluto.
La creazione di wireframe è una parte essenziale del processo di progettazione UX
I wireframe sono rappresentazioni visive ad alto livello del vostro prodotto che potete utilizzare per illustrare come volete che il prodotto appaia e funzioni. Grazie a queste rappresentazioni visive, potete testare e perfezionare la vostra idea prima di chiedere agli sviluppatori di intervenire e avviare il processo di sviluppo, risparmiando tempo e denaro.
Mi piace molto la definizione di creazione di wireframe proposta dai guru dell'esperienza utente di NN/g, perché mette in evidenza il principale vantaggio che ne deriva.
Tecnica rapida ed economica per identificare tempestivamente i principali problemi di usabilità attraverso schizzi e carta. Perfetta per i processi Agile e Lean.
Indipendentemente dal metodo di creazione di wireframe che scegliete (disegnare su carta va benissimo!) o dallo strumento per la creazione di wireframe che decidete di utilizzare (a questo proposito, date un'occhiata al nostro elenco dei migliori strumenti per la creazione di wireframe), vi consiglio di seguire questo processo, che ho individuato dopo aver provato praticamente ogni processo di creazione di wireframe esistente.
Passaggio n. 1: assicuratevi di conoscere abbastanza bene i vostri utenti
Un buon design inizia da un team che conosce bene i propri utenti. Dopotutto, chi ha bisogno del vostro design e del prodotto che rappresenta se questo non è in grado di soddisfare adeguatamente le esigenze delle persone a cui è destinato? Pertanto, il passaggio più importante da compiere prima di iniziare a creare i vostri wireframe è la ricerca sugli utenti.
In realtà, la ricerca sugli utenti dovrebbe proseguire per l'intero ciclo di vita del processo di creazione dei wireframe (e anche oltre), ma concentriamoci sulla fase iniziale, quando cercate di comprendere le esigenze e la realtà quotidiana dei vostri futuri clienti.
Ecco alcune delle attività importanti che vi consiglio di svolgere durante questa fase:
Interviste esplorative: volete sapere che cosa desiderano i vostri utenti? Perché non chiedere direttamente a loro? Potete iniziare preparando un elenco di domande che li aiutino a parlare dei problemi che stanno vivendo e delle soluzioni che utilizzano per risolverli.
Poi potete contattare e reclutare potenziali utenti tramite i social media, piattaforme specializzate come Userinterviews o Respondent, oppure incontrarli alle fiere di settore.
Infine, conducete l'intervista con un registratore (così da poterla analizzare in seguito) oppure con un collega che vi affianchi e prenda appunti.
Nota: idealmente, farete entrambe le cose.
Sondaggi: mentre le interviste sono un'ottima fonte di dati qualitativi che aiutano a scoprire le ragioni alla base delle esigenze e dei comportamenti degli utenti, i sondaggi forniscono un mix di dati qualitativi e quantitativi, consentendovi di convalidare i risultati con significatività statistica.
Non entrerò troppo nei dettagli in questa sede, poiché abbiamo una guida completa sulle domande per i sondaggi che potete consultare.
Studi sul campo: in questo caso, osservate i vostri utenti nel loro “habitat naturale”. Ciò significa che siete presenti, virtualmente o fisicamente, nell'ambiente in cui i vostri utenti target sperimentano i problemi che volete risolvere.
Per esempio, supponiamo che stiate sviluppando uno strumento che renda facile modificare video per i social media. Il vostro studio sul campo consisterebbe nell'osservare il processo seguito da un influencer dei social media per girare un video di TikTok, modificarlo e caricarlo sul proprio canale.
Sebbene gli studi sul campo siano relativamente difficili da organizzare (non tutti gli utenti si sentiranno a proprio agio sapendo che osservate le loro attività quotidiane), vi forniscono il contesto e gli insegnamenti più ricchi sui vostri utenti.
Workshop di scoperta con gli stakeholder: sì, una grande progettazione dell'esperienza utente si basa sulle esigenze degli utenti, ma non dimentichiamoci neppure dei vostri stakeholder principali. Sebbene anche i vostri utenti siano stakeholder, utilizzerò questo termine per indicare i vostri fondatori e dirigenti, i vostri investitori, qualsiasi ente legale o normativo con cui dobbiate collaborare, ecc.
A volte prendete decisioni di design non basate sulle esigenze degli utenti, ma tenendo in considerazione:
- La vostra visione e strategia: gli utenti di Apple adorano i cavi e le connessioni cablate, ma la visione di Apple è wireless: ecco perché continua a rimuovere le porte. (Ora lo sapete!)
- Il vostro contesto legale: offrire una selezione enorme di opzioni per i cookie non è l'interfaccia più intuitiva, ma è qualcosa che potreste essere obbligati per legge a mostrare.
Esiste anche un caso a favore dell'intuizione: nonostante conosciate bene i vostri utenti, potreste affidarvi alla vostra intuizione per compiere una scelta progettuale.
Chiariti il concetto e i tipi di ricerca, vediamo con un esempio come si presenta nella vita reale.
Have an account? Log In
Esempio 1: creare uno strumento per la realizzazione di wireframe destinato a un professionista dell'interfaccia utente
Immaginate di essere responsabili della creazione di uno strumento per la realizzazione di wireframe (qualcosa di simile a Balsamiq) e di voler sapere esattamente come lo utilizzeranno i vostri utenti target (in questo caso, i team di progettazione) e quali problemi sperano di risolvere.
Per scoprirlo, possiamo preparare un questionario da sottoporre ai nostri utenti durante un'intervista. Ecco cosa possiamo includere:
Ora immaginiamo di scoprire che il riscontro consiste principalmente in un commento su una parte specifica del wireframe del prodotto e che il responsabile di prodotto debba approvare il progetto del wireframe. Questi sono due risultati che influenzeranno direttamente il nostro progetto, poiché dobbiamo progettare un flusso di lavoro e un'interfaccia utente per commentare il wireframe e approvarlo.
In sintesi, condurre una ricerca esplorativa è la parte più importante del processo di realizzazione del vostro wireframe e non vi consiglierei di saltarla. Ora, con tutti gli insegnamenti a vostra disposizione, passiamo alla fase successiva del nostro processo di realizzazione del wireframe.
Fase n. 2: creare i flussi utente
Prima di creare le schermate o le pagine vere e proprie e di posizionarvi componenti come moduli, schede, immagini, pulsanti e così via, dovete comprendere la sequenza di passaggi che immaginate seguiranno i vostri utenti.
Queste sequenze sono note anche come flussi utente e rappresentano tutti i possibili percorsi che i vostri utenti possono seguire per raggiungere i propri obiettivi. Questi obiettivi possono essere qualcosa di ordinario e “amministrativo”, come registrarsi o cambiare la password, oppure rappresentare le funzionalità principali del vostro prodotto (come cercare e riprodurre musica in streaming su Spotify).
In ogni caso, creare flussi utente è importante perché vi aiuterà a visualizzare meglio tutte le schermate o pagine che desiderate progettare, oltre ai contenuti necessari in ciascuna di esse.
Per comprendere meglio i flussi, lasciate che ve ne mostri uno utilizzando lo strumento per diagrammi di flusso Flowmapp.
Esempio 2: visualizzare il flusso utente di uno strumento di progettazione web utilizzando Flowmapp
Supponiamo che stiate sviluppando uno strumento di progettazione web con funzionalità di trascinamento, come Webflow. I vostri utenti sono progettisti web che non scrivono codice e volete visualizzare i passaggi che seguiranno per aggiungere un'immagine di sfondo alla loro pagina web.
Ecco come apparirà su Flowmapp il flusso utente per questa funzionalità:
Come possiamo vedere, in un flusso utente l'enfasi è maggiore sulle azioni che l'utente compie e sulla sequenza o causalità tra di esse, piuttosto che sulle pagine e sul loro design.
In questo esempio, vogliamo che l'utente possa selezionare un'immagine dalla galleria oppure caricarne o aggiungerne una alla galleria. Vogliamo inoltre che l'utente possa visualizzare un'anteprima dell'immagine prima che il nostro strumento la applichi come sfondo della pagina web dell'utente.
Osservando il flusso, comprendiamo che l'utente rimarrà sulla stessa pagina, ovvero l'editor della pagina web, e potrebbe visualizzare un'altra schermata che mostra la galleria delle immagini sotto forma di finestra a comparsa.
Pertanto, ci sono una pagina e una finestra a comparsa da progettare con gli elementi e le funzionalità di progettazione pertinenti.
Ora che abbiamo una panoramica dei passaggi che gli utenti compiono per raggiungere i propri obiettivi nel nostro prodotto, possiamo finalmente iniziare a realizzare il wireframe vero e proprio.
Fase n. 3: iniziare con un wireframe a bassa fedeltà
Sì, la realizzazione di un wireframe è la terza fase di questo processo. Tuttavia, credetemi: svolgere le due fasi precedenti porterà la qualità del vostro wireframe a un livello completamente nuovo e vale sicuramente la pena dedicarvi del tempo.
Per quanto riguarda lo schema di struttura in sé, ti consiglio di iniziare con uno a bassa fedeltà. Uno schema di struttura a bassa fedeltà non includerà dettagli specifici come i colori e le dimensioni corrette né altri attributi di progettazione delle tue pagine e schermate. Non conterrà nemmeno immagini e testi reali. Al loro posto, avrai dei segnaposto per entrambi.
E c’è una buona ragione per cui uno schema di struttura a bassa fedeltà è fatto in questo modo e per cui dovresti iniziare da qui: gli schemi di struttura a bassa fedeltà sono rapidi da creare e modificare.
È molto probabile che tu abbia trascurato qualcosa di piuttosto importante nella tua progettazione. Quando raccoglierai riscontri al riguardo (ne parleremo in dettaglio nel prossimo passaggio), potresti renderti conto che ci sono molti elementi o flussi da modificare.
Se avessi avuto una progettazione completa, apportare queste modifiche ti avrebbe richiesto giorni. Ma con uno schema di struttura a bassa fedeltà puoi effettuare le modifiche e sottoporre nuovamente la tua progettazione a un altro ciclo di riscontri entro un paio d’ore o anche meno.
Quindi, dopo aver elogiato così tanto gli schemi di struttura a bassa fedeltà, vediamo che aspetto hanno utilizzando un popolare strumento per la creazione di schemi di struttura: Balsamiq.
Esempio 3: creare uno schema di struttura per un sito web
Il vantaggio degli strumenti di progettazione specializzati nella creazione di schemi di struttura, soprattutto quelli a bassa fedeltà, è che non devi disegnare ogni elemento da zero.
In genere includono invece una varietà di elementi di base dell’interfaccia già pronti (ad esempio immagini, menu, percorsi di navigazione, pulsanti ecc.), insieme a controlli di trascinamento per rendere la progettazione particolarmente rapida. Ecco un esempio che ho realizzato utilizzando Balsamiq.
Considerata la natura stessa degli schemi di struttura a bassa fedeltà, di solito sono in scala di grigi oppure presentano colori e progettazione visiva minimi. Ciò che puoi vedere è invece l’aspetto generale degli elementi dell’interfaccia utente nella tua progettazione, così come la loro disposizione e l’architettura delle informazioni.
Ora, se hai pronto il tuo schema di struttura a bassa fedeltà, è arrivato il momento di sottoporlo al primo ciclo di revisione.
Passaggio n. 4: perfeziona internamente la tua progettazione a bassa fedeltà
Prima di investire tempo e impegno nella realizzazione della progettazione finale del prodotto, supponiamo ragionevolmente di aver commesso molti errori o di aver dimenticato di considerare alcuni aspetti della progettazione, e iniziamo a mostrare il nostro schema di struttura a bassa fedeltà ai colleghi e alle parti interessate.
Certo, potresti mostrare questa progettazione anche agli utenti. Tuttavia, considerando quanto sia difficile reclutare utenti disposti a revisionare o sottoporre a test di usabilità la tua progettazione, ti consiglierei di utilizzare il loro tempo prezioso per esaminare progettazioni a maggiore fedeltà e di non sprecarlo facendo individuare loro problemi che i tuoi colleghi avrebbero potuto trovare facilmente.
Ti consiglio comunque di coinvolgere le parti interessate in questa fase. Due dei motivi principali sono:
- Ridurre la “distanza” tra loro e i membri del team che realizzano il prodotto, coinvolgendoli fin dalle prime fasi.
- Risolvere nelle fasi iniziali i problemi di progettazione legati all’allineamento strategico, così da risparmiare tempo in seguito.
Infine, non appena avrai raccolto i riscontri dei colleghi e delle parti interessate, potrai correggere lo schema di struttura a bassa fedeltà sulla base di quanto emerso, convalidare con loro le correzioni e passare alla realizzazione della progettazione visiva effettiva del prodotto.
Passaggio n. 5: prepara uno schema di struttura ad alta fedeltà e un prototipo interattivo
Ora che hai una comprensione adeguata dell’aspetto generale che avrà la tua progettazione, puoi investire nella creazione delle componenti visive della progettazione e portarla allo stato più vicino possibile a ciò che intendi realizzare.
In questa fase della progettazione, il tuo schema di struttura digitale includerà:
- La progettazione della tua interfaccia utente: inclusi colori, ombre, tipografia e caratteri, margini corretti ecc.
- I tuoi contenuti visivi: se prevedi di inserire immagini, illustrazioni, video o altri elementi grafici nelle tue pagine, questo è il momento di aggiungerli.
- Il testo delle tue pagine: con questa espressione ci riferiamo al testo degli elementi dell’interfaccia utente, dei pulsanti, delle intestazioni ecc.
- Un esempio dei tuoi contenuti: se la tua progettazione include contenuti generati dagli utenti o contenuti creati da te, dovresti aggiungerne anche una versione di esempio. (Ad esempio, la progettazione di un commento sotto un articolo che abbia le dimensioni e il contenuto tipici di un commento che scriverebbero i tuoi utenti reali.)
Oltre a essere il principale materiale da consegnare al team di sviluppo, che realizzerà il prodotto sulla base della sua progettazione, lo schema di struttura ad alta fedeltà può anche fungere da ottimo strumento per i test di usabilità con i tuoi utenti reali.
Puoi utilizzare lo schema di struttura ad alta fedeltà direttamente per il test oppure portarlo a un livello successivo aggiungendo la progettazione dell’interazione e trasformandolo in un prototipo interattivo.
È davvero facile confondere i termini di cui ho parlato qui (wireframe ad alta fedeltà, prototipi interattivi, ecc.). Quindi, lasciate che ve li chiarisca e vi mostri anche un paio di esempi.
Distinguere i tipi di wireframe: mockup, wireframe ad alta fedeltà e prototipi interattivi
Questi tre concetti sono piuttosto simili tra loro e, purtroppo, le persone li usano come sinonimi, creando confusione tra chi è relativamente nuovo nel mondo dei prodotti e del design.
Ecco cosa significa ciascun termine:
Wireframe ad alta fedeltà: Ne abbiamo già parlato sopra. Quindi, lasciate invece che vi mostri che aspetto ha.
Questo design accattivante è pensato per un servizio che permette di ingaggiare chef privati per preparare piatti di alta cucina. Come possiamo vedere, questo design include tutto: dalle immagini finali ai colori e alle posizioni. Contiene anche un po' di testo “lorem ipsum” per rappresentare la testimonianza di uno chef professionista sulla pagina.
Mockup: A differenza del suo corrispettivo, il mockup non include soltanto il design finale, ma mostra anche l'ambiente in cui quel design appare. I generatori di mockup di prodotto possono aiutare a creare queste immagini contestuali. Ad esempio, se state progettando una carta intestata, un mockup mostrerebbe un foglio di carta su un tavolo con il vostro design sopra.
Nel caso di un'app mobile, il vostro mockup mostrerà la sagoma di un iPhone o di un dispositivo Android con il vostro design visualizzato sullo schermo.
Prototipo: Il prototipo ha l'aspetto di un wireframe ad alta fedeltà, ma, oltre all'aspetto finale, cerca anche di simulare le funzionalità del prodotto.
Con i prototipi interattivi o gli strumenti di prototipazione 3D, potete aggiungere interazioni di base come lo scorrimento, le animazioni, il clic sui pulsanti, la navigazione all'interno dell'app, ecc.
Simulando l'interattività del vostro prodotto, i prototipi vi permettono di testare il funzionamento desiderato delle vostre funzionalità prima di svilupparle.
Inoltre, potete effettuare test con gli utenti fornendo loro i vostri prototipi ad alta fedeltà e osservando come interagiscono con il prodotto, risolvono i loro problemi o cercano di orientarsi nel vostro design.
La creazione di wireframe è un gioco di test e iterazioni
La natura iterativa dei wireframe vi permette di risparmiare una grande quantità di lavoro nella correzione degli errori. Inoltre, seguendo un processo di creazione di wireframe come questo, vi assicurate che i vostri utenti ricevano un prodotto in grado di soddisfare al meglio le loro esigenze.
Utilizzate un processo di creazione di wireframe diverso nella vostra azienda? Sono curioso di saperne di più, quindi lasciate un commento qui sotto e raccontateci come lo fate!
Spero che questa guida vi sia piaciuta e che l'abbiate trovata utile. Assicuratevi di consultare anche le altre guide sulla gestione dei prodotti scritte da alcuni dei migliori professionisti del settore, come:
- La differenza tra visione e strategia di prodotto di Kerstin Exner.
- Le 3P del prodotto di Benoit des Ligneris.
- Documenti sui requisiti di prodotto di Sarah Tolle.
Infine, potete iscrivervi alla nostra newsletter e vi invieremo direttamente nella vostra casella di posta anche contenuti interessanti.