In questa lezione, vedremo alcuni strumenti che facilitano il passaggio dalla fase di UX Design, intesa quindi come progettazione, alla fase di UI design. In particolare, vedremo insieme cosa sono e a cosa servono le style tiles e le mood boards.
Da UX a UI design
L’idea alla base dell’intero processo è la volontà di separare il layout, di cui si occupano i wireframe, dall’estetica, di cui si occupano i mockups.
Una volta prodotti i wireframe e gli eventuali prototipi, si passa alla fase di UI design, ossia alla realizzazione grafica dell’interfaccia.
Nel nostro caso, ciò può essere fatto senza problemi, poiché non abbiamo un cliente esterno e saremo noi stessi ad “approvare” il visual.
In ambito lavorativo e commerciale, in genere le proposte grafiche vanno sottoposte al cliente per l’approvazione.
Questo processo comporta normalmente la creazione di più di una proposta, e vari “round” di modifiche dell’interfaccia fino alla (quasi mai) completa soddisfazione del nostro committente.
Per quanto il wireframe possa aiutare moltissimo noi designer a gettare le basi del sito e fornirci spunti per la parte grafica successiva, il cliente non è in grado con esso di immaginare come apparirà l’interfaccia del prodotto finale.
Quando si presentano i mockups, c’è una sorta di convinzione da parte del cliente di avere davanti il prodotto finale e per questo a volte vengono forniti feedback inerenti aspetti assolutamente prematuri. Vedere la grafica del sito può dare adito “troppo presto” ad una serie di osservazioni, commenti, aspettative e congetture circa il prodotto finale.
Questo rischia di spostare il focus lontano dallo scopo primario dell’interfaccia grafica nella sua fase iniziale, ossia la definizione dello stile grafico del sito.
Per facilitare questa fase di transizione dallo strutturale (layout) al visuale (estetica) ci si può avvalere di style tiles e mood boards.
Style tiles
La style tile è un prodotto di design che propone elementi dell’interfaccia di un sito in termini di caratteri, colori e stili. La style tile è consegnabile al cliente e getta le basi per una discussione circa le sue preferenze visuali. Come accade per i campioni di materiali o tinte per una casa, essa mostra delle opzioni da far scegliere al cliente per definire insieme a lui un linguaggio visivo comune.
La style tile contiene “campioni di stili” della user interface e serve al designer per creare l’identità visiva del brand sul web. Poiché si tratta di trasporre visivamente il brand del cliente, per farlo è necessario lavorare insieme.
Natura collaborativa
La caratteristica fondamentale delle style tiles è la loro natura collaborativa. Mentre con i mockup presentiamo al cliente un prodotto finito e definito da noi, con le style tiles cerchiamo di discutere ed individuare insieme le sue preferenze ed i suoi obiettivi.
Questo approccio tiene il cliente all’interno del processo di design e rende le scelte non solo condivise ma soprattutto “guidate” dalle sue aspettative ed emozioni.
Lo scopo di questa collaborazione è creare un linguaggio visivo in grado di esprimere ciò che il brand vuole comunicare e trasmettere al mondo esterno.
Per farlo, è necessario interagire con il cliente, tramite incontri o questionari, chiedendo ad esempio quali aggettivi rappresentano il sito, se c’è qualche sito/brand di riferimento, ecc...
Come nelle altre discipline del mondo UX, il processo è iterativo ed incrementale. basato sull’interazione e sui feedback.
Il sito di riferimento per conoscere e creare le style tiles è styletil.es.
Responsive design
Il responsive design ha cambiato l’approccio alla progettazione delle interfacce web. Larghezze in pixel e dimensioni fisse dei layout non hanno più lo stesso significato di qualche anno fa. Dal momento che è impossibile creare i visual per tutte le larghezze di schermi e dispositivi, è molto importante fissare gli stili di riferimento per la progettazione responsiva del sito.
Le style tiles tracciano le aspettative del cliente e/o degli stakeholders, e comunicano il tema visivo anche ai membri del team coinvolti nel progetto, fungendo quindi anche da documentazione di riferimento del linguaggio visivo scelto per il prodotto.
Piuttosto che definire il design di una singola pagina (ad una specifica risoluzione) le style tiles contribuiscono a definire un solido design system (sistema di design).
A partire da uno stile condiviso approvato dal cliente, è possibile costruire i mockup e gli altri asset visivi come style guides di componenti.
Le style guide infatti, molto apprezzate e diffuse negli ultimi anni, contengono stili ben definiti ed implementati, e sono la naturale evoluzione delle style tiles.
Mood boards
La mood board, letteralmente “tavola di umore”, è un altro artefatto di UX che aiuta il designer a definire un progetto di comunicazione visiva. In particolare, si può considerare come un collage o un insieme di sketch, wireframe, immagini, screenshot, schemi colore, texture, tipografia ed altre ispirazioni utili a definire ed esprimere visivamente il concept o appunto il “mood” di prodotto. Se la style tile si occupa principalmente di linguaggio e stile, la mood board si occupa di esprimere emozioni e concept. Se pensiamo al termine molto usato nel mondo del design “look & feel”, la style tile rappresenta il look, mentre la mood board è il feel.
La mood board ha quindi un carattere ispirazionale, ed è fortemente comunicativa piuttosto che descrittiva.
Essa viene normalmente condivisa con il cliente per costruire insieme una visione comune del prodotto a livello estetico e comunicativo.
Anche quando non si crea una vera mood board da consegnare al cliente, l’idea di fondo spesso viene messa in pratica dal designer in autonomia raccogliendo wireframe, immagini, colori, texture e tipografia come ispirazioni.