Da quando le interfacce sono diventate parte della nostra vita quotidiana, l’approccio alla loro progettazione è radicalmente cambiato. Chiariamo innanzitutto il significato del termine: un’interfaccia utente (User Interface, o UI ) è la parte di un programma con cui l’utente interagisce. Ogni volta che consultiamo un sito web, apriamo una app, consultiamo una dashboard o semplicemente utilizziamo il nostro pc, abbiamo a che fare con un’interfaccia.
Negli ultimi anni il numero di interfacce con cui interagiamo è cresciuto in maniera esponenziale: per questa ragione i designer si sono interrogati su come poter impostare delle metodologie che consentissero di ottimizzare la scalabilità dei prodotti senza penalizzare il risultato finale. Per capire quanto l’aspetto della scalabilità sia diventato importante è sufficiente pensare alla differenza che c’è tra i dispositivi (desktop, mobile e tablet) da cui è possibile accedere a uno stesso contenuto.
In questa proliferazione di versioni, “coerenza” è la parola chiave da tenere in mente: un’interfaccia coerente è intuitiva e semplice da utilizzare e, soprattutto, costituisce un elemento fondamentale per garantire una buona esperienza di navigazione in quanto permette all’utente di orientarsi facilmente all’interno del contenuto.
Il concetto di Design System nasce per rispondere a questa necessità: il termine indica un insieme di componenti riutilizzabili, definiti in base a linee guida, pattern e regole per i colori, i font, l’iconografia e tutti gli elementi grafici. Questi componenti possono essere assemblati insieme per costruire un numero qualsiasi di prodotti, che rimangono però coerenti in termine di stile e di logica di costruzione.
Ma quanto potrebbe pesare la soggettività nella scelta degli elementi che partecipano alla composizione dell’interfaccia di una dashboard o di un’applicazione a partire da uno stesso Design System? A porsi questa domanda è stato il Web designer Brad Frost la cui risposta si riassume in una metodologia chiamata Atomic Design e ispirata alla Chimica.
Gli atomi sono le strutture minime della materia che ne rendono possibile l’organizzazione. Gli atomi possono aggregarsi in diversi modi, generando molecole che sono l’unità di base degli elementi chimici. La combinazione di più molecole porta alla formazione di organismi che possono essere più o meno complessi. A partire da questo riferimento alla composizione della materia nasce l’Atomic Design, un metodo di progettazione delineato da 5 fasi che facilita la costruzione di un sistema coerente di interfacce attraverso una logica fatta di gerarchie. Le prime 3 fasi rispettano la parziale analogia con i processi chimici (atomi, molecole, organismi), aggiungendone poi altre due, template e pagine. Ognuna delle fasi assume un significato specifico nel percorso che porta alla formazione di un’interfaccia.
Atomi
Gli atomi rappresentano degli elementi non ulteriormente suddivisibili e inseparabili: sono i mattoni che utilizzati insieme permettono di costruire una casa. Dal punto di vista della progettazione di UI, gli atomi sono le componenti più piccole di un sistema, quelle parti che non possono essere ulteriormente scomposte, come ad esempio le etichette dei moduli, gli input, i bottoni e le icone. Sono componenti ancora astratte.
Molecole
Quando gli atomi iniziano a combinarsi, formano le molecole: lo scopo di questa unione è di svolgere una funzione. Le molecole, in questo contesto, sono alla base dei nostri sistemi di progettazione: sono definite da semplici gruppi di elementi UI che funzionano insieme come un’unità. Un bottone e un input da soli non sono molto utili, ma se vengono combinati insieme la questione cambia. Le molecole possono essere più o meno complesse e se unite tra loro danno vita a strutture articolate. Una stessa molecola può essere riutilizzata più volte all’interno di un progetto e contribuisce a dare coerenza a tutto il sistema.
Organismi
Un organismo è il risultato della combinazione di più molecole. Gli organismi sono sistemi relativamente complessi di componenti UI definiti da gruppi di molecole e/o atomi che creano sezioni distinte di un’interfaccia. Uno stesso organismo può essere costituito da componenti diversi. Pensiamo per esempio all’header di una dashboard: essa può contenere un filtro di ricerca, il logo di un brand, un menu di navigazione per il collegamento con altre dashboard. Ognuna di queste molecole partecipa quindi alla formazione di un organismo che è appunto l’header, ma esistono diverse tipologie di header e la loro natura dipende dal tipo di molecole in essi aggregate.
Template
Con il template avviene il passaggio dal linguaggio chimico a quello informatico, avvicinandosi al risultato finale della progettazione di un’interfaccia. Un template è composto da atomi, molecole e organismi che insieme costruiscono uno schema (layout) per le pagine, il risultato finale. Il template assegna una posizione ad ogni elemento, definendo la struttura e il contesto in cui tutti i componenti UI portano la loro funzione specifica.
Pagine
Le pagine permettono di visualizzare le interfacce nella loro forma definitiva, compresi i contenuti che devono ospitare. Derivano quindi dall’inserimento dei contenuti effettivi nello schema del template. Le pagine consentono di mettere alla prova l’efficacia del Design System adottato: se i test dovessero far emergere delle criticità si potrà intervenire su molecole, organismi e template senza sconvolgere la struttura del progetto. Sulle pagine vengono inoltre testate le variabili, come ad esempio i comportamenti delle diverse tipologie di utenti o la capacità degli spazi di contenere i testi richiesti.
I vantaggi dell’Atomic Design
Il principio da cui Frost è partito è “do one thing and do it well”, cioè concentrati sui singoli elementi di un progetto e sviluppali al meglio: l’Atomic Design non è un sistema di regole ma un approccio, uno stato mentale che riguarda la progettazione. L’Atomic Design rappresenta una metodologia scalabile e fortemente orientata al problem solving con cui ottenere interfacce coerenti che tengano conto innanzitutto di quelli che potrebbero essere i comportamenti degli utenti durante il loro utilizzo. Ricordiamoci che nasce in risposta alla problematica iniziale dell’eccessiva rilevanza della soggettività nella definizione del Design System, evitando quindi il rischio di privilegiare l’estetica a favore dell’usabilità.
Trattandosi di una metodologia modulare, essa consente di operare tramite componenti riutilizzabili con indubbi vantaggi anche dal punto di vista della produttività. Possiamo sempre tenere d’occhio tutte le interfacce scomposte e nello stesso tempo avere una visione d’insieme. Se qualcosa non funziona si può tornare indietro di un piccolo passo, senza grandi sconvolgimenti o perdite di tempo.
Questo è un procedimento che veniva in parte già seguito dai designer in passato, ma la definizione dell’Atomic Design ha fornito una metodologia chiara e unitaria per la progettazione di interfacce che facilita e ottimizza il lavoro sia all’interno che all’esterno con il cliente che, osservando gli step che portano alla realizzazione del progetto, riesce ad avere una visione d’insieme più consapevole e chiara.
Hai letto gli altri articoli sulla data visualization con Tableau e commentato le nostre visual stories? Puoi recuperarli qui! E soprattutto puoi vedere tutte le viz anche sul nostro profilo Twitter.
