La realizzazione di wireframe e mockup è essenziale nella progettazione di un software. Per quanto accurati siano i documenti che realizziamo nelle varie fasi del processo UX, possiamo trasmettere con forza l'idea che abbiamo nella nostra testa solo quando riusciamo a fornire al cliente e agli utenti i primi output visivi.

I prodotti che realizziamo, sebbene digitali, sono usati nel mondo reale e pertanto soggetti ad una valutazione sensoriale. Vedere e "toccare" con mano un mockup, cartaceo o digitale, a bassa o ad alta fedeltà, consente ancora una volta di discutere riguardo le proposte, esprimere opinioni, ideare, testare, formulare nuove ipotesi che ci consentono di aggiungere valore al prodotto.

Sketching

La realizzazione di bozze grafiche è il primo modo che abbiamo per imprimere a livello visivo le idee e i requisiti raccolti.

Uno sketch deve risultare chiaro e comprensibile poiché è uno strumento che verrà utilizzato principalmente a scopo di test. Deve inoltre essere:

• Rapido, deve essere realizzato in poco tempo.
• Minimalista, nero su bianco, non deve presentare immagini e dettagli superflui.
• Completo, dobbiamo realizzare le bozze di tutte le schermate importanti del MVP.
• Esplorabile, deve essere presentabile ad altre persone per discussioni e critiche.

Carta vs Digitale

Il disegno a mano libera è di fondamentale importanza per il designer, mette in atto processi di brainstorming che difficilmente riusciamo a replicare tramite il disegno digitale. Ci consente di liberare la mente e utilizzare una quantità di strumenti il cui limite è dato unicamente dalla nostra immaginazione.

Le iterazioni su carta ovviamente risulteranno più difficoltose, se cambiamo idea nel mezzo del procedimento, non potremo semplicemente modificare tutto ciò che abbiamo realizzato, ma dovremmo in gran parte dei casi ricominciare da capo; lo stesso discorso vale se vogliamo realizzare più varianti di uno sketch. Pertanto non appena siamo certi di aver validato i punti principali sarà il caso di passare alla versione digitale della nostra bozza.

Tools

Possiamo utilizzare per la realizzazione di sketch software come balsamiq.

Wireframing

Un wireframe oltre ad essere uno strumento utile ai fini della comunicazione dell'idea ad un livello di dettaglio più avanzato, ci consente di estrapolare flussi e componenti del progetto da portare in fase di sviluppo.

Wireframe lo-fi

E' privo di dettagli relativi al design visivo e ai contenuti, serve come strumento da utilizzare per continuare a validare i requisiti del progetto senza alcun elemento che possa distogliere l’attenzione dalla struttura e dai flussi del prodotto che stiamo progettando. Alcune regole ulteriori:

• Non utilizzare colori e immagini.
• Utilizzare una font leggibile e conosciuta, adoperando pochi stili per distinguere i titoli e i testi principali.
• Porre l'accento sulla struttura e sulle funzionalità.

Wireframe hi-fi

Include informazioni addizionali riguardo gli elementi presenti sulla pagina e caratteristiche visive, come dimensioni, colori, immagini. Fornisce una rappresentazione dei layer di come apparirebbero sul prodotto finale.

Tools

Di seguito alcuni dei principali software di design che ci consentono di creare in maniera agevole dei wireframe professionali:

• Sketch
• Figma
• Adobe XD)

Caso di Studio: EZ Makeover

L'applicazione fa parte di una serie di portali inerenti alla ristrutturazione, alla vendita e all'affitto di appartamenti e case.

Inizialmente ci era stato commissionato unicamente lo sviluppo del portale e ci erano stati presentati dei mockup che erano stati disegnati pensando esclusivamente alla componente visiva del progetto e che presentavano diversi problemi di inconsistenza dell'interfaccia e svariate differenze rispetto agli altri siti web dell'azienda.

Abbiamo sollevato tale problematica al cliente che si è reso immediatamente disponibile ad avviare uno studio UX completo sul progetto, soprattutto per uniformare le varie web-app con un unico Design System.