Questa seconda parte della guida è dedicata alla User Interface. Lo UI
design rientra sempre all’interno della User Experience, ma ha un focus più
operativo e fa parte della fase di produzione del processo UX.
Metteremo in pratica alcuni dei concetti appresi finora, e utilizzeremo i
wireframes prodotti per
creare l’interfaccia utente del nostro sito.
La UI è strettamente legata, oltre che alla UX, ad altre discipline come la
comunicazione visiva, la semiotica, l’estetica e la grafica in generale.
Questi argomenti non saranno oggetto della guida, ma verranno introdotti
quando saranno funzionali alla creazione della grafica del sito.
Obiettivi
Lo scopo finale di questa fase di UI design è produrre i mockups grafici.
Per farlo, in primis prepareremo il lavoro decidendo il concept e lo stile
comunicativo che vogliamo adottare, prendendo anche spunto ed ispirazione
da siti già esistenti.
Definiremo gli stili scegliendo le risorse grafiche (font, colori, icone) e
le loro caratteristiche (dimensioni, corpo, interlinea, codici colore).
Questi stili principali ci serviranno per connotare graficamente gli
elementi nel mockup.
A livello di layout e contenuti creeremo con maggiore livello di dettaglio
ciò che è stato definito nei wireframes. Metteremo la veste grafica ai
wireframes, e passeremo da una bozza del sito alla vera e propria versione
statica graficamente ad alta fedeltà.
Produrremo quindi il visual, creando ed organizzando graficamente il corpo e
gli elementi della pagina. Nel farlo, vedremo un po’ di regole legate alla
progettazione grafica e di accorgimenti per il responsive design. I visual
che produrremo saranno sia per desktop che per mobile, e durante la loro
realizzazione valuteremo se dovesse essere necessario crearli anche per risoluzioni
tablet.
Per realizzare i mockups useremo varie risorse, ma poiché si tratta di una
fase produttiva, lo strumento più importante sarà il software di editing
grafico.
Al contrario dell’approccio essenziale e veloce alla creazione dei
wireframes, la produzione dei mockup richiede tempo, grande precisione e
cura dei dettagli nel creare e caratterizzare graficamente l’interfaccia in
tutti i suoi aspetti ed elementi. Creatività e gusto estetico
caratterizzeranno questa fase del progetto, che tipicamente non è
collaborativa nella produzione, ma lo diventa nella condivisione e raccolta
di feedback.
Ciò che verrà prodotto in questa fase sarà la versione “definitiva” (dal punto di vista visuale) del prodotto, nonché il punto di riferimento per la successiva
fase di sviluppo della UI.
A cosa serve lo UI Design?
È lecito quindi chiedersi a cosa serve questa fase di UI Design. Di seguito riassumiamo i punti salienti.
Acquisire capacità
Lo UI Design permette di portare avanti il lavoro di progettazione e creazione del sito, acquisendo
le competenze necessarie per mettere le mani sulla veste grafica. Dover
creare la UI “costringe” per certi versi a riflettere sul mood e
sull'identità del prodotto e su come vogliamo che appaia all’utente finale.
Rispetto a scaricare dei templates già pronti, la capacità di creare in
autonomia l’interfaccia consente di dar vita ad un prodotto stilisticamente
personalizzato.
Caratterizzare il prodotto
Questa fase è cruciale perché disegnare l’interfaccia significa disegnare
il prodotto e costruire l’identità del brand. L’interfaccia è lo strumento
che permette all’utente di usare il prodotto e la sua grafica è il look, il
bigliettino da visita.
Nel nostro caso, il portfolio deve “esprimere” noi stessi, quindi sarà
importante che la grafica rifletta in qualche modo i nostri gusti e la
nostra personalità.
Creare una buona User Experience
La UI contribuisce in maniera molto rilevante alla User Experience ed è tra
i fattori principali che concorrono a creare un feeling positivo
nell’utente nei confronti del prodotto. L’esperienza utente è tanto più
positiva quanto maggiore è la gradevolezza estetica del sistema con cui si
interfaccia. Tutti amiamo le cose belle, non scordiamoci infatti che ciò
che fa vendere di più un prodotto è spesso il suo design.
Guidare lo sviluppo e testare il prodotto
Creare dei mockups ben realizzati e sulla base di wireframes ragionati è
fondamentale anche per guidare la fase di sviluppo verso il risultato
visivo che loro stessi definiscono.
Inoltre, disegnare i mockups abilita alla creazione di prototipi interattivi
e alla realizzazione di user tests in grado di sperimentare l’efficacia e
il gradimento della UI con largo anticipo rispetto allo sviluppo tecnico (e
con relativa riduzione dei costi).
Anche se a noi non servirà, la condivisione dei mockups è un momento
importante per raccogliere feedback e costruire la visione condivisa di un
prodotto.