Lo spazio bianco, o negativo o spazio vuoto, è un parametro fondamentale nel web design e se capiamo come controllarlo, saremo in grado di definire una pagina web e di guidare l’utente dove si trovano gli elementi di maggior rilievo. E’ quindi un modo molto efficace per ottimizzare i siti web e in questo articolo impareremo come farne uso attraverso spiegazioni chiare ed esempi pratici.

Lo spazio Bianco o Spazio Negativo. Cos’è?

Lo spazio bianco, detto anche spazio negativo, è uno dei beni più preziosi che ha a disposizione chi realizza siti web ed ecommerce, anche se comunemente viene trascurato e poco utilizzato.

Possiamo dire che sia quella parte della pagina web lasciata vuota tra colonne, grafica, testo, immagini, margini e gli altri elementi.

Perchè è importante lo spazio bianco?

È uno spazio vitale, di respiro, lasciato per ottimizzare la leggibilità del sito web e facile da interpretare.

Si tratta di un elemento grafico attivo, non di uno spazio sprecato e passivo. Se impariamo a controllare e a modellare lo spazio nei nostri disegni, creiamo il ritmo, la direzione e movimento.

esempio di uso dei colori nero e bianco per focalizzare un oggetto
lo spazio bianco negativo permette di focalizzare lo sguardo sull’oggetto a cui vogliamo dare rilievo (in questo caso l’aereo nero)

Spazi negativi e vaso di Rubin

E’ interessante l’esempio classico della letteratura del Vaso di Rubin in cui la stessa figura viene percepita in modo diverso a seconda che sia bianca o nera.

La mente umana è infatti predisposta per percepire maggiormente lo spazio positivo mentre tende a dare meno importanza agli sfondi (spazi negativi)

il vaso di rubin come classico esempio di spazio negativo e positivo
Il vaso di Rubin è un classico esempio di spazio negativo e positivo. La figura a sinistra è percepita come 2 volti mentre quella a destra viene percepita come un vaso

Sfruttare lo spazio bianco per migliorare l’usabilità di un sito

Gli spazi bianchi ben studiati hanno il potere di far rimanere i visitatori sul sito più a lungo, diminuendo le probabilità di abbandono della pagina. Di seguito alcuni modi per rendere la pagina web ottimizzata e più accogliente  (anche a livello decisionale!) attraverso l’uso dello spazio:

  1. Mettere in rilievo la Chiamata Per Azioni (call to action). Costruiamo attorno alla Call to Action un’area di respiro che la inquadri, differenziandola dagli altri pulsanti della pagina o dai link di collegamento.
  2. Migliorare la leggibilità. Gli spazi bianchi tra i paragrafi e intorno ai blocchi di testo sono in grado di aumentare la comprensione della pagina del 20%.
  3. Dare un senso di ordine e organizzazione. Senza cadere nel minimalismo, gli spazi bianchi possono aggiungere un senso di eleganza e individualità al sito web.
  4. Rendere i testi e le immagini più piacevoli da guardare. Gli spazi bianchi sono uno strumento per la creazione di comfort visivo nel design.
  5. Raggruppare in modo logico. La semplice aggiunta di spazi bianchi tra oggetti simili tra loro (link, categorie, prodotti, ecc) consente di creare gruppi facilmente individuabili.

La figura seguente mostra l’uso di spazi bianchi per raggruppare oggetti vicini tra loro. A seconda della quantità di spazio interposta tra gli elementi, i raggruppamenti appaiono diversi:

esempio di spazio usato per raggruppare elementi vicini
spazio usato per raggruppare elementi vicini

Macro e micro livelli di spazio

Il vuoto tra gli elementi più piccoli di un sito è chiamato microspazio, ad esempio le interlinee di un testo.

Lo spazio tra gli elementi più grandi della pagina si chiama macrospazio, ad esempio lo spazio tra il contenuto centrale e la colonna laterale del sito web.

Il colore dello spazio bianco

Lo spazio bianco è uno spazio vuoto e non deve essere necessariamente bianco. Deve essere diverso dal colore del contenuto su cui vogliamo si focalizzi l’attenzione dell’utente.

Un’immagine di sfondo omogenea priva di disturbi visivi può essere considerata spazio bianco

Differenze tra spazio Negativo e lo spazio Positivo

Lo spazio bianco è detto negativo perchè di per sè è un vuoto, è un nulla che separa gli elementi grafici di una pagina web.

Allo spazio bianco si contrappone lo spazio di riempimento, detto positivo.

Entrambi lavorano insieme per dar forma a un’immagine. Lo spazio negativo aiuta a definire il contenuto dello spazio positivo e quindi è un protagonista principale nella struttura di un sito web.

logo di Peter Ryan
Il logo di Peter Ryan riesce a focalizzare lo sguardo sulla lettera P grazie a un sapiente uso dello spazio positivo creato dalla lettera R attorno

Migliorare lo spazio bianco per ottimizzare la pagina web

Lo spazio negativo può essere ottimizzato con degli accorgimenti:

  1. Rendere costante la spaziatura dei margini: una spaziatura sempre diversa nella pagina crea un’impressione di disordine nell’utente. Bisogna rendere uguale lo spazio attorno agli elementi dello stesso tipo.
  2. Non eccedere con i margini. I margini troppo ampi hanno l’effetto di scollegare gli elementi grafici e infondono una sensazione di disgregazione progettuale nell’utente.
  3. Lavorare sui microspazi. L’interlinea di un testo è un fattore di leggibilità. Si tratta di un microspazio tra le righe testuali: se è troppo poco compromette la leggibilità, se è troppo scollega le righe dal contesto rompendo l’unità dell’elemento grafico.
  4. Distribuire lo spazio. La struttura ideale di una pagina web non è definita dalla quantità di spazio negativo che utilizziamo ma da come lo distribuiamo.

Esempio Pratico

Vediamo un esempio pratico di quanto scritto sin ora grazie alle immagini del lavoro del graphic designer Joshua Johnson che ha evidenziato gli spazi bianchi negativi e positivi di un sito web e ne ha migliorato la distribuzione degli elementi dopo un lavoro di ottimizzazione degli spazi:

La pagina web iniziale, prima dell'ottimizzazione degli spazi
La pagina web iniziale, prima dell’ottimizzazione degli spazi – credits Joshua Johnson
La stessa pagina con gli spazi positivi e negativi e gli elementi da ottimizzare
La stessa pagina con gli spazi positivi e negativi e gli elementi da ottimizzare – credits Joshua Johnson
La redistribuzione finale degli spazi con l'equispaziatura di tutti i margini
La redistribuzione finale degli spazi con l’equispaziatura di tutti i margini – credits Joshua Johnson
Il lavoro finale dopo la redistribuzione armonica degli spazi
Il lavoro finale dopo la redistribuzione armonica degli spazi – credists Joshua Johnson

Uso dello spazio negativo per dare visibilità al brand

I marchi di lusso utilizzano gli spazi per dare un’impressione di raffinatezza ed eleganza. Le pubblicità di cosmetici, per esempio, usano moltissimo lo spazio negativo.

Il web design Mark Boulton ha utilizzato 2 grafiche diverse per 2 campagne differenti di un brand: email e sito web.

Per l’email marketing ha voluto esprimere il concetto di offerta economica evidenziando i testi con una cornice (spazio negativo) e nello stesso tempo riducendo drasticamente lo spazio dell’immagine di sfondo (altro spazio negativo). L’immagine di sfondo è da considerare uno spazio negativo perchè omogenea nella forma e di tonalità uniformi.

Nel sito web invece il brand voleva mantenere l’impressione di lusso e quindi lo spazio negativo originale è stato lasciato intonso.

Lo spazio bianco usato per l'email marketing
Lo spazio bianco usato per l’email marketing (a sinistra) e per il sito web (a destra) di un bene di lusso – credits Mark Boulton

Lo spazio attivo guida gli utenti attraverso i contenuti

Lo spazio bianco equilibrato può infondere al sito un aspetto armonioso. Quando viene utilizzato per condurre il lettore da un elemento all’altro della pagina web si parla di spazio bianco attivo.

Come esempio prendiamo le immagini del web designer Mark Boulton che spiegano in modo chiaro come usare in modo attivo gli spazi.

Mark ha preso un paragrafo non formattato, senza microspazi. Ha aggiunto la corretta spazialità e in fine ha reso attivo lo spazio creando un’area che mette in evidenza una frase in particolare, il cuore del suo messaggio rivolto agli utenti.

Eccole le immagini in sequenza:

Paragrafo senza utilizzo di microspazi
Paragrafo senza utilizzo di microspazi con interlinea assente e titolo attaccato al testo – credits Mark Boulton
Paragrafo in cui sono stati curati i microspazi
Paragrafo in cui sono stati curati i microspazi e il giusto distacco tra titolo e testo -credits Mark Boulton
frase in grassetto al centro del paragrafo. Questo è uno spazio attivo
Un corretto uso dello spazio nel copywriting permette di guidare il lettore al cuore del testo, la frase in grassetto al centro del paragrafo. Questo è uno spazio attivo – credits Mark Boulton

Conclusioni

Come abbiamo sperimentato in molti anni di progettazione per la realizzazione di siti web a Padova ottimizzati per le conversioni, lo spazio negativo rende il design di una sito internet pulito e ordinato, infonde eleganza e permette di far risaltare il contenuto.

Per verificare se gli accorgimenti messi possono migliorare l’esperienza utente, proviamo a far fissare la pagina web per 5 secondi a una persona che non ha mai visto il nostro sito e facciamogli scrivere tutto ciò che si ricorda.

Se elencherà il contenuto principale potremo ritenerci soddisfatti.