Gerarchia visiva senza colore: 7 strumenti al posto dell'accento

La gerarchia visiva senza colore è il lavoro di ordinare quello che l'utente vede usando solo dimensione, peso, spazio e valore, così che la schermata resti leggibile nell'ordine giusto anche quando il colore d'accento sparisce. Serve soprattutto sui prodotti neutri: dashboard, pannelli di amministrazione, editor, strumenti interni. Dove il blu vuole già dire link e il rosso vuole già dire azione distruttiva, al brand non resta un terzo colore da spendere per l'enfasi.

Ne costruiamo parecchi, e in ogni audit torna lo stesso schema. Un team usa un accento per segnare l'importanza. Poi finisce l'accento. Ogni bottone diventa primario, ogni badge diventa blu, e l'occhio non ha più niente con cui ordinare.

Perché una gerarchia costruita sul colore si esaurisce

Il colore fa una cosa meglio di qualsiasi altro canale: nomina una categoria. Blu vuol dire link, rosso azione distruttiva, ambra in attesa. La categoria però non è il rango. Quando lo stesso accento deve dire "questo si clicca" e insieme "questa è la cosa più importante della pagina", due segnali si dividono un canale solo e chi legge deve indovinare quale dei due intendevi.

C'è un secondo costo. Circa l'8% degli uomini e lo 0,5% delle donne ha una deficienza della visione dei colori sull'asse rosso-verde, secondo Colour Blind Awareness. È un dato nordeuropeo; le stime globali aggregate si fermano intorno al 4,5% per gli uomini. In entrambi i casi la quota basta a rendere invisibile a una parte degli utenti una gerarchia che vive solo nella tinta. Per questo il criterio WCAG 1.4.1 vieta di affidare al colore l'unico mezzo visivo per trasmettere un'informazione.

La versione professionale della regola è più severa di quella normativa. La conformità chiede un secondo indizio. Un lavoro fatto bene chiede che l'intera scala regga anche togliendo la tinta.

Perché aggiungere grigi non risolve

Il riflesso è allargare la scala dei neutri. Nove grigi invece di tre. Serve raramente, e il motivo si misura. Il criterio WCAG 1.4.11 chiede 3:1 fra un componente di interfaccia e ciò che gli sta accanto, il testo corrente ne chiede 4,5:1. Su fondo bianco, una scala a nove passi ne offre più o meno quattro che superano quelle soglie. Gli altri sono decorazione che sparisce su un portatile al 40% di luminosità in una stanza illuminata.

Una scala di grigi non dice comunque niente sul rango. Due grigi alla stessa dimensione e allo stesso peso si leggono come due voci di un elenco, mai come padre e figlio. La scala è una tavolozza. La gerarchia è un insieme di relazioni fra elementi, e le relazioni hanno bisogno di più di un canale.

I canali che reggono la gerarchia senza accento

Sono sette, nell'ordine in cui li applichiamo. Ognuno costa meno da mantenere e si rompe meno di quello dopo.

1. Dimensione, a passi abbastanza ampi da sembrare voluti

Il Nielsen Norman Group mette la dimensione al primo posto nella sua definizione di gerarchia visiva, e la ragione precede le parole: più grande viene registrato come più importante prima che il lettore abbia letto alcunché. L'errore tipico è una scala troppo fitta. Un'etichetta da 15px accanto a un valore da 16px sembra un difetto di rendering, non un livello. Meglio un rapporto che dei numeri scelti a mano: un fattore fra 1,2 e 1,25 fra due passi vicini regge sia sul telefono sia su un monitor da 27 pollici. L'argomento completo sta in scala tipografica per UI di prodotto.

2. Peso, a salti di 200 o più

Il peso del carattere è il canale meno sfruttato nelle interfacce neutre. A 14px, 400 accanto a 500 non si vede. 400 accanto a 600 non si può confondere. Due pesi coprono di solito un prodotto intero: uno per la cosa che stai nominando, uno per tutto ciò che la sostiene. Tre sono un sistema. Quattro sono qualcosa che al sesto mese nessuno controlla più in revisione.

Il peso ha un vantaggio che la dimensione non ha: non cambia il layout. Puoi promuovere un'etichetta senza rimontare la riga in cui sta.

3. Valore, scritto come rapporto e non come codice esadecimale

Il valore è la chiarezza. È la parte del colore che sopravvive alla desaturazione, ed è l'unica che un misuratore di contrasto legge davvero. A ogni ruolo del testo assegna un rapporto obiettivo invece di un grigio preferito: testo primario a 12:1 o più, secondario intorno a 7:1, terziario a 4,5:1 come pavimento. I rapporti trasformano i grigi in decisioni. Chi vuole un quarto livello deve argomentare contro un numero, e il contrast checker di WebAIM chiude la discussione in dieci secondi.

4. Spazio, l'enfasi che costa meno di tutte

La vicinanza raggruppa, la distanza separa. Un elemento con 48px di respiro dentro un layout denso pesa più di un elemento più grande schiacciato contro un bordo. Lo spazio è anche la prima cosa che si taglia quando la schermata si affolla, ed è il contrario di quello che servirebbe: più sale la densità, più lavoro fa ogni vuoto rimasto.

Un'avvertenza, di natura ottica e non matematica. Distanze uguali in pixel spesso non sembrano uguali, soprattutto attorno alle icone e a testi di peso diverso. I casi concreti stanno in allineamento ottico.

5. Posizione

Si legge secondo schemi prevedibili, con il peso maggiore in alto a sinistra nei layout che vanno da sinistra a destra. Un elemento che arriva per primo non ha bisogno di essere più grande. La posizione è l'unico canale che i token non sanno esprimere, quindi la decide chi ha impostato la griglia e poi nessuno la rimette in discussione. Vale la pena rimetterla: spostare l'azione principale sopra la piega batte qualsiasi styling applicato dove sta adesso.

6. Separare le superfici: bordo, riempimento o ombra

Tre modi per dire "qui comincia un contenitore", e non sono intercambiabili. Un bordo da 1px a 3:1 è preciso, costa poco e regge in entrambi i temi. Un riempimento a un passo dal fondo è più silenzioso e si annida bene. L'ombra suggerisce una sovrapposizione fisica e si degrada in tema scuro: per questo Material Design 3 ha spostato quasi tutta l'elevazione su colori di superficie tonali e ha tenuto le ombre per i componenti che si sovrappongono davvero, come dialoghi e pannelli.

Uno per livello di annidamento. Una card con bordo, riempimento e ombra dice la stessa cosa tre volte, e la terza si mangia contrasto che ti servirà altrove.

7. Densità e forma

Altezza di riga, raggio degli angoli, spessore delle icone. Presi da soli sono segnali deboli, in combinazione servono: una riga di tabella da 32px accanto a una riga di impostazioni da 56px dice all'utente che ha cambiato modalità senza scrivere una parola. Tieni stretto il vocabolario. Due densità e due raggi bastano per quasi tutti i prodotti, e ogni valore in più è una cosa in più da sorvegliare.

Come si vede su una schermata vera

Prendi una pagina di impostazioni: titolo di sezione, etichetta del campo, valore attuale, riga di aiuto, azione distruttiva. Costruita sul colore, quella pagina ha un titolo blu, un link blu e un bottone rosso, e l'occhio cade prima di tutto sul bottone rosso, che è l'ultima cosa che vorresti.

Ecco la versione neutra, cinque ruoli, nessun accento. Titolo di sezione a 20px, peso 600, contrasto 14:1. Etichetta del campo a 14px, peso 500, contrasto 7:1. Valore attuale a 14px, peso 400, contrasto 12:1, di proposito più scuro della sua etichetta, perché il valore è il contenuto e l'etichetta è l'impalcatura. Riga di aiuto a 13px, peso 400, contrasto 4,5:1. Azione distruttiva a 14px, peso 500, grigio neutro, con il rosso tenuto da parte per la finestra di conferma, dove la decisione si prende davvero.

Cinque livelli distinguibili con due grigi più il bianco e il nero. L'accento resta in riserva per l'unico momento in cui significa qualcosa. Il colore rende di più quando è scarso, e una schermata costruita così regge anche quando cambia il tema, quando cambia il brand e quando chi guarda non distingue il tuo verde dal tuo rosso.

Come si verifica una schermata in dieci minuti

Tre passaggi, in quest'ordine. Desatura uno screenshot: se l'ordine di lettura crolla, la tinta stava facendo un lavoro strutturale. Strizza gli occhi finché il layout si sfoca: quello che resta leggibile è la gerarchia che l'utente percepisce davvero, e dovrebbe coincidere con quella progettata. Poi misura il contrasto di ogni ruolo di testo e di ogni bordo contro il proprio fondo, non contro il bianco, perché un bordo su una card grigia è una misura diversa dallo stesso bordo sulla pagina.

Falla sulle due o tre schermate più viste, non sulla libreria di componenti. Token puliti mandano online lo stesso schermate piatte, se nessuno guarda la composizione dopo il montaggio. Stessa disciplina per gli stati che quasi tutti saltano, di cui abbiamo parlato in design degli empty state.