Bordo o ombra nell'interfaccia: quando usarli e quando basta un fondo

Separare le aree di un'interfaccia vuol dire mostrare all'utente dove finisce una zona e dove comincia la successiva. Gli strumenti sono quattro: lo spazio, un fondo (un cambio di tono dello sfondo), un bordo e un'ombra. Ognuno dice una cosa diversa. Il bordo segna un margine. Il fondo segna un luogo diverso. L'ombra segna un livello che sta sopra il resto. Se si sceglie quello sbagliato, o se si mettono tutti e tre sulla stessa card, un layout pulito diventa affollato.

Qui mettiamo a confronto bordo, ombra e fondo sui punti che contano su uno schermo vero: cosa comunica ciascuno, come si comporta in dark mode e nella modalità a colori forzati di Windows, quale regola di accessibilità lo riguarda. In chiusura, l'ordine in cui li proviamo e i pochi token che teniamo.

Perché le separazioni diventano rumore così in fretta?

Un confine è un segnale forte. L'articolo di Nielsen Norman Group sul principio della regione comune spiega che un confine netto prevale sugli altri criteri di raggruppamento, vicinanza e somiglianza compresi. Lo stesso articolo nota che i bordi si aggiungono spesso per prudenza, quando lo spazio da solo avrebbe già raggruppato i contenuti, e che il risultato è uno schermo ingombro.

Il rumore si somma. Una card con bordo, ombra e fondo colorato usa tre segnali per dire una cosa sola. Se ne metti dodici su una pagina grigia, dentro un pannello bordato, lo schermo mostra decine di margini prima ancora che si legga una parola. Raramente serve uno stile nuovo. Servono meno segnali, ognuno con un compito.

Bordo, ombra o fondo: la risposta breve

Prima lo spazio. Il fondo per distinguere le aree grandi. Il bordo dove un margine deve essere preciso o deve reggere alle impostazioni di accessibilità: campi dei form, tabelle, divisori. L'ombra solo per ciò che sta sopra altri contenuti: menu, popover, finestre di dialogo, notifiche toast. Un elemento che ha bisogno di due segnali quasi mai ne richiede un terzo.

Material Design 3 rende visibile la stessa scelta in un solo componente. Le sue linee guida sulle card prevedono tre tipi, elevated, filled e outlined: un'ombra, un fondo e un bordo, proposti come alternative. Nessuno dei tre li combina.

Come si confrontano bordo, ombra e fondo?

• Cosa comunica. Bordo: qui c'è un margine. Fondo: questa è un'altra zona. Ombra: questo livello sta sopra la pagina, e la pagina continua sotto.
• Dove si usa. Bordo: campi dei form, tabelle, divisori di lista, indicatori di focus. Fondo: sidebar, sezioni di pagina, card su una pagina colorata. Ombra: menu, popover, dialog, toast, un header quando la pagina ci scorre sotto.
• Dark mode. Bordo: funziona con un tono più chiaro. Fondo: funziona, e più chiaro vuol dire più in alto. Ombra: debole, perché un'ombra scura su un fondo scuro ha poco da scurire.
• Colori forzati. Bordo: resta, ricolorato con un colore di sistema. Fondo: sostituito dallo sfondo di sistema. Ombra: eliminata.
• Densità. Bordo: una linea per elemento, pesante nelle liste lunghe. Fondo: nessuna linea, purché la differenza di tono si veda. Ombra: si confonde con quelle vicine quando gli elementi sono ravvicinati.

Quando conviene il bordo?

Campi dei form

Il criterio di successo 1.4.11 delle WCAG 2.2, Contrasto non testuale, chiede un rapporto di contrasto di 3:1 per le informazioni visive che servono a riconoscere un componente dell'interfaccia. La spiegazione del W3C sull'1.4.11 è precisa su quando un confine conta: un pulsante con testo leggibile non ha bisogno di un margine visibile, perché il testo basta a riconoscerlo. Il campo di testo è il caso opposto. Vuoto, senza testo e spesso senza icona, ha solo il bordo per far capire che esiste. L'esempio del W3C che supera il criterio è un bordo grigio #767676 su pagina bianca. Un bordo chiaro a 1,5:1, elegante nel mockup, non lo supera.

Tabelle e liste dense

Un divisore da 1 px separa le righe occupando meno altezza di qualsiasi spazio vuoto che faccia lo stesso lavoro. In una tabella di quaranta righe questa differenza decide quante ne stanno nella prima schermata. Ne abbiamo parlato in tabella dati o layout a card: quando l'utente confronta valori tra righe, linee sottili e righe alternate battono una griglia di card.

Tutto ciò che deve funzionare con i colori forzati

I temi a contrasto elevato di Windows attivano nel browser la modalità a colori forzati. La specifica CSS Color Adjustment elenca cosa succede: box-shadow diventa none, i colori di sfondo vengono sostituiti dallo sfondo di sistema e tutti gli altri colori, quelli dei bordi compresi, diventano colori di sistema. Un menu a tendina disegnato solo con l'ombra, o una card disegnata solo con il fondo, perde del tutto il suo margine. Il bordo resta.

La correzione abituale è una riga. Ai contenitori che si affidano solo all'ombra o al fondo si dà border: 1px solid transparent. Nella resa normale il bordo non si vede. Con i colori forzati, transparent non è un colore di sistema, quindi il browser lo ridipinge con uno di sistema e il margine torna visibile. Per i casi più complessi MDN documenta la media query forced-colors.

Quando conviene l'ombra?

Quando c'è sovrapposizione. Dei tre segnali, l'ombra è l'unico che dice che un elemento sta sopra la pagina e che la pagina prosegue sotto. È esattamente il messaggio di un menu, di un popover, di un dialog, di un toast o di un header sotto cui scorre il contenuto. Un bordo su un popover indica un margine e niente sulla profondità, così l'utente può scambiarlo per una parte del layout.

Material 3 descrive l'elevazione come una combinazione di ombre, toni di colore e scrim, ed è il modello giusto anche per un prodotto. Le ombre spettano ai livelli che galleggiano. I contenuti fermi prendono profondità dal tono. Se card, pannelli e pulsanti proiettano tutti un'ombra a riposo, tutto galleggia, e un vero overlay non ha più niente per distinguersi.

Due avvertenze. In dark mode l'ombra quasi non si vede, quindi all'overlay va dato un fondo più chiaro della pagina; nel pezzo sulla dark mode context-aware trattiamo il lato tonale della questione. E poche ombre: due token (uno per menu e popover, uno per i dialog) bastano alla maggior parte delle interfacce SaaS.

Quando conviene il fondo?

Per le aree grandi. Una sidebar rispetto all'area principale, una sezione di impostazioni rispetto alla pagina, una fascia di footer: un cambio di tono le separa senza tracciare una sola linea, ed è per questo che i fondi tengono calmi gli schermi densi. L'occhio legge un tono diverso come un luogo diverso.

La storia stessa di Material mostra come dovrebbe funzionare una scala di fondi. Nel marzo 2023 Material 3 è passato a colori di superficie basati sul tono: cinque ruoli di contenitore, da Surface Container Lowest a Surface Container Highest, scelti in base al compito di contenimento e non più legati all'elevazione. La nota di migrazione di Flutter fa corrispondere uno per uno i vecchi livelli colorati ai nuovi ruoli. La lezione per qualsiasi design system è la scala: un insieme fisso di toni, ciascuno con un ruolo, scelti per significato invece che mescolati a mano schermata per schermata. Cinque gradini si addicono a una piattaforma ampia come Android. Per un prodotto web di solito ne bastano tre: pagina, area, incasso.

I fondi richiedono disciplina sul contrasto. Due toni che differiscono di un soffio spariscono sullo schermo poco luminoso di un portatile, due troppo lontani sembrano due app diverse. Le WCAG non chiedono 3:1 tra sidebar e area principale, perché nessuna delle due è un controllo. Lo chiedono quando il fondo è l'unica cosa che identifica un controllo: un campo con fondo pieno e senza bordo deve arrivare a 3:1 rispetto a ciò che lo circonda, la stessa regola che l'esempio del W3C applica a un campo bianco su un pannello blu scuro.

Cosa succede quando i segnali si accumulano?

• Tre segnali sulla stessa card. Bordo, ombra e fondo insieme dicono «separato» tre volte. Se ne tiene uno. Il secondo solo se la card sta su uno sfondo carico.
• Ombre ovunque a riposo. Se tutto galleggia, menu e dialog perdono l'unico segnale che li distingue come overlay.
• Scatole dentro scatole. Una card bordata dentro un pannello bordato disegna una doppia linea lungo ogni margine in comune. Si toglie il bordo interno e si lascia raggruppare lo spazio.
• Bordi chiari sui campi. Sotto 3:1 il campo non supera l'1.4.11, e chi vede poco fatica a trovarlo.
• Controlli fatti solo di ombra o di fondo. Con i colori forzati spariscono. Il bordo trasparente visto sopra li riporta.
• Ombre del tema chiaro copiate nel tema scuro. Non si vedono. Nel tema scuro la profondità la dà il tono.

Questi errori di solito compaiono insieme in un prodotto cresciuto senza una regola, e spiegano in parte perché un'interfaccia sembra poco professionale anche quando ogni componente, preso da solo, è curato.

L'ordine in cui li proviamo e i token che teniamo

1. Spazio. Se uno stacco più ampio e un titolo bastano a raggruppare i contenuti, ci si ferma lì. La guida alla gerarchia visiva senza colore raccoglie le mosse di spaziatura e tipografia che fanno gran parte del lavoro.
2. Fondo. Per le aree che lo spazio da solo non separa: struttura dell'app, sezioni, aree incassate.
3. Bordo. Per i margini che devono essere esatti o reggere alle impostazioni di accessibilità: campi, tabelle, divisori, focus.
4. Ombra. Per i livelli che si sovrappongono alla pagina, e per nient'altro.

Nei design system che realizziamo quest'ordine diventa una lista corta di token: tre fondi (pagina, area, incasso), due colori di bordo (uno tenue per la struttura e uno ad almeno 3:1 per i campi), due ombre (popover e dialog) e una regola di base che dà a ogni overlay un bordo trasparente per i colori forzati. Sette valori e una regola. Sono i token a portare la decisione, così una schermata disegnata l'anno prossimo la rispetta senza bisogno di una riunione; dei token che codificano comportamento e contesto oltre al colore abbiamo scritto qui.

Una pagina di impostazioni mostra l'insieme al lavoro. La sidebar sta sul fondo di area. Ogni gruppo di impostazioni è separato da spazio e da un titolo, senza riquadri. I campi hanno il bordo a 3:1. Il toast di conferma dopo il salvataggio è l'unico elemento con un'ombra. Quattro segnali sullo schermo, ciascuno con un compito, e dai soli margini l'utente capisce quali parti sono luoghi, quali sono controlli e quali sono messaggi che passano sopra la pagina.