Come Creare Wireframe ad Alta Fedeltà: Guida Completa
“Wireframing” prodotti per raccogliere feedback prima di investire nella realizzazione completa è una pratica molto più antica di quanto la maggior parte di noi pensi. Anche nei tempi medievali, gli ingegneri (se così si potevano chiamare allora) creavano versioni prototipo di strumenti e oggetti e le mostravano ai loro signori prima di avviare la produzione di massa.
Anche il mondo moderno del software ha naturalmente adottato questo processo. Tuttavia, a differenza della costruzione di una versione prototipo di un prodotto, i moderni strumenti di wireframing e prototipazione ci permettono di testare il prototipo in una fase ancora più precoce—mentre è ancora in fase di progettazione.
L’argomento di oggi è la parte più importante nella costruzione di prototipi software—il wireframe ad alta fedeltà che consente l’interattività e dà vita a un concetto.
Want more from The CPO Club?
Sign up for a free membership to complete reading this article:
Have an account? Log In
Comprendere i Wireframe ad Alta Fedeltà
Prima di spiegare cosa siano i wireframe ad alta fedeltà, lasciatemi introdurre brevemente il concetto di fedeltà del wireframe stesso.
La fedeltà si riferisce al livello di dettaglio che includi quando crei il wireframe del tuo prodotto. Può trattarsi di dettagli visivi come i colori dei componenti dell’interfaccia utente che rappresentano il tuo branding oppure le immagini che dovrebbero apparire su quella schermata (ad esempio, le foto dei prodotti nei risultati di ricerca di un sito e-commerce).
Oltre agli aspetti visivi, esiste anche la fedeltà dei contenuti. Questa si verifica quando si usano testi/contenuti segnaposto (ad esempio lorem ipsum) oppure contenuti reali (nomi prodotto e descrizioni).
A seconda della fedeltà del wireframe, potrai usare elementi visivi in scala di grigi con aspetto generico e contenuti segnaposto (bassa fedeltà) oppure uno schema colori di marca con elementi dal tuo sistema di design e contenuti reali (alta fedeltà).
Ecco come appaiono affiancati.
Anche se potresti pensare che i wireframe ad alta fedeltà siano la scelta ovvia mettendo a confronto questi due, non è sempre così. Il vantaggio dei mockup a bassa fedeltà sta nella velocità con cui puoi progettarli, testarli con gli utenti e iterare su di essi.
Quindi, nelle primissime fasi del design, in genere si esegue qualche iterazione con un wireframe a bassa fedeltà prima di passare alla creazione di uno ad alta fedeltà.
Vantaggi dei Wireframe ad Alta Fedeltà
I wireframe ad alta fedeltà, pur richiedendo più tempo per essere creati, rappresentano una parte estremamente preziosa del progetto di design poiché offrono numerosi vantaggi. Eccone alcuni:
- Migliore comunicazione: Siamo creature visive e capiamo il design meglio se vengono utilizzati colori, elementi e contenuti adeguati. Quindi è molto probabile che la stessa persona approvi un wireframe a bassa fedeltà ma sollevi dubbi e ti dia feedback quando vede per la prima volta quello ad alta fedeltà.
- Migliori test di usabilità: Migliorerai la qualità dei feedback che ricevi dagli utenti mostrando loro contenuti reali come appariranno nel design finale. Una pagina di risultati di ricerca in un wireframe a bassa fedeltà sembra una lista di scatole grigie. Non puoi sapere se gli elementi su quella pagina sono facili da scansionare fino a quando non vedi immagini e testi reali inseriti.
- Prototipazione: I prototipi cliccabili sono inutilizzabili se costruiti con wireframe low-fi. I prototipi ad alta fedeltà, invece, assomigliano molto al design finale e sono sufficientemente validi per essere condivisi con gli utenti delle prime fasi.
- Comunicazione tra team di progettazione e sviluppo: Puoi condividere i tuoi wireframe hi-fi con il tuo team di sviluppo per ricevere feedback anticipati anche sulle problematiche e sfide di implementazione. Hanno il livello di dettaglio necessario per permettere agli sviluppatori di capire come lo realizzeranno e quali problemi potrebbero potenzialmente incontrare.
Infine, i wireframe hi-fi permettono a te e ai tuoi colleghi designer di vedere aspetto e sensazioni finali del prodotto, aiutandovi a individuare incongruenze stilistiche o altri difetti visivi da correggere prima di sottoporre nuovamente l'interfaccia utente a un test con gli utenti.
Strumenti e Software per il Wireframing ad Alta Fedeltà
Mentre tecnicamente è possibile realizzare wireframe a bassa fedeltà su carta o su una lavagna, per quelli ad alta fedeltà non si può prescindere dalla scelta di uno strumento di progettazione dei prodotti specializzato.
Esaminiamo quindi alcune delle soluzioni più popolari tra cui scegliere e comprendiamo le loro funzionalità.
Figma
Figma è il leader di mercato nella progettazione di prodotti digitali, scelto da oltre il 40% di tutti gli user experience designer per prototipazione, flussi utente e wireframe.
Piattaforma: Web, Desktop (MacOS, Windows)
Dove eccelle: collaborazione in tempo reale tra designer, manager e sviluppatori, oltre al supporto su più piattaforme.
In termini di funzionalità, ecco su cosa voglio mettere in evidenza riguardo Figma:
Collaborazione: Figma consente a più membri del team di lavorare contemporaneamente sullo stesso file. Puoi vedere i cursori di tutti mentre navigano o modificano il file di design, lasciare commenti e persino chattare in tempo reale con una piccola finestra messaggi che si apre accanto al tuo cursore.
Supporto per Design System e Componenti: In Figma puoi creare componenti riutilizzabili (inclusi molteplici stati degli stessi) così come definire un intero design system seguendo le tue linee guida e componenti.
Prototipazione: Puoi trasformare i tuoi design in prototipi cliccabili che gli utenti possono navigare per capire quale sarebbe l’esperienza del tuo prodotto. Anche se non è il sistema più avanzato per la prototipazione sul mercato, resta comunque molto valido.
Sketch
Sketch era lo strumento di design di riferimento prima dell’avvento di Figma ed è una popolare alternativa a Framer e ad altri strumenti di design molto noti. Alcuni ipotizzano che la sua esclusività Mac sia tra i motivi per cui questo ottimo strumento ha perso il suo primato.
Piattaforme: macOS
Dove eccelle: Sketch è altamente personalizzabile grazie all’ampio supporto dei plugin, rendendolo un’ottima scelta per esigenze di design di nicchia.
Vediamo ora le funzionalità più significative di Sketch.
Modifica vettoriale: Rispetto agli altri, Sketch vanta probabilmente il tool di editing vettoriale più robusto sul mercato, incluso il supporto agli operatori booleani e di corrispondenza per la definizione delle forme.
Anteprima web: Anche se non è un editor completo, Sketch offre una web app per revisionare i progetti, consegnare asset agli sviluppatori e testare i prototipi.
Prototipazione: Le funzionalità di prototipazione di Sketch sono al livello di quelle di Figma. Anche qui è possibile collegare le tavole fra loro tramite flow, rendere gli elementi cliccabili e altro ancora.
Adobe XD
Questo è il software realizzato dal gigante creativo Adobe in risposta alla forte competizione nel mercato dei wireframe e del design UI/UX.
Piattaforme: macOS, Windows
Dove eccelle: Adobe XD è completamente integrato con la Creative Cloud, permettendoti di importare senza problemi design e asset da altri strumenti Adobe e molto altro.
Dopo aver sperimentato le capacità di questo strumento, ecco cos’altro vale la pena menzionare:
Prototipazione: AdobeXD spicca per la sua capacità di prototipare micro-interazioni, oltre alla suite standard di prototipazione.
Animazioni: Essendo parte dell’azienda che ha creato After Effects, non sorprende che AdobeXD offra funzionalità avanzate per l’animazione degli elementi UI.
Collaborazione: Pur non essendo ai livelli di Figma, AdobeXD consente comunque a più persone di modificare contemporaneamente il progetto.
Axure RP
Mentre gli altri erano strumenti generali di UI/UX che offrivano anche wireframe e prototipi, questo è particolarmente focalizzato proprio su questi ultimi.
Piattaforme: macOS, Windows
Dove eccelle: Essendo uno strumento specializzato, Axure RP permette una prototipazione avanzata con interazioni e percorsi utente complessi.
Ora, diamo un'occhiata alle funzionalità incluse in questo strumento:
Logica avanzata: Invece del semplice “clicca per aprire la tavola successiva”, Axure RP permette di inserire logiche complesse nei prototipi. Ciò significa che puoi aprire i menu e selezionare elementi, e il design e i contenuti si trasformeranno dinamicamente in base alla selezione o ad altre azioni simili.
Documentazione di handover: Sebbene quasi tutti i prodotti qui menzionati prevedano la consegna agli sviluppatori, Axure RP è l’opzione che consente di creare una documentazione molto dettagliata che descrive il design e la logica.
Diagrammi di flusso: Oltre a progettare il wireframe ad alta fedeltà, puoi usare Axure RP anche per creare diagrammi di flusso che spiegano il percorso utente e la logica di business dietro il tuo design.
In sintesi, non esiste un vero vincitore tra i “migliori strumenti di wireframing ad alta fedeltà”. Gli strumenti elencati qui, così come quelli presenti nella nostra selezione di strumenti UX design, hanno punti di forza e di debolezza. La scelta dipende quindi dalle tue preferenze e dagli aspetti più rilevanti per te e per il tuo team.
Best practice per la creazione di wireframe ad alta fedeltà
Quando infine arrivi al punto del processo di design in cui è arrivato il momento di sviluppare questo tipo di wireframe, segui questi suggerimenti per ottenere il massimo valore dal tuo mockup hi-fi.
Best practice per il processo di wireframing
- Assicurati che la tua user persona sia aggiornata. Avrai già una versione di persona che hai usato per creare il primo design a bassa fedeltà. Tuttavia, molto probabilmente questa persona sarà obsoleta, dal momento che avrai già effettuato alcune iterazioni di test con lei e scoperto nuovi aspetti della sua personalità e dei suoi bisogni.
- Rivedi tutti i feedback degli utenti precedenti prima di iniziare il wireframe ad alta fedeltà. Probabilmente c’erano feedback ricevuti dagli utenti che hanno visionato la versione lo-fi che allora ritenevi irrilevanti, ma che ora possono diventare fondamentali.
- Non esiste la "versione finale" di un wireframe. Non fossilizzarti troppo sui dettagli. Invece di lavorare settimane sul wireframe dettagliato, apporta qualche modifica e testalo subito. Più breve sarà il ciclo in cui il tuo team aggiunge idee di design e l’utente le testa, più rapidamente raggiungerai il punto in cui il wireframe sarà pronto per diventare il design definitivo.
- Sfrutta i componenti e i template del tuo design system. Non c’è nessun premio per chi parte da zero! Usare questi template ti fa risparmiare molto tempo e il risultato si avvicinerà il più possibile al design finale.
Suggerimenti per il design dei wireframe
Oltre ai consigli precedenti su come gestire in maniera efficace il processo di design, ecco alcuni suggerimenti relativi alla progettazione vera e propria.
- Mantieni il design coerente. Anche se è ancora un wireframe e non il design finale, ti consiglio comunque di mantenere tutto coerente, inclusi colori, tipografia e spazi bianchi. Così facendo garantirai che chi testa il design non abbia problemi di usabilità inutili che possano influenzare i feedback.
- Mantieni la gerarchia visiva. Tecnicamente dovrebbe essere già presente anche nella versione lo-fi. Ma se non lo è, aggiungila qui. Potrai poi usare i tuoi wireframe ad alta fedeltà per testare l'efficacia della gerarchia visiva.
- Aggiungi elementi di accessibilità al tuo design. I wireframe hi-fi sono anche ottimi strumenti per testare l’accessibilità del design. Quindi assicurati di impostare i giusti livelli di contrasto tra elementi sovrapposti e di tenere conto anche di altri aspetti dell’accessibilità.
Infine, non dimenticare di fornire indicazioni visive agli utenti che testano il design. Ciò è particolarmente importante quando si testa solo una parte del design del prodotto e mancano schermate o passaggi. Per evitare confusione negli utenti, assicurati di mostrare delle note che spieghino in quale punto del percorso si trovano in quel momento e cosa devono fare.
Tecniche avanzate per wireframe ad alta fedeltà
Le best practice descritte sopra ti permetteranno di ottenere una versione “abbastanza buona” del tuo wireframe hi-fi. Tuttavia, se vuoi realizzare qualcosa di straordinario, considera l'utilizzo di queste tecniche avanzate.
Wireframe interattivi
Alcuni popolari strumenti di wireframing includono funzionalità di prototipazione integrate. Quindi, perché non approfittarne e dare vita al tuo wireframe? Puoi rendere cliccabili gli elementi della UI e permettere agli utenti di navigare da una schermata all'altra, simulando il percorso che avranno sull'app reale. Ti consiglio di aggiungere transizioni animate che rendano il cambiamento di pagina o schermata più evidente ai tuoi utenti.
Puoi anche aggiungere animazioni e transizioni a diversi elementi della tua app mobile o del design web e verificare se aiutano i tuoi utenti a notare un determinato elemento sulla schermata o a interagire con esso come desiderato.
Elementi di Design Visivo
Per aiutare il tuo wireframe ad alta fedeltà a rappresentare correttamente il prodotto e il brand, puoi anche considerare di incorporare quanto segue se:
- Tipografia: I font, la spaziatura e i colori del testo secondo le linee guida di design.
- Branding: Il tuo logo, i colori del brand e le risorse visive che rappresentano il tuo marchio.
- Contenuto reale: Invece di inserire lorem ipsum dove dovrebbe esserci una descrizione prodotto nel design della tua app eCommerce, scrivi una vera descrizione prodotto.
- Risorse visive reali: Se ci sono illustrazioni o immagini che prevedi di inserire sulle tue schermate, aggiungile anche tu.
- Sfumature e ombre: Rendi così il wireframe più realistico e aggiungi un livello di gerarchia visiva o interazione.
Nota: Per quanto riguarda l'evidenziare le interazioni con le ombre, il material design di Google è il migliore. Utilizza le ombre per mostrare la profondità e indicare all'utente se un elemento è in hover, cliccato o inattivo.
Suggerimenti per la Collaborazione di Team
Sia prototipazione che wireframing non sono mai lavori per una sola persona. Li realizzi insieme al tuo team di design, facendo brainstorming col product manager oppure discutendone con gli stakeholder.
Per facilitare la collaborazione e il processo di sviluppo sui tuoi progetti, ti suggerisco di adottare queste pratiche:
- Organizza sessioni di brainstorming regolari. Invita il product manager e altri designer. Anche un ingegnere, che potrà aiutarti a scegliere la soluzione tecnicamente più solida. La parola chiave è regolari: può essere ogni settimana, ogni due oppure meno spesso. Ma è importante effettuare sempre questi incontri perché aiutano a trovare soluzioni interessanti ai problemi di design.
- Effettua revisioni di design regolari. Se lavori in un team, condividi il design per una revisione incrociata e lascia che più persone ci diano uno sguardo fresco per trovare problemi che potresti aver mancato. Questo processo aumenta notevolmente la qualità del design e ne aiuta la coerenza.
- Documenta pensieri e commenti. Aggiungi annotazioni e commenti al design per spiegare alcune delle scelte fatte o fornire contesto ai tuoi colleghi.
Infine, assicurati che ciò che sviluppi sia in linea con la strategia e la visione di prodotto dell’azienda. Quindi, confrontati su questo con il tuo team di prodotto e la leadership.
Testa il tuo design come se fosse quello reale.
Probabilmente il singolo vantaggio più importante dei wireframe ad alta fedeltà è la loro capacità di presentare il prodotto più vicino possibile alla versione finale. In questo modo, gli utenti possono testare la rappresentazione visiva del prodotto senza che tu debba costruirne uno reale.
Quindi, ti incoraggio vivamente ad adottare il processo di wireframing e a usarlo per testare il tuo design e le tue ipotesi nel flusso di lavoro di design. Spero di averti dato abbastanza contesto e consigli utili per sfruttarlo al meglio.
Se vuoi approfondire questo argomento, ti suggerisco di leggere la guida completa al wireframing. In alternativa, puoi anche iscriverti alla nostra newsletter per altre risorse e guide sulla product management.
