Introduzione allo UI Design

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.