Processo di Wireframing in 5 Fasi per Creare Prodotti Migliori
Sono sicuro che hai sentito parlare dei benefici del wireframing sia nei tuoi corsi di product management sia da colleghi o conoscenti. Inoltre, suppongo che tu abbia già provato a introdurre in qualche modo un processo di wireframing nel tuo prodotto.
Ma il tuo processo sta funzionando bene? Riesci a ottenere il massimo dai tuoi wireframe così come li crei ora? Beh, tutto dipende davvero dal processo che stai utilizzando.
Per aiutarti a rendere più efficace il tuo wireframing, lascia che condivida la mia esperienza e ti parli di un processo di wireframing che, secondo me, è il migliore che esista.
Want more from The CPO Club?
Sign up for a free membership to complete reading this article:
Have an account? Log In
Il Wireframing è una Parte Essenziale del Processo di UX Design
I wireframe sono rappresentazioni visive ad alto livello del tuo prodotto che puoi utilizzare per illustrare come desideri che appaia e funzioni il prodotto. Grazie a queste visualizzazioni, puoi testare e iterare sulla tua idea prima di coinvolgere gli ingegneri nello sviluppo vero e proprio—risparmiando tempo e denaro.
Mi piace molto la definizione di wireframing data dai guru dell’esperienza utente di NN/g, perché mette in luce il vantaggio principale che si ottiene da questa pratica.
Tecnica rapida e conveniente per identificare precocemente i principali problemi di usabilità tramite schizzi e carta. Perfettamente in sintonia con i processi Agile e Lean.
Non importa quale metodo di wireframing scegli (disegnare su carta va benissimo!) o quale strumento di wireframing decidi di usare (a tal proposito, dai un’occhiata alla nostra lista dei migliori strumenti di wireframing), ti raccomando di seguire questo processo che ho individuato dopo aver provato praticamente tutti i metodi di wireframing esistenti.
Fase #1: Assicurati di Conoscere Abbastanza Bene i Tuoi Utenti
Un ottimo design inizia con un team che conosce molto bene i propri utenti. In fondo, chi ha bisogno del tuo design e del prodotto che visualizza, se questi non riescono a soddisfare realmente le esigenze delle persone a cui sono destinati? Pertanto, il passo più importante che dovresti compiere prima di iniziare il wireframing è la ricerca sugli utenti.
In realtà, la ricerca sugli utenti dovrebbe proseguire lungo tutto il ciclo di vita del processo di wireframing (e anche oltre), ma concentriamoci ora sulla fase iniziale, quando stai cercando di capire i bisogni e la realtà quotidiana dei tuoi futuri clienti.
Ecco alcune delle attività importanti che ti consiglio di svolgere durante questa fase:
Interviste esplorative: Vuoi sapere cosa desiderano i tuoi utenti? Beh, perché non chiederlo direttamente a loro? Puoi iniziare stilando una lista di domande che aiutino gli utenti a parlare dei problemi che stanno vivendo e delle soluzioni che stanno adottando per risolverli.
Poi, puoi contattare e reclutare potenziali utenti attraverso i social media, piattaforme specializzate come Userinterviews o Respondent, oppure incontrarli direttamente a fiere di settore.
Infine, svolgi l’intervista dotandoti di un registratore (così da poterla analizzare in seguito) oppure con un collega che ti affianca prendendo appunti.
Nota: Idealmente, faresti entrambe le cose.
Sondaggi: Anche se le interviste sono una grande fonte di dati qualitativi che aiutano a scoprire le ragioni alla base dei bisogni e dei comportamenti degli utenti, i sondaggi ti permettono di raccogliere un mix di dati qualitativi e quantitativi, che consente di validare i risultati con significatività statistica.
Non entrerò qui troppo nel dettaglio, dato che abbiamo una guida intera dedicata alle domande da porre nei sondaggi che puoi consultare.
Studi sul campo (Field Studies): In questo caso, osservi i tuoi utenti nel loro “habitat naturale”. Significa che sei presente, virtualmente o fisicamente, nell’ambiente in cui i tuoi utenti target vivono i problemi che desideri risolvere.
Per esempio, supponiamo che tu stia creando uno strumento che renderà facile modificare video per i social media. Il tuo studio sul campo consisterebbe nell’osservare il processo di un influencer che registra un video su TikTok, lo modifica e lo carica sul proprio canale.
Nonostante gli studi sul campo siano relativamente difficili da organizzare (non tutti gli utenti sono a proprio agio nell’avere qualcuno che osserva le loro attività quotidiane), forniscono il contesto più ricco e insegnamenti preziosi sui tuoi utenti.
Workshop di scoperta con gli stakeholder: Sì, una grande user experience si costruisce attorno ai bisogni degli utenti, ma non dimentichiamo nemmeno i tuoi principali stakeholder. Anche se gli utenti sono anch’essi stakeholder, qui uso il termine per indicare i tuoi founder/C-suite, i tuoi investitori, eventuali organi legali o regolatori con cui è necessario collaborare, ecc.
A volte le decisioni di design non vengono prese solo in base alle esigenze degli utenti, ma prendendo anche in considerazione:
- La tua visione e strategia: Gli utenti Apple adorano i cavi e le connessioni cablate, ma la visione di Apple è wireless—ecco perché continuano a rimuovere le porte. (Ora lo sai!)
- Il tuo contesto legale: Avere un’ampia selezione di opzioni sui cookie non è l’interfaccia più user-friendly, ma può essere qualcosa che sei legalmente obbligato a mostrare.
C’è anche una questione di intuizione—pur conoscendo bene i tuoi utenti, potresti consultare la tua stessa intuizione per compiere una scelta di design.
Chiarito il concetto e le tipologie di ricerca, vediamo con un esempio concreto come si presentano nella vita reale.
Esempio 1: Creazione di uno strumento di wireframing per un professionista UI
Immagina di essere responsabile della creazione di uno strumento di wireframing (qualcosa di simile a Balsamiq) e di voler sapere esattamente come gli utenti target (in questo caso, i team di design) lo utilizzeranno e quali problemi sperano di risolvere.
Per scoprirlo, possiamo elaborare un questionario da sottoporre agli utenti durante un’intervista. Ecco cosa possiamo includere:
Supponiamo ora di scoprire che il feedback viene fornito principalmente sotto forma di commento su una specifica parte del wireframe del prodotto, e che il product manager deve approvare il design del wireframe. Queste sono due scoperte che influenzeranno direttamente il nostro design, poiché dobbiamo progettare un flusso e un’interfaccia utente adatti al commento sul wireframe e alla sua approvazione.
In sintesi, la fase di discovery research è la parte più importante del processo di wireframing e ti sconsiglio di saltarla. Ora, con tutte queste informazioni a disposizione, passiamo al prossimo passo del nostro processo di wireframing.
Fase #2: Costruisci i tuoi user flow
Prima di creare le schermate/pagine vere e proprie e posizionare componenti come form, card, immagini, pulsanti, ecc., devi capire in quale sequenza immagini che i tuoi utenti compiranno le azioni.
Queste sequenze sono anche chiamate user flow e rappresentano tutti i percorsi possibili che gli utenti possono seguire per raggiungere i loro obiettivi. Questi obiettivi possono essere qualcosa di ordinario e “amministrativo” come iscriversi o cambiare la password, oppure rappresentare le funzionalità principali (come cercare e ascoltare musica per Spotify).
In ogni caso, costruire i user flow è importante perché ti aiuta a visualizzare meglio tutte le schermate/pagine che vuoi progettare e i contenuti necessari per ciascuna di esse.
Per comprendere meglio i flussi, te ne mostro uno utilizzando uno strumento per diagrammi di flusso come Flowmapp.
Esempio 2: Visualizzazione di un user flow di uno strumento di web design con Flowmapp
Poniamo che tu stia sviluppando uno strumento di web design drag-and-drop come Webflow. I tuoi utenti sono web designer senza competenze di codice e vuoi visualizzare i passaggi che compiranno per aggiungere un’immagine di sfondo alla loro pagina web.
Ecco come potrebbe apparire su Flowmapp il user flow per questa funzionalità:
Come possiamo vedere, l’enfasi in un user flow è posta maggiormente sulle azioni che l’utente compie e sulla sequenza/connessione causale tra di esse, piuttosto che sulle pagine e il loro design.
In questo esempio, vogliamo che l’utente possa selezionare un’immagine dalla galleria oppure caricarne/aggiungerne una. Vogliamo anche che possa visualizzare l’anteprima dell’immagine prima che il nostro strumento la applichi come sfondo della pagina web dell’utente.
Guardando il diagramma, capiamo che l’utente resterà sulla stessa pagina—l’editor della pagina web—e magari visualizzerà un’altra schermata sotto forma di popup per mostrare la galleria delle immagini.
Dunque, c’è una pagina e un popup da progettare con gli opportuni elementi e funzionalità di design.
Avendo ora una panoramica dei passaggi che portano gli utenti a raggiungere i loro obiettivi nel prodotto, possiamo finalmente iniziare la fase effettiva di wireframing.
Fase #3: Parti da un wireframe a bassa fedeltà
Sì, realizzare un wireframe è il terzo passo di questo processo. Tuttavia, credimi, seguire i due passaggi precedenti farà fare un salto di qualità al tuo wireframe e vale assolutamente la pena investirci tempo.
Per quanto riguarda il wireframe in sé, ti consiglio di partire da una versione a bassa fedeltà. Un wireframe a bassa fedeltà non includerà dettagli specifici come i colori o le dimensioni corrette, né altri attributi di design delle tue pagine e schermate. Non ci saranno immagini e testi reali. Al loro posto, saranno presenti dei placeholder.
E c'è un buon motivo per cui un wireframe a bassa fedeltà è così e perché dovresti iniziare proprio da questo—i wireframe lo-fi sono veloci da creare e modificare.
È molto probabile che tu possa aver trascurato qualcosa di piuttosto importante nel tuo design. Quando raccogli i feedback a riguardo (ne parleremo più dettagliatamente nel prossimo passaggio), potresti renderti conto che ci sono molti elementi/flussi che devono essere cambiati.
Se avessi già un design completo, apportare queste modifiche ti sarebbe costato giorni di lavoro. Invece, con un wireframe lo-fi, puoi modificare il progetto e portarlo per un nuovo ciclo di revisione nel giro di poche ore o meno.
Dopo tutte queste lodi ai wireframe lo-fi, vediamo come appaiono utilizzando uno dei tool di wireframing più popolari: Balsamiq.
Esempio 3: Creazione di un Wireframe per un Sito Web
Il bello degli strumenti di design specializzati nel wireframing, soprattutto a bassa fedeltà, è che non è necessario disegnare ciascun elemento da zero.
Di solito, infatti, questi strumenti offrono una varietà di elementi base dell'interfaccia predefiniti (es. immagini, menu, breadcrumb, pulsanti, ecc.) insieme a controlli drag-and-drop per rendere la progettazione particolarmente rapida. Ecco un esempio realizzato da me con Balsamiq.
Considerando la natura stessa dei wireframe a bassa fedeltà, essi sono solitamente in scala di grigi o presentano pochi colori e dettagli visuali minimi. Quello che puoi vedere è principalmente la disposizione generale degli elementi della UI e l’architettura delle informazioni.
Ora, se hai il tuo wireframe lo-fi pronto, è tempo di sottoporlo alla prima fase di revisione.
Fase 4: Itera sul Tuo Design a Bassa Fedeltà Internamente
Prima di investire tempo ed energie nella realizzazione del design finale del prodotto, possiamo scommettere che ci sono molte cose che abbiamo fatto in modo errato o dimenticato di considerare e quindi iniziamo a mostrare il wireframe lo-fi a colleghi e stakeholder.
Certo, potresti mostrare questo design anche agli utenti. Tuttavia, considerando quanto sia difficile coinvolgere utenti disposti a rivedere o a testare la usabilità del design, ti consiglio di sfruttare il loro tempo prezioso con prototipi di livello superiore e non di fargli perdere tempo su problemi che i tuoi colleghi potrebbero risolvere facilmente.
Tuttavia, consiglio vivamente di coinvolgere gli stakeholder già in questa fase. I due motivi principali sono:
- Riduce la distanza tra loro e i membri del team che sviluppano il prodotto, coinvolgendoli già dalle prime fasi.
- Permette di correggere già in anticipo eventuali problemi di allineamento strategico, facendo risparmiare tempo successivamente.
Infine, appena raccolti i feedback da colleghi e stakeholder, puoi correggere il wireframe lo-fi in base a questi, validare le modifiche con loro e passare così alla realizzazione del vero e proprio visual design del prodotto.
Fase 5: Prepara un Wireframe ad Alta Fedeltà e un Prototipo Cliccabile
Ora che hai una comprensione chiara di come apparirà il tuo design a livello generale, sei pronto ad investire nella creazione della parte visuale del progetto e a portarla a uno stato più vicino possibile al prodotto finale desiderato.
In questa fase progettuale, il wireframe digitale includerà:
- Il tuo UI design: compresi i colori giusti, ombre, tipografia e font, margini, ecc.
- I tuoi contenuti visuali: se desideri utilizzare immagini, illustrazioni, video o altri elementi grafici nelle tue pagine, è questo il momento per aggiungerli.
- I testi delle pagine: intendiamo i testi su elementi dell’interfaccia, pulsanti, testate, ecc.
- Un mock del contenuto: se il design include contenuti generati dagli utenti o tuoi contenuti, dovresti aggiungere anche una versione di esempio. (Ad esempio, la progettazione di un commento sotto un post con la tipica lunghezza e il contenuto che i tuoi veri utenti inserirebbero.)
Oltre ad essere il principale deliverable per il team di sviluppo che dovrà costruire il prodotto sulla base del design, il wireframe ad alta fedeltà può anche essere uno strumento prezioso per test di usabilità reali con i tuoi utenti finali.
Puoi utilizzare direttamente il wireframe hi-fi per il test oppure fare un passo ulteriore aggiungendo elementi interattivi e trasformandolo in un prototipo cliccabile.
È davvero facile confondere i termini che abbiamo visto qui (wireframe hi-fi, prototipi interattivi, ecc.). Quindi lascia che te li chiarisca presentando anche alcuni esempi.
Differenza tra Tipi di Wireframe: Mockup vs Wireframe Hi-Fi vs Prototipi Cliccabili
Questi tre concetti sono piuttosto simili tra loro e, sfortunatamente, le persone li usano in modo intercambiabile, creando confusione tra chi si avvicina al product e al design.
Ecco cosa significa ciascun termine:
Wireframe ad alta fedeltà: Ne abbiamo già parlato sopra. Quindi, invece, lascia che ti mostri come appare.
Questo design accattivante è per un servizio che ti permette di assumere chef privati per cucinare piatti di alta cucina per te. Come possiamo vedere, questo design include tutto: dalle immagini finali ai colori e alle posizioni. C'è anche un po’ di testo “lorem ipsum” che rappresenta la testimonianza di uno chef professionista sulla pagina.
Mockup: A differenza del suo corrispettivo, il mockup non include solo il design finale, ma mostra anche l’ambiente in cui tale design appare. Ad esempio, se stai progettando una carta intestata, un mockup mostrerebbe un foglio di carta su un tavolo con il tuo design sopra.
Nel caso di un’app mobile, il tuo mockup mostrerà la sagoma di un iPhone o di un dispositivo Android con il tuo design visualizzato sullo schermo.
Prototipo: Il prototipo assomiglia a un wireframe hi-fi, ma, oltre all’aspetto finale, cercherà anche di simulare la funzionalità del prodotto.
Con prototipi cliccabili, o con strumenti di prototipazione 3D, puoi aggiungere interattività di base come lo scrolling, le animazioni, il clic sui pulsanti, la navigazione all’interno dell’app e così via.
Simulando l’interattività del tuo prodotto, i prototipi ti permettono di testare il modo in cui vuoi che funzionino le funzioni prima di svilupparle.
Inoltre, puoi effettuare dei test con gli utenti dando i tuoi prototipi ad alta fedeltà ai tuoi utenti e osservando come interagiscono con il prodotto, risolvono i loro problemi o cercano di orientarsi nel tuo design.
Wireframing: Il Gioco del Test e dell’Iterazione
La natura iterativa dei wireframe ti permette di risparmiare moltissimo tempo nella correzione degli errori. Inoltre, seguendo un processo di wireframing come questo, ti assicuri che i tuoi utenti ricevano un prodotto che risponde nel modo migliore alle loro esigenze.
Utilizzi un processo di wireframing diverso nella tua azienda? Sono curioso di saperlo, quindi lasciami un commento qui sotto e raccontaci come lo fai!
Spero che questa guida ti sia piaciuta e ti sia stata utile. Assicurati di consultare anche le altre guide sulla gestione del prodotto scritte da alcuni dei migliori professionisti del settore, come:
- La differenza tra Visione di Prodotto e Strategia di Kerstin Exner.
- Le 3P del Prodotto di Benoit des Ligneris.
- Documenti dei Requisiti di Prodotto di Sarah Tolle.
Infine, puoi iscriverti alla nostra newsletter e riceverai anche tu contenuti interessanti direttamente nella tua casella di posta.
