Per valutare il look&feel di un progetto digitale puoi usare i mockup!
Prima di spiegare quando e perché sia importante usare i mockup, diamo una rapida definizione di questo termine.
Con mockup si intende la rappresentazione visiva di un prodotto digitale. Vediamola come un’anticipazione, un’anteprima grafica di ciò che sarà il risultato finale.
Mentre il wireframe definisce la struttura della pagina di un sito web / app o di un qualsiasi software, i mockup mostrano come questo dovrà apparire. In pratica, “vestono” i contenuti attraverso colori, immagini, tipografia e altri elementi di tipo grafico.
Di recente abbiamo parlato dell’efficacia di questi strumenti con il nostro UX Designer, Marco Iori. “Nell’ambito del processo di design, i mockup sono strumenti-chiave per la valutazione del look&feel di un prodotto”, dice Marco. “Possono essere realizzati in base ai wireframe o creati senza wireframe di riferimento. Rappresentano un prodotto nuovo o ne ridisegnano uno già esistente”.
Essendo strumenti ad “alta fedeltà”, capaci di mostrare il prodotto finale in tutti i suoi dettagli, i mockup non possono essere realizzati con schizzi a mano come i wireframe. Bisogna ricorrere a tool specifici come Adobe XD, Invision, Figma o Sketch.
Perché i mockup sono fondamentali per il look&feel di un progetto?
I wireframe sono più focalizzati sull’organizzazione dell’architettura informativa, dei contenuti e sulle possibili interazioni. I mockup, invece, si concentrano sugli aspetti grafici e su come si armonizzano nel prodotto. Ecco perché sono importantissimi per valutare il look&feel.
Marco Iori è un grande fan di questi strumenti. “Dal punto di vista comunicativo”, dice. “I mockup possono essere molto utili se si utilizzano già immagini e testi fedeli al messaggio del brand. Parliamo di contenuti significativi per il progetto. Non mi riferisco a parole generiche come il classico lorem ipsum. Un accorgimento di questo tipo aiuta moltissimo gli stakeholder coinvolti nella presentazione dei mockup a valorizzare il look&feel. Il tutto senza percepirlo come elemento a sé stante rispetto ai testi e alle immagini che verranno usate”.
Quali vantaggi presentano i mockup?
Usare i mockup offre la possibilità di confrontare diverse soluzioni grafiche per scegliere quella più adatta al progetto.
Avere diverse soluzioni realizzabili e modificabili rapidamente, da presentare agli stakeholder e a potenziali utenti finali, permette di raccogliere feedback decisivi prima dello sviluppo del prodotto e dei test. Un aspetto non da poco!
Un altro vantaggio dei mockup, utile soprattutto nei progetti particolarmente complessi, è la verifica della consistenza degli elementi grafici su tutte le pagine del prodotto. In altre parole, individuano i punti in cui l’utente potrebbe non trovare uniformità nella visualizzazione dei contenuti e nell’interazione con essi.
A quanto appena detto, Marco aggiunge un dettaglio: “I mockup consentono di fare scelte più accurate in termini di accessibilità. L’interfaccia proposta dovrebbe essere inclusiva e consentire a tutti gli utenti di capire come utilizzare il prodotto. Così facendo, si porrebbe l’attenzione sulla leggibilità dei contenuti e sul contrasto dei colori di testi, sfondi, icone, immagini e altri elementi grafici”.
E la vita dei developer si semplifica!
Per quanti riguarda i front end developer, sviluppare avendo come riferimento i mockup ha diversi grandi vantaggi:
- ci si può concentrare sul solo sviluppo, senza dover improvvisare nell’ideazione di interfacce e nel comportamento delle varie interazioni;
- si può fare affidamento su un processo di analisi solido che vede nei mockup tutti i requisiti necessari, sia per il progetto che per gli utenti coinvolti. Le richieste di chiarimento sul prodotto finale da sviluppare si riducono al minimo;
- se i mockup sono creati con tool come Figma, Adobe XD o Sketch, è possibile utilizzare una sorta di versione dei mockup per developer dove esportare tutti gli asset necessari allo sviluppo. E dove trovare tutte le caratteristiche degli elementi dell’interfaccia (colori, misure, distanze, bordi, padding etc) in linguaggio CSS. Un aspetto utilissimo, questo, per avere istruzioni precise e già codificate pronte all’uso.
Quando è meglio non usare i mockup?
A fronte dei cambiamenti che possono emergere dai confronti tra gli stakeholder, i mockup sono veloci da realizzare e semplici da modificare.
Marco, però, precisa che occorre prestare attenzione al loro obiettivo, strettamente legato al look&feel. “Non si dovrebbero usare i mockup per discutere di architettura informativa, struttura dei contenuti e interazioni tra gli elementi”, precisa. “La loro creazione, infatti, richiede più tempo rispetto a quella dei wireframe. La presenza di dettagli grafici, inoltre, non agevola un confronto più mirato su quegli aspetti come accade coi wireframe”.
In particolare, questa attenzione è decisiva per i progetti che nascono da zero o per redesign importanti.
In ogni caso, non sempre è possibile passare ogni volta per i wireframe. Nello specifico, per modifiche meno impattanti in cui l’utilizzo immediato dei mockup può risultare più efficace.
Un prodotto digitale sempre più vicino alle necessità di business.
L’utilizzo dei mockup può far collaborare efficacemente tutti gli stakeholder coinvolti nel progetto, se possibile gli utenti finali, fino agli sviluppatori che dovranno realizzare il software.
Un uso sapiente di questi strumenti permette di realizzare e affinare un prodotto digitale più vicino alle esigenze di business e dell’utente finale. Si minimizzano o si annullano i rework sugli sviluppi dopo il rilascio del prodotto, riducendo i costi.
Oltre a un vantaggio operativo, quindi, c’è un vantaggio economico: due aspetti di eguale rilievo.
Vuoi entrare ancora più nel dettaglio di questo argomento insieme a noi e a Marco Iori?
Compila il form che trovi sul nostro sito e incontriamoci, online oppure di persona, senza impegno. Insieme possiamo aumentare l’appeal dei tuoi progetti digitali e migliorare l’operatività della tua azienda.
Che ne dici di cominciare il nuovo anno nel modo migliore?
