Design System as a Language
“Styles come and go. Good design is a language, not a style”.
– Massimo Vignelli
Scenario
Immaginate un team di designer impegnato nella progettazione UX/UI di un prodotto digitale pensato per essere utilizzato da un numero imprecisato di utenti, in un numero indefinito di contesti, con una molteplicità di dispositivi su più canali. Ora sommiamo all’equazione il fatto che ormai questi utenti siano abituati a passare con estrema facilità da una pagina web, magari su un computer desktop, ad un’applicazione mobile, da uno smartphone ad una smart TV passando per un tablet o uno smartwatch.
Cosa otteniamo?
Uno scenario potenzialmente apocalittico dal lato progettuale che può concretizzarsi in un prodotto inconsistente e scoordinato per quanto riguarda l’esperienza dell’utente. Quanto appena descritto non è frutto della mente visionaria di un regista di film sci-fi ma è ormai uno standard con delle complessità crescenti ed in continua evoluzione. Diventa quindi sempre più importante e complesso riuscire a mantenere coerenza e uniformità tra i prodotti digitali nei diversi canali e la moltitudine di device che utilizziamo ogni giorno per fruire di tali prodotti. Un solido Design System può essere la riposta a questa complessità.
Perché? Facciamo 2 passi indietro.
Cos’è un Design System?
Un Design System è un insieme di componenti riutilizzabili, disciplinati da linee guida chiare, che possono essere assemblati insieme per costruire componenti e applicazioni più complesse (grazie wikipedia).
Si ok, tutto molto figo, ma cosa cambia rispetto ad una classica libreria di componenti UI?
Proviamo ad immaginare una libreria di componenti come ad una grande scatola di Lego (avete presente i Lego? No?!! Allora avete avuto una brutta infanzia). Ecco, i mattoncini Lego sono tutti coerenti tra di loro, ovvero possono essere assemblati in infinite combinazioni, mixando forme e colori. Questo non vuol dire che i risultati di questi assemblaggi siano sensati e coerenti.
Questo esempio banale ci fa capire che in una scatola di Lego (leggi libreria di componenti) manca un elemento fondamentale, ovvero una guida che ci indichi il perché assemblare i nostri mattoncini seguendo una determinata logica, ci mostri quali siano gli standard di assemblaggio e come e quando usare e combinare i vari mattoncini. In buona sostanza stiamo parlando di un linguaggio condiviso che faciliti la comprensione del come e del perché.
Questo linguaggio deve essere disciplinato da solide fondamenta a livello di branding, di graphic e visual design e di product.
A livello di Brand devono essere chiari i valori culturali, il tono di voce, la vision e la reason why su cui si fonda l’esistenza stessa dell’azienda.
A livello di visual design, devono essere delineati tutti gli elementi riguardanti l’immaginario visivo del brand, ad esempio: logo, colori, tipografia, forme, dimensioni e spazi, superfici ed elementi visivi a supporto del marchio.
Infine a livello di product è indispensabile definire e razionalizzare elementi come:
- UI components, ad esempio: bottoni, form, griglie, liste, controlli, menù, slider, tabs, campi di input.
- Layout systems per i diversi utilizzi, responsive o adaptive.
- Interaction design come ad esempio navigation flow o modelli di interazione.
- Animazioni e comportamento dei componenti.
Questo materiale, documentato e condiviso con team e stakeholders, rappresenta il Design System.
Perché abbiamo bisogno di un linguaggio condiviso?
Ci sono due modi di rispondere a questa domanda da due prospettive diverse: una interna al Brand, l’altra esterna.
Interno
L‘adozione di un linguaggio condiviso ci aiuta a creare una prospettiva olistica, permettendoci di essere certi che il lavoro di un singolo designer rimanga coerente con quello del team, risultato, questo, garantito dall’adozione di modelli e metodologie comuni. L’obiettivo principale dell’adozione di un linguaggio univoco è quello di creare chiarezza e agevolare la comunicazione tra i membri del team.
Esterno
Sviluppare un linguaggio visivo chiaro crea armonia all’interno del nostro ecostistema digitale in tutti i suoi punti di contatto. Per gli utenti i colori, le interazioni e i modelli standardizzati creano un senso di familiarità e sicurezza, ovvero la chiave per una User Experience gratificante.
“Comprendere non solo il cosa, ma anche il perché, dietro la progettazione di un sistema è fondamentale per creare un’eccezionale esperienza utente. Definire e rispettare gli standard è il modo in cui creiamo questa comprensione”.
_Marco Suarez
Il caso Spotify.
Come abbiamo detto prima, ormai i punti di contatto (leggi touchpoint) tra utente e brand sono molteplici e tendono ad aumentare sempre di più. Contesti d’uso, device e canali sono in continua crescita.
Prendiamo come esempio Spotify, forse il più popolare servizio di streaming musicale al mondo. Nel 2008, anno del suo lancio, Spotify funzionava solo su dispositivi mobile Apple. Oggi possiamo utilizzare Spotify sul nostro telefono (iOS o Android), su uno smartwatch, sulla nostra console, su uno smart speaker, in auto, sul nostro computer desktop, sul laptop o sul tablet, passando da un device all’altro, in momenti e situazioni diversi.
Ne consegue che ad un certo punto della storia di Spotify sia sorta la necessità di far coincidere il bisogno di riconoscibilità e di coerenza visiva con la necessità di avere la stessa esperienza su piattaforme diverse utilizzando dei componenti content-first.
Tali componenti non sono customizzati singolarmente, bensì scalano su tutti i device adattandosi al contenuto che coincide anche con il business principale ovvero la fruizione di contenuti audio.
Spotify nel 2014 ha creato GLUE (Global Language for a Unified Experience) il suo Design System, dedicando al suo sviluppo ed aggiornamento costante un team di designer e developers.
GLUE Story: https://medium.com/@hellostanley/design-doesnt-scale-4d81e12cbc3e
Scalabilità
Abbiamo parlato di scalabilità, ma un momento, un momento, un momento, cosa intendiamo con scalabilità?! Partiamo dalla definizione di scalabilità (ri-grazie wikipedia).
La scalabilità è la capacità di un sistema di aumentare o diminuire di scala in funzione delle necessità e disponibilità. Un sistema che gode di questa proprietà viene detto scalabile.
“Empty your mind, be formless, shapeless — like water. Now you put water in a cup, it becomes the cup; You put water into a bottle it becomes the bottle; You put it in a teapot it becomes the teapot. Now water can flow or it can crash. Be water, my friend.
_Bruce Lee
Tradotto, la scalabilità di un sistema è la capacita dello stesso di adattarsi in maniera flessibile a diversi contesti senza perdere funzionalità e utilizzabilità.
La scalabilità è il valore primario di un Design System e questa sua caratteristica ci consente di creare prodotti migliori e riutilizzabili, ma non è l’unico beneficio derivante dall’adozione di un Design System.
I Benefici di un Design System
L’adozione di un Design System ha un impatto positivo su più livelli riguardanti Brand, Users e Team.
Brand
L’adozione di un Design System aumenta la coerenza e la consistenza del brand: questo grazie ad un tone of voice e ad un linguaggio visivo ben definito, chiaro e ben documentato. Una forte personalità del marchio nei suoi elementi grafici permetterà un’immediata riconoscibilità dello stesso su qualsiasi touchpoint e anche in assenza del logo.
User
Un altro beneficio è individuabile in una maggiore chiarezza e semplicità per l’utente, scaturite dall’utilizzo di pattern comuni di navigazione presenti in maniera coerente in tutta la User Experience: tutto questo faciliterà la curva di apprendimento dell’utente che riuscirà così ad orientarsi e a familiarizzare più velocemente con tutti gli elementi dell’ecosistema digitale, anche nel caso di passaggio tra diversi device.
Team & Stakeholders
Avere un vocabolario condiviso facilita la collaborazione tra team e cliente e tra i componenti dello stesso team: lavorare su un set di elementi condivisi migliora infatti l’allineamento dei collaboratori e il focus di tutte le figure coinvolte nel progetto. Inoltre, avere un repository di componenti riutilizzabili aumenta l’efficienza, evitando dispersioni di tempo provocate da continue rielaborazioni grafiche permettendo così una notevole riduzione del time to market e di guadagnare inoltre spazio utile per lo sviluppo di nuovi progetti.
Da dove iniziare?
Proviamo a definire in maniera macroscopica quali siano gli step che dobbiamo affrontare per strutturare un Design System.
1. Fai un Visual Audit
Il primo passo nella costruzione di un Design System è quello di fare un visual audit del progetto nel suo stato attuale: stiamo ragionando in astratto e questo approccio è valido sia che si tratti della progettazione di un’applicazione, di un sito web o di qualsiasi altro prodotto digitale.
Fare un visual audit ci aiuterà a svolgere una prima valutazione qualitativa sullo stato delle cose e su quanto potrebbe essere impegnativo strutturare il processo di sviluppo del Design System, inoltre orienterà le nostre scelte relative alla definizione del linguaggio visivo da adottare.
2. Definisci un Linguaggio Visivo
Il Linguaggio Visivo, cuore del Design System e costituito da componenti riconoscibili che saranno utilizzati per la costruzione del prodotto digitale, si compone di 4 categorie principali:
- Colori
- Tipografia
- Dimensioni e spazi
- Immagini
3. Crea una libreria di componenti
Il passo successivo consiste nella creazione di una libreria di componenti visuali, costruita seguendo i principi dell’Atomic Design, ossia partendo dagli elementi più piccoli di design — come i bottoni — per arrivare a costruire intere strutture di layout.
4. Documenta il funzionamento di ogni singolo componente
L’utilizzo coerente di queste componenti deve essere garantito da una solida base documentale.
Probabilmente questo è lo step più importante perché, come abbiamo detto all’inizio di questo articolo (ricordate i Lego?), la documentazione, le regole e gli standard sono gli elementi che differenziano un Design System da una qualsiasi libreria di componenti.
Takeaway
La mia personale Design System Top 5:
Inoltre, se vuoi approfondire questo tema ti consiglio di leggere anche questo interessante articolo: How to: measure a Design System’s impact
atoms: we design for humans
Fonti
