La prima homepage di Google, online dal 1998, era quasi vuota: il logo, una casella di ricerca e poco altro. Intorno, il web dei portali riempiva ogni centimetro dello schermo con notizie, link e banner. Il motivo di tanta sobrietà l’ha raccontato anni dopo Marissa Mayer, che in Google ha seguito a lungo il design della home: Sergey Brin le aveva spiegato che non avevano un webmaster e che lui l’HTML non lo scriveva.
All’inizio quella pagina spiazzava. Mayer ha raccontato che durante i test molti utenti restavano fermi a guardarla, in attesa che si caricasse il resto. Per far capire che la pagina finiva lì, in fondo venne aggiunta una piccola nota di copyright, che non aveva nessuno scopo legale.
Da allora la home di Google è cambiata poco e lo spazio intorno alla casella di ricerca è parte di quello che la rende riconoscibile e facile da usare. Sui siti aziendali, invece, lo spazio vuoto è spesso il primo a essere messo in discussione: lì starebbe bene un banner, un’altra riga di testo, il bollino di una certificazione. Qualche volta l’aggiunta serve. Più spesso quello spazio stava già facendo il suo lavoro: separava, metteva in evidenza, dava il tempo di leggere.
Partiamo dalla definizione.
Lo spazio bianco è tutto quello che lasci vuoto
Lo spazio bianco, chiamato anche spazio negativo o white space, è la parte di una pagina che non contiene testo, immagini o elementi di interfaccia. Sono i margini ai lati del contenuto, la distanza tra un paragrafo e l’altro, l’interlinea, l’aria intorno a un pulsante, lo stacco tra una sezione e la successiva.
Il nome viene dalla stampa, dove lo spazio non stampato restava del colore della carta. Su un sito può avere qualsiasi colore: uno sfondo blu scuro, una sfumatura, una foto molto sfocata. Conta che in quella zona non ci sia niente da leggere o da cliccare.
“Spazio negativo” arriva invece dall’arte e dalla grafica, dove si distingue tra spazio positivo, occupato dal soggetto, e spazio negativo, quello che gli sta intorno. Un esempio famoso è la freccia nascosta nel logo FedEx, disegnata dallo spazio vuoto tra la E e la x. Nel web design i due termini si usano come sinonimi, e in questo articolo faccio lo stesso.
L’idea che il vuoto faccia parte del progetto ha quasi un secolo. Nel 1930 il tipografo tedesco Jan Tschichold scriveva che lo spazio bianco va trattato come un elemento attivo della composizione. Su un sito vale lo stesso: quando decidi quanto spazio lasciare tra un titolo e il testo che lo segue, stai decidendo come verranno letti. Nel post su UX e UI l’ho messo tra i compiti di chi progetta l’interfaccia, insieme al ritmo e alla coerenza: è il rapporto tra pieni e vuoti.
Un’avvertenza se cerchi in giro: “whitespace” e “white space” sono anche termini da sviluppatori. In CSS white-space è una proprietà che dice al browser come trattare gli spazi tra le parole e gli a capo, e in programmazione la parola indica spazi, tabulazioni e ritorni a capo nel codice. Con il layout hanno in comune il nome e poco altro, quindi se cercando consigli di design finisci su Stack Overflow, adesso sai perché.
C’è lo spazio tra le righe e quello tra le sezioni
Chi progetta distingue di solito due scale di spazio bianco.
Il micro spazio bianco è quello piccolo, dentro i singoli elementi: l’interlinea di un paragrafo, la distanza tra le lettere, il margine interno di un pulsante, lo stacco tra un’etichetta e il campo del form a cui si riferisce, la distanza tra le voci di un menu. Decide se un testo si legge senza fatica e se un pulsante si distingue da quello che ha intorno.
Il macro spazio bianco è quello grande, che organizza la pagina: i margini ai lati del contenuto, lo stacco tra una sezione e l’altra, l’aria intorno al titolo principale o a un’immagine importante. Fa capire, prima ancora di leggere, quante parti ha la pagina e dove finisce una e comincia l’altra.
I due livelli lavorano insieme, e si nota soprattutto quando uno dei due manca. Il caso più frequente è la pagina in cui tutto è distanziato allo stesso modo: tra un titolo e il suo paragrafo c’è lo stesso spazio che tra quel paragrafo e la sezione successiva. Ogni elemento, preso da solo, è in ordine, ma la pagina diventa un elenco continuo in cui non si capisce dove cambia argomento. Il caso opposto è il sito con margini generosi tra le sezioni e testi fitti, con l’interlinea al minimo: da lontano sembra arioso, poi provi a leggere un paragrafo e ti stanchi alla terza riga.
Lo spazio decide cosa sta insieme
Il motivo per cui lo spazio conta così tanto ha un nome: legge della prossimità. È uno dei principi della psicologia della Gestalt e dice che gli elementi vicini tra loro vengono percepiti come un gruppo, mentre quelli distanti sembrano appartenere a gruppi diversi.
Per raggruppare le cose su una pagina, quindi, spesso non servono riquadri, linee o sfondi colorati. Basta la distanza. Il nome di un prodotto, il suo prezzo e il pulsante per aggiungerlo al carrello stanno vicini, la scheda successiva sta più lontana, e l’occhio li legge come una cosa sola senza che nessuno glielo spieghi.
Funziona anche al contrario, e lì si vedono gli errori. Un dettaglio che può fregarti sono i form: se lo spazio sopra un’etichetta è uguale a quello sotto, l’etichetta resta a metà tra due campi e chi compila non sa con certezza a quale si riferisce. Con i titoli succede lo stesso. Un H2 deve stare più vicino al testo che introduce che al paragrafo prima, altrimenti sembra la chiusura della sezione precedente. Nel CSS diventa una regola semplice, più margine sopra il titolo e meno sotto:
css
h2 {
margin-top: 3em;
margin-bottom: 0.75em;
}Dalla prossimità passa anche la gerarchia visiva. Un elemento con molto spazio intorno si nota prima di uno schiacciato tra altri dieci, anche a parità di dimensione e colore. Per questo un pulsante di contatto isolato funziona meglio dello stesso pulsante infilato in una fila di link e icone: lo spazio gli dà importanza senza bisogno di farlo più grande o più arancione.
Un testo senza aria si legge peggio
Sul testo lo spazio bianco si misura in tre punti: l’interlinea, la lunghezza della riga e lo stacco tra i paragrafi.
L’interlinea è la distanza tra una riga e la successiva. Se è troppo stretta le righe si impastano, e l’occhio, andando a capo, rischia di ripartire dalla riga sbagliata. Le linee guida del W3C sull’accessibilità, nel criterio 1.4.8 di livello AAA, indicano un’interlinea di almeno una volta e mezza dentro i paragrafi e uno stacco tra paragrafi almeno una volta e mezza più grande dell’interlinea.
La lunghezza della riga conta quanto l’interlinea. Su un monitor grande, un paragrafo che occupa tutta la larghezza dello schermo diventa una riga molto lunga, e a fine riga si perde il filo. Il Baymard Institute indica come intervallo ottimale per il testo tra 50 e 75 caratteri per riga, e lo stesso criterio WCAG 1.4.8 mette il tetto a 80. Lo spazio che resta ai lati, su uno schermo largo, è spazio bianco che sta facendo il suo lavoro.
In CSS bastano due righe:
css
.contenuto p {
max-width: 65ch;
line-height: 1.6;
}L’unità ch si basa sulla larghezza di un carattere del font, quindi la misura resta proporzionata anche quando cambi la dimensione del testo.
Poi c’è un criterio che riguarda tutti i siti, perché è di livello AA: il 1.4.12. Lascia liberi i valori di partenza e chiede che il sito regga quando è l’utente ad aumentarli, per esempio con un’estensione del browser: interlinea a 1,5 volte la dimensione del carattere, spazio dopo i paragrafi a 2 volte, spaziatura tra le lettere a 0,12 e tra le parole a 0,16. È una regolazione che usano persone ipovedenti o con dislessia.
Con i contenitori ad altezza fissa, appena il testo si allarga esce dal box o viene tagliato. Card tutte alte uguali, banner con il testo sopra un’immagine, pulsanti con l’altezza in pixel: sono i primi punti da controllare. Christian ne parla più in generale nel post sull’accessibilità dei siti web.
Sul telefono lo spazio serve anche alle dita
Su uno schermo touch lo spazio bianco ha un compito in più: evitare che tu tocchi la cosa sbagliata. Un dito è molto meno preciso del puntatore di un mouse, e due link attaccati, sul telefono, diventano una scommessa.
Le linee guida danno numeri precisi. Il criterio WCAG 2.5.8, di livello AA, chiede che ogni elemento cliccabile misuri almeno 24 per 24 pixel CSS, oppure che abbia intorno abbastanza spazio libero: si immagina un cerchio di 24 pixel di diametro centrato su ogni elemento troppo piccolo, e i cerchi non devono toccare gli elementi vicini. Il criterio 2.5.5, di livello AAA, sale a 44 per 44. Apple, nelle sue Human Interface Guidelines, indica 44 punti, Google in Material Design 48 dp.
Di queste regole mi piace che lo spazio intorno conti quanto la dimensione. Un’icona piccola con aria intorno si tocca meglio di un’icona più grande schiacciata tra altre due. I punti da guardare per primi sono sempre gli stessi: le icone dei social nel footer messe una attaccata all’altra, la X per chiudere un popup, le voci dei menu a tendina impilate senza respiro, i link a privacy e cookie tutti su una riga.
C’è poi lo spazio ai lati. Su mobile i margini si riducono, ed è giusto, ma un testo che arriva a toccare il bordo dello schermo si legge peggio.
Lo spazio si progetta con una scala
Fin qui ho parlato di quanto spazio serve. Resta da decidere come gestirlo su un sito intero, con decine di pagine e magari più persone che ci mettono le mani.
Il metodo più diffuso è decidere ogni distanza a occhio: 17 pixel sotto questo titolo, 23 sopra quella sezione, perché in anteprima stava bene. Per una pagina funziona. Dopo sei mesi e tre modifiche il sito ha venti spaziature diverse e nessuno sa più quale usare.
L’alternativa è una scala di spaziatura: un piccolo insieme di valori, per esempio 8, 12, 16, 24, 32, 48 e 64 pixel, e la regola di usare solo quelli. I valori piccoli servono al micro spazio, dentro i componenti, quelli grandi al macro spazio, tra le sezioni. Quando devi scegliere una distanza non parti da zero, scegli un gradino.
Oggi la scala si scrive come una serie di variabili CSS, e con la funzione clamp() ogni valore può crescere con la larghezza dello schermo, tra un minimo e un massimo:
css
:root {
--space-s: clamp(0.75rem, 0.6rem + 0.5vw, 1rem);
--space-m: clamp(1rem, 0.8rem + 1vw, 1.5rem);
--space-l: clamp(2rem, 1.5rem + 2vw, 3rem);
--space-xl: clamp(3rem, 2rem + 4vw, 6rem);
}
section {
padding-block: var(--space-xl);
}
h2 {
margin-block: var(--space-l) var(--space-s);
}Sul telefono le sezioni respirano un po’ meno, su un monitor grande un po’ di più, e le proporzioni tra i gradini restano le stesse senza scrivere una media query per ogni caso. Nota anche l’H2: margine grande sopra e piccolo sotto, la legge della prossimità tradotta in una riga.
In PopCorn questa parte la lasciamo ad Automatic.css, il framework CSS che usiamo sui siti fatti con Bricks: la scala di spaziatura è già pronta come variabili fluide, e la regoli una volta per tutto il sito. Christian racconta come funzionano questi strumenti nel post sui framework CSS. Il vantaggio si vede più avanti, quando il cliente aggiunge una pagina da solo: se nel builder trova solo i gradini della scala, la nuova pagina avrà le stesse distanze delle altre senza che nessuno debba controllarle col righello.
Anche il vuoto in pagina sta lavorando
Lo spazio vuoto, in una bozza, è la parte più facile da contestare, perché a prima vista sembra posto non usato. Il motivo che si sente più spesso è la piega, il famoso “sopra la piega”: tutto quello che conta deve stare nella prima schermata, perché più giù non arriva nessuno. È un’idea nata con i giornali piegati in due in edicola, e sul web ha resistito più a lungo di parecchi siti che l’hanno applicata.
I dati raccontano una cosa più sfumata. Con l’eye tracking, il Nielsen Norman Group ha misurato nel 2018 che il 57% del tempo di visualizzazione cade nella prima schermata e il 74% nelle prime due. Nel 2010 la prima schermata ne prendeva l’80%. Le persone scorrono, e scorrono più di prima. La parte alta resta la più guardata, ed è per questo che va tenuta leggibile. Se nella prima schermata metti titolo, sottotitolo, tre pulsanti, un carosello, il bollino delle recensioni e il numero di telefono, l’utente ha più cose da scartare prima di trovare quella che cercava.
Esiste anche l’eccesso opposto. Una prima schermata occupata tutta da un’immagine e da uno slogan, senza niente che spunti dal fondo, può far credere che la pagina finisca lì. È l’equivoco degli utenti di Google nel 1999, rovesciato: loro aspettavano un resto che non c’era, qui il resto c’è e nessuno lo va a cercare. Su mobile succede quando i margini pensati per il desktop restano uguali, e per leggere un paragrafo bisogna scorrere tre schermate di vuoto.
Quando c’è da decidere se aggiungere qualcosa, la domanda che mi faccio è cosa toglie, prima di cosa aggiunge. Un banner in più si prende lo spazio che separava due sezioni. Una riga di testo in più allunga il blocco da leggere prima di arrivare al pulsante. Se quello che aggiunge vale più di quello che toglie, va messo.
Google, per far capire che la sua pagina vuota era finita, ha dovuto aggiungere una nota di copyright in fondo. Sui siti aziendali il problema è quasi sempre l’opposto, e per accorgertene ti bastano quattro domande, davanti alla tua home aperta sul telefono.
Si capisce dove finisce una sezione e comincia la successiva, anche senza leggere i titoli? Ogni etichetta dei form è più vicina al suo campo che a quello dopo? Riesci a leggere un paragrafo intero senza zoomare e senza perdere la riga? Tocchi ogni pulsante e ogni icona con il pollice, senza prendere quello accanto?
Se una risposta è no, prima di aggiungere qualcosa prova a dare più spazio a quello che c’è già.
