Design Language System, perché è necessario
Il problema
Che si stia avviando una startup o lanciando un nuovo prodotto di una azienda strutturata ci si troverà di fronte alla necessità di far collaborare più persone ad un progetto complesso.
Divergere su alcune scelte appena il progetto cresce leggermente è abbastanza probabile. Ognuno ha una propria visione delle cose, e un modello di risoluzione dei problemi altrettanto personale, che si parli di strategia di alto livello o di dettagli grafici.
Sfumature diverse dello stesso grigio, dimensioni differenti del font utilizzate per lo stesso componente, pulsanti per l’azione di colori o forme differenti, sono solo piccoli esempi che però diffusi su tutto il progetto possono portare ad una comunicazione deviata del Brand al nostro cliente.
Nel mondo dei prodotti digitali le complicazioni sono molteplici e purtroppo diventa evidente solo quando il prodotto/azienda inizia a crescere:
- Tante Piattaforme
Gli utenti sempre più spesso viaggiano da una piattaforma all’altra: Smartphone, Tablet, Smart TV, Wearables (Apple Watch etc.). Non è banale mantenere uniformità nelle transizioni, e rendere senza frizioni il passaggio da una piattaforma all’altra. - Pochi Vincoli
Il Design di prodotti digitali rispetto al design tradizionale ha meno vincoli. La soluzione per uno stesso problema è perseguibile in modi differenti. (es. su un’app mobile puoi far selezionare un elemento ad un utente tramite una lista, un set di bottoni disposti orizzontalmente, ecc…) - Tante Idee e designer
In aziende strutturate o in crescita gli stakeholder di un prodotto possono essere molteplici.
I designer e gli sviluppatori sono gli attori principali del processo di sviluppo di un prodotto digitale; spesso in ambienti complessi, menti diverse lavorano con logiche e autonomie differenti.
Alcune volte si aggiunge a questo l’urgenza comune di designer e sviluppatori di sistemare le cose pregresse; questo accompagnato da inesperienza e troppo zelo può degenerare creando divergenza, dando vita a esperienze d’uso molto diverse e scoordinate, all’interno di un unico prodotto.
Un esempio di queste problematiche in Marvel (un‘app di prototipazione online):
Minor inconsistencies began to crop up all over the place.
- Identical components were implemented inconsistently.
- Colors were not balanced properly.
- Transition durations were set seemingly at random.
- There were almost 100 unique font sizes.
- We counted 18 slightly different shades of the same gray.
- Lots of CSS was either duplicated or unused.
- Evoluzione del prodotto
Un’altra caratteristica tipica dei prodotti software è la loro mutevolezza nel tempo, necessitano infatti molto spesso di modifiche a particolari componenti che però hanno impatto in più situazioni all’interno del prodotto. (Anche su componenti legacy implementati in un ciclo di sviluppo precedente)
Cos’è un Design Language System
Il Design Language System è set di regole utili a mantenere armonia e uniformità nell’ecosistema di un prodotto digitale aiutando l’azienda a consegnare al cliente una brand experience ottimale su tutte le piattaforme.
È costituito da un set di componenti definiti a partire da metodologie e pattern condivisi. Permette una comunicazione semplice all’interno del team grazie ad un vocabolario condiviso tra designer, sviluppatori e gli altri membri.
Aiuta a creare una prospettiva olistica, permettendo di essere confidenti che il lavoro di un singolo rimanga aderente a quello del team.
Verso il cliente permette di avere un linguaggio visivo coerente, creando armonia all’interno della piattaforma anche su più dispositivi.
Come definirlo
Il Design Language System deve essere guidato da solide fondamenta a livello di branding, visual design e struttura di prodotto.
È necessario formalizzare il più possibile tutto il materiale relativo al nostro marchio, si deve razionalizzare quello duplicato o inconsistente al fine di creare un repository che elimini ogni forma di ambiguità.
Brand
Deve essere chiara la ragione per cui l’azienda esiste (al di là di fare revenue), la vision e i valori culturali e filosofici su cui si fonda.
Deve essere definita la personalità del brand, il Tone of Voice con cui si vuole essere riconosciuti dai clienti.
Design Principles
Devono essere definiti tutti gli elementi di visual design ad esempio: logo, colori, tipografia, spaziature, elementi di sostegno del brand, forme e superfici.
Prodotto
A livello di prodotto è necessario fare ordine e razionalizzare:
- Componenti UI: aspetto e comportamenti delle applicazioni (bottoni, griglie, liste, controlli, menù, slider, tabs, campi di input..)
- Layout systems per i diversi utilizzi (responsive o piattaforme multi-device)
- Interaction design (flussi delle pagine, percorsi critici, mouse clicks e modelli di interazione)
- Animazioni e movimenti (patterns, velocità, dinamicità)
- Contenuti grafici e testuali (testi delle azioni, video, slideshows, immagini, etc.)
Questo materiale, formalizzato e reso disponibile al team rappresenta il DLS.
Quali sono i benefici di avere un Design Language System?
Gli effetti di un solido Design Language System hanno impatto a più livelli:
Brand
- Riconoscibilità
Le persone devono poter riconoscere il brand, che sia attraverso lo stile visivo, il tone of voice con il quale si comunica o alcune interazione con le app è necessario avere una firma identificativa forte e caratterizzante.
Si può rafforzare questa riconoscibilità creando una firma che sia distintiva e ripetitiva all’interno del sistema, che possa permettere di distinguere il brand addirittura in assenza del logo o marchio. - Consistenza
Presentare un brand coerente tra i prodotti rinforza ancora di più la riconoscibilità di un brand dando un senso di familiarità e sicurezza.
Questo non vuol dire che il prodotto debba essere uguale sulle diverse piattaforme ma deve esserci un buon bilanciamento tra consistenza, variabilità logica e unicità di contesto.
Il Linguaggio del Brand può cambiare in base al contesto, all’audience e la piattaforma. L’importante è che questa varietà di linguaggi sia progettata in modo olistico in modo da aumentare la forza del brand e dare consistenza all’interno di tutta la Brand Experience.
User
- Chiarezza
La riconoscibilità di un prodotto all’interno di un ecosistema, la ripetizione di elementi comuni portano l’utente a sentirsi al sicuro, all’interno di un ambiente familiare.
Interazioni e pattern comuni generano così senso di fiducia e sicurezza nei confronti dell’utente. - Semplicità
L’utilizzo di pattern UX comuni creano consistenza all’interno dell’ecosistema di prodotto (es. disposizione degli oggetti all’interno dell’app, posizione del menù, icone identificative di una funzionalità, gesture per la cancellazione di un elemento), questo rende efficiente la curva di apprendimento di un utente, che troverà le stesse strutture, seppur con alcune sfumature di contesto, all’interno dell’ecosistema di prodotto, semplificando il passaggio tra una piattaforma e l’altra.
Business
- Focus
Gli stackholder che lavorano ai progetti avranno una visione chiara e una guida negli sviluppi diminuendo la possibilità di divergere.
Quando un nuovo team lavora ad un nuovo prodotto o funzionalità, avrà un’idea chiara di cosa è presente e può immergersi nel pensiero di chi ha progettato l’intero ecosistema.
Lavorare con una linea guida aiuta a smettere di pensare al come può essere fatta una cosa e aumenta il focus sulla funzionalità da implementare. - Stabilità
Spesso nei team di design ci sono enormi perdite di tempo sul ridefinire parametri di poca importanza, come l’ombra del bottone o i parametri dell’animazione.
IL DLS permette ai designer di avere confidenza completa che ciò che si sta disegnando sia in linea con quello che stanno facendo gli altri team, tutti i parametri vengono definiti a livello centralizzato. - Efficenza
Creando un Design Language System si crea un set di elementi condivisi all’interno dell’intero ecosistema. Questo permette di avere una “banca” di elementi e pattern da riutilizzare anche per nuovi sviluppi, senza dover reinventare la ruota ogni volta e mantenendo coerenza.
In questo modo il team aumenta l’efficenza non dovendosi preoccupare di dettagli poco importanti.
Il business ne beneficia anche risparmiando, a lungo termine, su tempi e costi di design e di sviluppo.
Più velocemente perché si evita lo spreco di forze nel reinventare soluzioni già definite e perché si dà focus ai membri del team. - Scalabilità
Un Design Language System permette di avere una struttura di componenti riutilizzabili nei diversi contesti, permettendo di introdurre in modo rapido designer nel team e renderli velocemente efficienti e produttivi. - Culture
La definizione di un Design Language System chiarifica tutti gli aspetti legati alla Brand Experience creando senso di unità e consistenza che possono essere propagati in tutta l’azienda. Un qualcosa a cui tutti possano ispirarsi.
Fonti:
