Il wireframe è uno strumento semplice e inclusivo per la creazione di prodotti digitali human-centered.
Continuano i nostri approfondimenti nel campo del Graphic Design e del Design Thinking.
Di recente abbiamo parlato dell’importanza di prototipi e mockup in fase di progettazione. Oggi, invece, affrontiamo un altro tema, quello del wireframe. Sai di cosa si tratta?
Il wireframe è uno strumento che consente un confronto efficace sul design di un prodotto digitale, e non solo. Permette a tutte le persone coinvolte in un progetto di esprimersi e scambiare idee.
In pratica, esso rappresenta la struttura di un sito web, di un’app, di un programma, ecc. Al suo interno contiene i dettagli minimi per rendere comprensibile il risultato finale, ma senza entrare troppo nei dettagli.
Il wireframe anticipa lo sviluppo grafico e tecnologico mostrando il layout, gli elementi e la loro interazione all’interno del prodotto. Tutti fattori, questi, che concorrono alla validazione delle scelte progettuali.
Un’importante sua caratteristica è l’assenza ad ogni riferimento alla grafica come, ad esempio, i colori (di solito sono in bianco o nero o in scala di grigi o blu), la tipografia e le immagini.
Ne esistono di diverse categorie, ciascuna con caratteristiche precise.
Abbiamo due tipi di wireframe: a bassa e ad alta definizione.
I primi sono i più semplici. Gli elementi del layout sono dati da forme-base come quadrati, triangoli, cerchi e linee. Di solito sono in bianco e nero, focalizzati sulle interazioni più di alto livello dell’utente con gli elementi della pagina. I testi non sono riportati, ma indicati come semplice ingombro.
I wireframe ad alta fedeltà, invece, introducono elementi visuali più legati al brand. Sono maggiormente realistici. Questo avviene grazie a un maggior uso dei colori (senza però rappresentare quelli scelti per il prodotto finale), dei font, di icone, immagini, texture e ombreggiature. Si può far ricorso ai testi per contestualizzare meglio la pagina.
Nell’uno o nell’altro tipo, possono essere inserite brevi note per spiegare meglio l’interazione dell’utente con gli elementi e la validazione di aspetti legati all’analisi.
Di solito si inseriscono bollini numerati all’interno del wireframe, nei punti oggetto dell’interazione. In questo modo si può riprenderli con una descrizione più dettagliata in un’area dedicata di fianco al wireframe di riferimento.
E i wireflow, cosa sono?
I singoli wireframe rappresentano agilmente i flussi utente delle varie parti di un’applicazione. Ad esempio affiancando tutte le schermate descritte da ciascun wireframe, collegandole con frecce e mettendo in evidenza gli elementi oggetto delle interazioni stesse. Così facendo si può avere una visione chiara e completa dell’esperienza utente.
Un ulteriore esempio potrebbe essere la descrizione di un flusso utente riguardante una procedura di registrazione a un sito, un login, un processo di acquisto o la configurazione di un servizio.
I wireframe così utilizzati vengono chiamati wireflow.
Esistono tanti tool per creare wireframe e wireflow. Tra i più utilizzati ci sono Adobe XD, Sketch, Figma e Balsamiq Mockup.
I wireframe, specie quelli a bassa fedeltà, possono essere realizzati in poco tempo anche a mano.
A chi si rivolge, un wireframe, e quali vantaggi apporta?
I wireframe possono rivolgersi a diversi stakeholder:
- in primo luogo ai clienti, che possono verificare come i contenuti, gli obiettivi di business e le interazioni dei loro utenti caratterizzino il prodotto;
- ai visual designer, che possono farsi un’idea degli elementi che rappresenteranno l’interfaccia;
- agli sviluppatori, per rendersi conto di come il sito o l’app funzioneranno e quali interazioni dovranno supportare;
- ai copywriter, che potranno capire cosa scrivere, in quali spazi e secondo quale sinergia tra le varie pagine.
Per tutte queste figure ci sono diversi vantaggi:
- si può immaginare il prodotto finale, grazie anche alla struttura rappresentata dalle singole pagine o dai wireflow, e averne un’idea d’insieme;
- si possono verificare alcuni aspetti dell’architettura informativa come navigazione, menu, descrizioni degli elementi di una pagina, e come tutto ciò sia in relazione;
- si può effettuare una realizzazione molto rapida ed economica per velocizzare il confronto tra gli stakeholder e per affinare il concept.
Perché ha senso ricorrere ai wireframe?
In linea generale, questi strumenti digitali incoraggiano le persone a migliorare il prodotto facendo leva su questi fattori specifici:
- aiutano a capire meglio i problemi, specie in riferimento ai requisiti di business espressi nell’analisi iniziale. Anticipano soluzioni in una fase di progetto non ancora avanzata in termini di sviluppo;
- favoriscono l’empatia con le persone che utilizzeranno il prodotto. Questo perché spingono gli stakeholder a concentrarsi sulle esigenze e sui bisogni degli utenti;
- mostrano soluzioni che prima non si erano pensate, e per una serie di motivi. L’assenza di elementi grafici definiti, la mancanza di dettagli e la presenza di un prodotto work in progress anziché finito fa ragionare di più sugli aspetti che contano davvero. In altre parole, si riflette di più sulle caratteristiche funzionali e meno su quelle estetiche.
Oltre all’inclusività, quindi, un wireframe presenta diverse responsabilità e background. Il suo utilizzo apre la strada a un dialogo condiviso. Non da ultimo, contribuisce allo sviluppo di un prodotto human-centered prima di essere “graficato” e, successivamente, realizzato.
