logo-monade

Sviluppo

Impariamo, insegnamo, condividiamo

Impara le ultime tendenze del digitale

Eventi, conferenze e incontri speciali

Blog

Trasformare l’Esperienza Utente: quattro Design System Innovativi

cover design system innovativi

I design system, o sistemi di progettazione, si presentano come il fondamento per una coerenza visiva e funzionale senza pari, rappresentando la chiave di volta per la creazione di esperienze utente coerenti. 

Attraverso l’analisi di quattro casi studio, esploreremo come queste soluzioni innovative abbiano plasmato e migliorato notevolmente l’interazione degli utenti, apportando una nuova dimensione estetica e funzionale ai prodotti digitali.

  • Material Design: il design system più famoso
  • Encore: il design system di Spotify
  • ADControl: design system per un tool di analytics

Material Design: il design system più famoso

Il Material Design, ideato da Matìas Duarte nel 2014 per Google, costituisce un punto di riferimento nel mondo dei Design System. Creato per agevolare la produzione di esperienze digitali di alta qualità su Android, iOS, Flutter (un framework open-source creato da Google per la creazione di interfacce native) e sul Web, il Material Design si distingue per la sua accessibilità e democraticità, con la caratteristica distintiva di rendere praticamente impossibile, anche per coloro che non sono designer, creare un design considerato “brutto” o erroneo.

L’approccio del sistema, basato sui principi del buon design uniti a quelli fisici e di movimento, si riflette nell’idea che i materiali digitali si comportino come oggetti reali:

“Proprio come la carta, il nostro materiale digitale si può espandere o restringere riformandosi in modo intelligente. I materiali hanno superfici fisiche e bordi. Cose come ombre e cuciture forniscono il significato di quello che tocchi.”
Matìas Duarte (Google’s Vice President of Design)

I componenti coprono una vasta gamma di esigenze di interfaccia, tra cui:

  • Visualizzazione: per organizzare i contenuti (es. card, elenchi).

  • Navigazione: per spostarsi all’interno del prodotto (es. menù di navigazione, tabs).

  • Azioni: per eseguire azioni (es. floating button).

  • Input: per inserire informazioni o effettuare selezioni (es. input di testo, chip).

  • Comunicazione: per essere avvisati o notificati (es. banner, dialog).

Nel 2018, per rispondere alle critiche riguardanti un’eccessiva uniformità visiva nelle applicazioni che adottano il Material Design, Google ha potenziato ulteriormente il suo Design System con l’introduzione dello strumento Material Theming. Questo aggiornamento ha ampliato il repertorio di componenti e transizioni, enfatizzando soprattutto un maggiore livello di personalizzazione.


 material-design-system

Encore: il design system di Spotify

Un altro celebre caso studio è quello di Encore, il Design System adottato da Spotify, introdotto nel 2019 e in continuo aggiornamento. Con Encore, l’azienda mirava a garantire il riconoscimento e la coerenza visiva del brand, in modo da avere un’esperienza consistente sulle oltre 45 diverse piattaforme utilizzate: 

“Garantire che Spotify fosse intrinsecamente “Spotify”, indipendentemente dal mezzo, è diventato il nostro obiettivo principale.”
Juli Sombat (Design Manager, Spotify) Fonte

Encore non è un solo Design System monolitico: è una famiglia di Design System, che fornisce tutto ciò di cui i team di progettazione hanno bisogno per costruire app Spotify belle e scalabili. 

Encore include diversi artefatti, tra cui:

  • Componenti: come pulsanti, icone e campi di testo.

  • Token: le decisioni utilizzate per i colori, i caratteri e gli altri stili utilizzati in tutta l’interfaccia.

  • Layout: i modelli utilizzati per creare diversi tipi di pagine.

  • Linee guida: le regole che governano come dovrebbe essere utilizzata l’interfaccia di Spotify.

Il risultato è un Design System ottimizzato, caratterizzato da modularità e adattabilità che, pur rimanendo facilmente utilizzabile, conserva al contempo un alto grado di riconoscibilità. È anche una risorsa preziosa per i team di progettazione di Spotify, poiché fornisce loro un vocabolario condiviso e una serie di standard su cui lavorare.

spotify-encore

IBM Carbon: il design system dei prodotti IBM

Il Sistema di Design IBM Carbon è un sistema open-source per tutti i prodotti digitali IBM. Il sistema comprende linee guida sull’interfaccia utente, codice funzionante e risorse di design, ed è collegato a una comunità di collaboratori. Il suo obiettivo è migliorare la coerenza e la qualità dell’interfaccia utente attraverso indicazioni chiare e facilmente accessibili su best practice di design e sviluppo.

Il Design System enfatizza la sua natura open-source fornendo standard e documentazione su come contribuire a componenti e pattern, segnalare problemi o fornire feedback generali attraverso la sua comunità su GitHub.

I principi guida di IBM Carbon sono:

  • Apertura: gli utenti di Carbon sono anche i suoi creatori e tutti sono incoraggiati a contribuire.

  • Inclusività: Carbon è progettato e realizzato per essere accessibile a tutti, indipendentemente dalle capacità o dalla situazione.

  • Flessibilità: la modularità del sistema garantisce la massima flessibilità esecutiva; i suoi componenti sono progettati per funzionare perfettamente tra loro, in qualunque combinazione si adatti alle esigenze dell’utente.

  • User-centered: utilizzando una ricerca rigorosa sui bisogni e sui desideri degli utenti, Carbon si concentra sulle persone reali.

  • Coerenza: ogni elemento e componente di Carbon è stato progettato da zero per funzionare insieme elegantemente e per garantire esperienze utente coerenti e coese.

Nel corso degli anni, il team dietro questa libreria ha contribuito a modernizzare le esperienze web di IBM, a documentare le migliori pratiche di progettazione digitale e ad adattarle per soddisfare le esigenze delle centinaia di utilizzatori del Design System e, soprattutto, dei migliaia di utenti finali.

Carbon-design-system

ADControl: un design system per un tool di analytics

AD Control, la prima azienda in Italia che si occupa di rilevazione e certificazione della pubblicità radiofonica e televisiva, cercava un modo per rendere i suoi servizi ancora più efficaci. Il progetto di rifacimento della web app di AD Control proposto da Mònade è stato guidato dalla necessità di migliorare l’efficacia dei servizi offerti. L’approccio adottato ha coinvolto un’ampia revisione dello sviluppo UX/UI e la creazione di un nuovo Design System.

Vediamo ora come questo Design System ha contribuito a migliorare la situazione complessiva.

  • Consistenza e coerenza visiva: il nuovo Design System ha introdotto una elementare ma cruciale caratteristica di coerenza visiva. La consistenza nell’aspetto e nel comportamento degli elementi dell’interfaccia utente ha migliorato notevolmente l’usabilità complessiva dell’app, riducendo la possibilità di errori e confusioni.

  • Efficienza nello sviluppo: il Design System ha fornito un set di componenti riutilizzabili e modelli standardizzati. Questo non solo ha semplificato il processo di sviluppo, ma ha ridotto anche il tempo e gli sforzi necessari per introdurre nuove funzionalità o apportare modifiche. 

  • Gestione della complessità: considerando che il software di AD Control aveva accumulato diverse problematiche tecniche e funzionali nel corso degli anni, la gestione della complessità era una priorità. Il Design System ha contribuito a semplificare l’esperienza utente: la chiarezza visiva e la semplificazione dell’interfaccia hanno reso più accessibili anche i dati più complessi.

  • Comunicazione del rinnovamento: il Design System è stato progettato per comunicare un senso di freschezza e semplicità. Questo non solo ha aggiornato l’aspetto visivo, ma ha trasmesso anche un messaggio di innovazione e modernità, accrescendo la fiducia nell’utilizzo dei servizi offerti.

  • Adattabilità futura: introducendo principi di progettazione scalabili, il sistema può evolversi con facilità per rispondere a nuovi requisiti o tecnologie emergenti, garantendo la longevità e la rilevanza del prodotto nel tempo.

Il Design System di AD Control ha giocato un ruolo cruciale nel migliorare l’efficacia dell’applicazione, affrontando le sfide tecniche e funzionali accumulate nel corso degli anni. La combinazione di coerenza visiva, efficienza nello sviluppo, gestione della complessità, comunicazione del rinnovamento e adattabilità futura ha portato a una soluzione completa e allineata agli obiettivi di miglioramento dell’esperienza utente.

ad control

Conclusioni: l’importanza del Design System

In conclusione, l’analisi di quattro Design System innovativi – Material Design, Encore, IBM Carbon e ADControl – evidenzia l’importanza cruciale di questi sistemi nella trasformazione e nell’elevazione dell’esperienza utente. Ognuno di essi ha contribuito in modo significativo alla coerenza visiva e funzionale, plasmando l’interazione degli utenti in maniera straordinaria.

Material Design, con la sua impronta distintiva basata sui principi del buon design e sull’ispirazione dai materiali fisici, ha innalzato lo standard per l’accessibilità e la democratizzazione del design, rendendo praticamente impossibile la creazione di un’interfaccia considerata “brutta” o errata.

Encore di Spotify ha adottato un approccio modulare, fornendo una famiglia di Design System che garantisce il riconoscimento e la coerenza visiva del brand su oltre 45 piattaforme. I

BM Carbon, come sistema open-source per i prodotti digitali IBM, si distingue per la sua apertura, inclusività, flessibilità, orientamento all’utente e coerenza. I

l caso di ADControl evidenzia, infine, come un Design System ben progettato possa affrontare criticità tecniche e funzionali accumulatesi nel tempo.

In generale, l’importanza del Design System risiede nella sua capacità di far evolvere e migliorare l’esperienza utente attraverso la coerenza, l’efficienza, la gestione della complessità, la comunicazione visiva e l’adattabilità futura. Questi sistemi diventano la chiave di volta per consentire alle aziende di scalare i loro sforzi di design e sviluppo, mantenendo un’esperienza utente finale coesa e piacevole, indipendentemente dalla complessità dell’ecosistema aziendale.