16 Gennaio 2018

Nel Web Design, lo Spazio Bianco è il Vuoto presente tra e intorno gli elementi di una pagina. Per i non addetti ai lavori, può sembrare qualcosa di superfluo, uno spreco di spazio sulla schermata o semplicemente un elemento estetico particolare ‒ e quindi non essenziale per una pagina web. È invece uno Strumento, indispensabile per diversi motivi.

"Lo spazio bianco deve essere considerato un elemento attivo, non uno sfondo passivo" ‒ Jan Tschichold

È un dato di fatto, lo Spazio Bianco migliora la comprensione dei contenuti in 5 modi:

1. Favorendo la leggibilità
2. Semplificando la scansione della pagina da parte dei nostri occhi
3. Chiarendo le relazioni tra gli elementi
4. Dando priorità agli elementi
5. Creando un senso di raffinatezza, organizzazione ed eleganza

Quindi, quando organizziamo il layout di un nuovo sito, facciamo attenzione a consegnare agli utenti solo la quantità necessaria di informazioni per volta. Questo è il motivo per cui anche lo Spazio Bianco è un concetto importante per l'UX Design, e perché si dovrebbe sempre creare layout osservando e testando come vengono percepiti dagli utenti.

Spazio Bianco e spazio Negativo

Il termine «Spazio Negativo» deriva dall'arte, dove veniva utilizzato per definire la forma dell’oggetto con maggiore precisione. In realtà, lo spazio non deve essere necessariamente bianco ‒ qualsiasi tipo di spazio vuoto che non distolga l’attenzione dal contenuto principale può infatti essere classificato come «Spazio Bianco». Dal momento che non esiste una vera e propria connessione con il colore bianco, i termini «Spazio Bianco» e «Spazio Negativo» possono essere usati alla stessa maniera.

Lo Spazio Bianco nell’Interfaccia Grafica Utente

Così come nell'arte, anche nelle interfacce grafiche gli oggetti richiedono Spazio Negativo ‒ testi, pulsanti, loghi e immagini hanno infatti bisogno di spazio per respirare.

In un’interfaccia, è possibile trovare lo Spazio Bianco sotto forma di:

• Margini e padding
• Spazio attorno a elementi grafici o immagini
• Interlinea e spaziatura delle lettere all'interno del testo
• Spazio tra le colonne

Le 4 funzioni principali:

#1 Migliora la comprensione del testo

Lo Spazio è in grado di rendere la lettura molto più semplice riducendo la quantità di testo che i visitatori vedono in una sola volta. Come sottolineato da Dmitry Fadeyev:

"Utilizzare correttamente lo spazio bianco tra i paragrafi e nei margini può aumentare la comprensione del testo fino al 20%"

Migliora i contenuti sia per quanto riguarda la leggibilità (quanto bene puoi discernere le lettere e le parole) sia la facilità di lettura (quanto puoi scorrere il contenuto).

Due cose importanti da tenere a mente quando si ottimizzano i contenuti sono i margini del paragrafo e l'interlinea (la distanza tra le righe di testo). L'interlinea infatti migliora drasticamente la leggibilità di un testo: in generale, maggiore è la spaziatura, migliore sarà l'esperienza utente durante la lettura ‒ sebbene troppo spazio possa rendere il design scollegato. Di nuovo, si tratta solo di trovare il giusto equilibrio.

#2 Chiarisce le relazioni e raggruppa gli elementi correlati

L'intero layout deriva dalla somma delle sue parti e le relazioni tra i contenuti sono definite dallo spazio bianco circostante, che serve quindi da riferimento visivo.

La Legge della Prossimità della Gestalt afferma che:

Gli oggetti che sono più vicini tra loro vengono percepiti come correlati, rispetto a quelli più distanti.

Il che significa che allontanando tra loro gli elementi di una pagina, stiamo segnalando all’utente che essi sono meno (o affatto) collegati l’un l’altro. Avvicinandoli tra loro, indichiamo che hanno una relazione più stretta.

#3 Attira l'attenzione

Molte app e siti web spesso mettono insieme troppi elementi e informazioni senza lasciare abbastanza spazio per respirare. Un’interfaccia troppo piena sovraccarica gli utenti, il consiglio è quindi quello di procedere rimuovendo le distrazioni - in questo modo costringerai gli utenti a concentrarsi solo su ciò che è immediatamente visibile e che tu ritieni più importante per il loro percorso di Navigazione.

Usa gli spazi bianchi a tuo vantaggio per attirare lo sguardo su determinati elementi della pagina. Aumentare i margini attorno a una particolare fetta di testo, ad esempio, concentra l'attenzione dell'utente proprio su quell'area. Maggiore è lo Spazio Bianco che circonda un oggetto, più l'occhio umano è attratto dall’oggetto in questione.

#4 Crea una gerarchia visiva

Quando lo Spazio Bianco viene utilizzato nel modo corretto, nella pagina si crea un equilibrio generale che aiuta a comunicare. Lo Spazio Bianco supporta la gerarchia complessiva. Produce simmetria o asimmetria: la simmetria crea armonia, mentre l'asimmetria attira l'attenzione. L'asimmetria nello specifico aiuta a focalizzare l'attenzione su una particolare area o un elemento della pagina: quando un elemento si trova in uno spazio asimmetrico, spicca su tutti gli altri che lo circondano.

C'è sufficiente Spazio Bianco nel tuo Sito?

Lo Spazio Bianco non è uno spreco di spazio, ma un potente strumento. Può essere tanto importante quanto lo spazio occupato da immagini, testo o altri elementi, dal momento che anche lo spazio vuoto ha un’utilità ben precisa e supporta l'integrità visiva di un layout.