Sirio, ecco il nuovo Design System dell'INPS.

L’INPS ha recentemente presentato il suo nuovo Design System, una nuova “sintassi” del design che intende migliorare la UX dei siti che fanno capo all’istituto. Il Design System, denominato “Sirio” dal nome della stella più luminosa visibile nel cielo notturno, nasce per fornire agli utenti interfacce che permettano di orientarsi senza difficoltà nel trovare delle informazioni di cui possano avere bisogno. L’ecosistema è composto da linee guida per la costruzione della navigazione di un sito, l’organizzazione gerarchica dei suoi contenuti e la loro rappresentazione visiva coerente. Esso rispetta altissimi standard di continuità e coerenza al suo interno, e diventerà il linguaggio visivo e d’interazione standard dell’istituto.

Si pensa alla creazione di un sistema aperto, in modo che anche gli utenti, e non solo gli attori principali (come la pubblica amministrazione), possano suggerire modifiche e moduli. Si tratta di dotare un ecosistema complesso di un linguaggio comune, che amalgami il lavoro sia dei collaboratori esterni che interni. Sulla base di questi elementi, verranno rilasciate in maniera continua dei nuovi componenti, che verranno integrati in modo sistematico allo schema principale, assieme a moduli ancora in via di sviluppo.

Ma cos’è in pratica un Design System? Il DS è un sistema di regole e linee guida atte a garantire coerenza e continuità all’interno di tutto l’ecosistema digitale di un brand. Punta anche a rendere più solida e distintiva la comunicazione del brand aziendale alla clientela, per un miglior riconoscimento del brand stesso.

Lo scopo primario del DS Sirio é rendere più facile, veloce e replicabile il processo di progettazione e sviluppo delle interfacce utente, mettendo a disposizione tutti gli elementi atomici per comporle.

Vincenzo Caridi, direttore dell’Informatica, Tecnologia ed Innovazione dell’INPS, compara la nascita del nuovo Design System ad un codice della strada, in quanto esso svolge per la progettazione digitale le stesse funzioni che questo svolge per la circolazione stradale, gestendo le modalità di interazione degli elementi e la loro gerarchia in modo che l’intero processo risulti fluido e scorrevole. Cosa più importante, il nuovo DS definisce con chiarezza gli standard secondo i quali riorganizzare gli elementi stessi dei siti di riferimento, raggruppandoli per similarità in modo che l’utente possa riconoscere immediatamente gli elementi ripetuti e di conseguenza memorizzare con più facilità i pattern ripetuti. L’uniformazione delle regole permetterà agli utenti di abituarsi facilmente ad esse:ad esempio, i bottoni che hanno la stessa funzione saranno sempre dello stesso colore, in modo che l’utente possa riconoscere la loro funzione immediatamente.

La scomposizione in elementi permette la ricombinazione delle sequenze, cosicché anche per gli sviluppatori il processo di costruzione delle sequenze è semplificato. All’interno di Sirio vengono presentate delle linee guida molto semplici e dettagliate per come gestire le interfacce dei servizi, come esse devono essere disegnate, e di cosa è consentito fare e cosa no, di quali elementi grafici utilizzare. 

Secondo le parole di Caridi “Dal momento che è un sistema modulare, è possibile realizzare nuovi prodotti ‘assemblando’ parti di interfaccia già definite e pensate per combinarsi tra loro, analogamente a quanto si fa con le costruzioni. Questo approccio garantisce rapidità e maggiore prevedibilità dei tempi di sviluppo. Inoltre, le migliorie che vengono apportate a singoli componenti porteranno beneficio ovunque il componente sia stato utilizzato, e per tutti i suoi usi futuri”.

Navigando le linee guida del Design System Sirio, possiamo notare che al momento possono sembrare scarne, ma il livello di contenuto dei singoli capitoli sono ben descritti sia per l’uso di un Designer che per i Developer.

Il Design System è stato sviluppato con Figma, un ottimo software che negli ultimi tempi si sta facendo largo tra i vari competitor del settore e in uno dei primi capitoli viene spiegato come scaricare la libreria dei componenti, come utilizzarli e vengono allegate tutte le risorse, tra cui i font, per la corretta visualizzazione ed utilizzo della stessa.

Nel Design System viene dedicata una pagina appositamente per il Changelog, in questo modo tutti gli attori possono sapere cosa è stato aggiunto, modificato o deprecato all’interno dell’ultima versione.

Anche se il rilascio del DS è stato il 29 settembre, è stata già caricata una nuova versione il 19 novembre (v1.1) che va ad aggiungere un elemento essenziale all’interno di ogni Design System: i Design Token.

I design tokens sono gli elementi essenziali di un’interfaccia. Salesforce li definisce la Single Source of Truth da utilizzare per tutti i loro prodotti. Nella metodologia Atomic Design sono invece chiamati atomi, ovvero i building blocks alla base di elementi più complessi come molecole ed organismi.

Qui in Sirio li vediamo suddivisi in:

• Token GlobaliI token globali costituiscono tutti quei valori che sono “assoluti”, non dipendenti da nessun altro valore e da cui possono essere definiti token figli. Sono i valori primitivi e da questi vengono declinati i token alias.
  In genere si definiscono globali gli attributi primari come: colore, tipografia e valori delle animazioni.
• Token Alias
  I token alias costituiscono tutti quei token che discendono dai token globali e che hanno una specifica responsabilità. Possono far riferimento ad uno specifico contesto o azione.
  Sono utili per comunicare lo scopo del token e quindi rendere chiaro il contesto di utilizzo.

Token Specifici
I token specifici del componente costituiscono i token che rappresentano la proprietà associata ad un componente.
Anche se hanno lo stesso valore di un token alias il loro scopo è differente: ossia raccontare e definire una specifica proprietà di un componente. Spesso sono declinati da un token alias ma non sempre questa regola deve/può essere applicata.

All’interno della guida troviamo anche una guida relativa all’importazione dei token, tramite un apposito plugin di Figma (https://www.figma.com/community/plugin/843461159747178978/Figma-Tokens) e al loro utilizzo.

Data la giovinezza di questo Design System, non ci si può aspettare di trovare qualsiasi elemento pronto per l’utilizzo, infatti è presente un capitolo con il planning di rilascio del resto dei Design Token. Ad oggi sono presenti quelli essenziali, come colori, tipografia e gradienti; ma in futuro rilasceranno anche i Token per sizing, opacity, radius, shadow e z-index.

Menzione d’onore per quanto riguarda il capitolo che riguarda le foundation, molto esaustivo e completo in ogni sua parte, anche se manca solo un punto, ovvero il motion.

Lo troviamo suddiviso in:

• Colore
• Tipografia
• Icone
• Griglia
• Superfici (Layout)

È stato prestato un occhio all’accessibilità per ogni foundation, infatti per ognuno è disponibile una pagina che spiega le regole di accessibilità.

Per quanto riguarda invece i componenti si può notare l’assenza di alcuni elementi, ma data la natura ancora acerba di Sirio, saranno sicuramente aggiunti con il passare del tempo nelle prossime versioni.