Design System per UX Designer

Il Design System è uno strumento di progettazione potente e versatile la cui adozione comporta benefici per l’azienda, il team di sviluppo e l’utente finale.

In questo articolo vediamo come il Design System sia uno strumento indispensabile nella cassetta degli attrezzi dell’ UX Designer per progettare un prodotto usabile, coerente e con una forte brand identity ben riconoscibile in tutti i canali comunicativi. Per prendere ispirazione e spunti utili al nostro lavoro, siamo andati alla scoperta dei design system di grandi aziende, digital e non.

Ma cosa è Design System?

In modo sintetico possiamo dire che è una collezione di pattern e linee guida che vengono utilizzati per progettare e sviluppare un prodotto digitale e che consente a designer e sviluppatori di offrire esperienze coerenti, indipendentemente dal dispositivo o dalla tecnologia utilizzata.

Nell’ebook “Design System Handbook” (Invision) troviamo un’interessante definizione:

A design system is a collection of reusable components, guided by clear standards, that can be assembled together to build any number of applications. Design systems enable teams to build better products faster by making design reusable—reusability makes scale possible.

Molte aziende lo adottano.

Tutte le grandi digital company, da Airbnb, Spotify, Atlassian a TED, hanno investito nella creazione del loro design system; per avere una panoramica completa potete visitare ADELE, repository di tutti i design system pubblici creata da UxPin: spulciando tra questi emerge fin da subito  come il design system sia uno strumento di progettazione a 360° utile per designers, front-end developers, copywriter, una sorta di colonna portante intorno alla quale si costruisce il prodotto nelle varie componenti (visual, copy, codice) con una condivisione di linguaggio, scopi, procedure che ne garantiscono l’identità digitale. 

Nel menu di  Atlassian Design System, tanto per fare un esempio, troviamo le voci che spaziano dai design principles, alla design personality, alle tecniche di prototipazione, alle personas, al tone of voice fino alla libreria di Sketch.

Shopify ha creato Polaris che recita nella hero image: “Our design system helps us work together to build a great experience for all of Shopify’s merchants“. Qui la prima voce è Foundations, dove scopriamo che le parole chiave a cui ogni designer deve ispirarsi sono Considerate, Empowering, Crafted, Efficient, Trustworthy, Familiar.

I design system, anche se simili nella struttura, si differenziano per alcuni fattori come:

• il campo in cui opera l’azienda. Ad esempio in Mixpanel, software di data analysis, vi è un uso massivo di design patterns come task bars, griglie, charts e data visualization. In Shopify, come tutte le realtà che si occupano di e-commerce,  troviamo pattern relativi alla visualizzazione del prodotto, filtri per le listing product page, carrello e checkout.
• il brand del prodotto:  qui giocano un ruolo determinante elementi come tone of voice, tipografia, color palette, interazioni, animazioni ecc… che determinano come un prodotto è percepito e trasmettono l’identità del brand.
• la piattaforma a cui appartengono. I design pattern sono modellati anche in base alle convenzioni della piattaforma su cui vengono pubblicati, ad esempio website, app nativa o  iOS che sarà probabilmente completamente diverso dal suo equivalente Android.

Vantaggi per tutti

I vantaggi che si ricavano dall’adozione del design system sono molteplici. Per il team che riduce i tempi di sviluppo con la possibilità di prototipare ed iterare più velocemente. Per l’azienda che vede il ridursi dei costi di sviluppo del prodotto, l’aumento degli utenti grazie a una migliore esperienza e il rafforzamento della brand reputation. E at last but not least, per l’utente che si trova a navigare un prodotto coerente, ben progettato e per questo usabile, chiaro e piacevole.

Secondo Alla Kholmatova, autrice del libro “Design System” Smashing Magazine:

A design system can be considered effective when it combines cost-effectiveness in the design process, and efficiency and satisfaction of the user experience in relation to the product’s purpose.

Da un punto di vista strettamente legato all’esperienza utente, il design system facilita la creazione di interfacce comprensibili grazie all’utilizzo ripetuto degli stessi design pattern e permette di progettare un’esperienza coerente del brand in tutti i canali comunicativi dell’azienda.

Consigli per UX Designers

Patterns: funzionali e percettivi.

Lo sforzo maggiore da un punto di vista di progettazione è dedicato alla creazione dei design pattern, vediamo meglio nel dettaglio alcune caratteristiche e funzioni.

I design patterns sono soluzioni di design ricorrenti che vengono impiegati per migliorare l’esperienza utente facilitando la comprensione dell’interfaccia e l’interazione con essa. Possono essere utilizzati singolarmente o combinati tra di loro. Come i tab per separare il contenuto in sezioni e indicare quale opzione è attualmente selezionata, il dropdown menu usato per visualizzare un elenco di opzioni su richiesta dell’utente, i feedback, per mostrare quanti passaggi sono rimasti in un processo. E così via. La maggior parte dei design pattern sono universali e sono stati progettati per aderire ai modelli mentali del pubblico e consentono quindi di comprendere il design in modo intuitivo.

Alcuni pattern definiti perceptual come color palette, iconografia, tone of voice, interazioni e animazioni ecc… sono utilizzati per comunicare ed esprimere  visivamente la personalità del prodotto e contribuiscono a distinguersi dai competitors. Aaron Walter nel libro “Designing for emotion”  illustra con quale criterio il team di sviluppo di Mailchimp abbia scelto i pattern adatti a comunicare i tratti del brand:

“Mailchimp è divertente, ma non infantile. Potente, ma non complicato. Informale, ma non sciatto. Da qui la scelta di  un lessico visivo, che prevede una palette di colori luminosa ma leggermente desaturata, una tipografia sans serif semplice ed elementi di interfaccia piatta con trame morbide e sottili in alcuni punti, per riscaldare lo spazio…”

Design Principles

Oltre ai design pattern, un ruolo fondamentale viene ricoperto dai principi di design, linee guida che fanno in modo che la filosofia e i valori siano presenti in ogni passaggio e in ogni scelta progettuale. Sempre secondo Alla Kholmatova, autrice del libro “Design System” Smashing Magazine:

Design principles are shared guidelines that capture the essence of what good design means for the team, and advice on how to achieve it.

A seconda dell’azienda, i principi di design possono concentrarsi maggiormente sul brand, sulla cultura del team o sul processo di progettazione; possono essere generali o più granulari, temporanei o di lunga durata. Ciò che conta è quanto siano efficaci nell’unificare il pensiero progettuale e nell’indicare la direzione creativa al team. Vediamo alcuni esempi.

• “Lucid”, “Animated”, “Unbreakable” sono i design principles di Pinterest
• Per TED:  “Be timeless, not cutting edge”
•  “Unified,” “Universal,” “Iconic,” “Conversational” sono i design principles di AIRBNB, profondamente radicati nel processo di progettazione: “Quando progettiamo un nuovo componente, vogliamo assicurarci che risolva tutte e quattro le regole. Se non avessimo una serie di principi, sarebbe difficile essere d’accordo sulle cose. Vogliamo assicurarci che ogni pezzo sia all’altezza. ” – Roy Stanfield, principal interaction designer, Airbnb
• Acronimo TUNE, tone, usable, necessary, emotive racchiude i design principles di Spotify.

Quando formulate i principi di design, ricordate che devono essere guide pratiche su come risolvere i problemi di progettazione nel contesto specifico del prodotto ed indicare delle priorità al team quando si trova ad affrontare delle scelte.

Può essere utile organizzare delle sessioni di brainstorming e workshop con gli stakeholder e il CEO, incentrate sul delineare quale sia lo scopo del prodotto a cui stiamo lavorando e quale la sua etica. Cosa significa per loro un buon design per il prodotto? Come lo spiegherebbero in cinque frasi a un nuovo membro del team, in modo pratico e facile da comprendere?

Una volta individuati i design principles sarà necessario condividerli con i team e fare in modo che abbiano una applicazione pratica e che quindi si riflettano nella creazione e nella scelta dei design pattern e quindi dell’interfaccia finale.

Vuoi realizzare il tuo Design System o UI Kit? UX Boutique può aiutarti!

Costanza Mosi
UX Designer
LinkedIn