Quante volte ti sei imbattuto in siti web carichi di elementi grafici?
Il potere degli spazi bianchi nel web design è lo stesso dei silenzi per una melodia:
Scandisce l’esperienza e rende rilevanti i singoli elementi.
Immagina Il design di un sito web come una sinfonia.
Senza le pause, sarebbe solo un’accozzaglia di rumori.

Un layout prende vita grazie a numerosi “atomi visuali”.
Immagini, linee, icone, tipografia, parole: è da qui che nascono layout e struttura di una comunicazione visuale coerente.
Lo spazio bianco – dall’inglese, “white space” – è lo spazio vitale entro cui tutto acquisisce valore.

Parafrasando Gregory Bateson, L’informazione è la percezione di una differenza.

Lascia che ti spieghi meglio perché lo spazio bianco è così importante.

Cos’è lo spazio bianco?

Lo spazio bianco (o negative space) è l’area tra due elementi.
Oppure lo spazio all’interno dei singoli elementi visivi: persino tra i singoli caratteri di una parola. Se sei un web designer, o aspirante tale, starai pensando a margin,  padding, letter-spacing o line-height.

Non deve essere per forza bianco: può essere colorato, magari usare un pattern o uno sfondo.

Tutti i designer più attenti all’UX conosco il potere degli spazi bianchi: creare eleganza e assicurare un’esperienza utente di qualità. E… molto di più.
Ma andiamo con ordine.

Vuoi conoscere il segreto degli spazi bianchi, vero?
Ti starai chiedendo perché se sono così importanti, sono altrettanto trascurati nella realizzazione di siti web. Un limite tecnico di software come Adobe XD o Sketch?
Manca il pennello “spazio bianco”?
Peggio, molto peggio.
La congiura di cui sono vittima gli spazi bianchi non è portata avanti dalle software house.
Andiamo: lo sai bene.
Il nemico giurato del cosiddetto “white space” sono clienti e manager.

Se ti occupi anche tu di design o di realizzazione siti web sai di cosa sto parlando.

Spazio vuoto = spazio sprecato

Per colpa di questa demoniaca equazione siamo condannati a navigare siti frustranti, bombardati da un suprlus informativo sfiancante.

Il sovraccarico cognitivo, ovvero, l’inferno degli interaction designer

Vuoi che i tuoi utenti scappino a gambe levate?
Propinagli un sacco di testo mal formattato e rimuovi interruzioni e immagini.

Gli scrittori tecnici lo sanno bene.
Pensa a chi si occupa di redigere i manuali dei tuoi elettrodomestici!
Salvo pochi appassionati del genere – che avranno persino una loro personalissima collezione -, nessuno ama i manuali!
Motivo per cui, appena hai finito di montare il tuo mobile ordinato online, ti ritroverai sempre qualche vite in più. Ammettilo!
Uno scrittore tecnico farà uno sforzo enorme per indorarti la pillola.

Se sei un buon web designer dovresti ricambiare il favore!
Tra l’altro, lo faresti anche alla navigabilità (e al CTR!) del tuo sito.

Il nostro cervello non è fatto per ignorare le cose.
Forniscigli una mole impressionante di informazioni e vedrai cosa intendo.
Più scelta abbiamo, più ci è difficile decidere a cosa prestare attenzione.

Questo fenomeno è noto agli studiosi di ergonomia come “sovraccarico cognitivo”, o information overload.
Per farla breve: troppe cose tutte insieme non vanno bene.

Vedila così. Lo spazio bianco è una tecnica jedi per far “prendere respiro” all’utente.
Siamo umani, non macchine.
Fino a quando i robot non prenderanno il sopravvento, lo spazio bianco sarà la tua arma segreta contro la frustrazione dei tuoi utenti.

Per il momento, neppure i robot (quelli di Google) apprezzano una pessima user experience.
Una UX scadente si riflette sul tuo posizionamento.
Per questo l’ho inserita tra i punti chiave nell’ottimizzazione seo per e-commerce per non fallire online.

Padroneggiare il bilanciamento tra elementi visivi e spazio bianco è un talento per pochi eletti.
Ma se vuoi progettare per utenti e crawler, devi far parte di questa élite.
Come disse Lao Tzu, l’essenza della nave è il vuoto al suo interno.

Ti dico un segreto: un buon designer in realtà è solo un esperto di feng shui mancato.

Micro vs Macro: due modi di intendere lo spazio

Lo spazio bianco viene in genere distinto in base a:

• densità dei micro spazi bianchi
• relazione degli stessi con i macro spazi bianchi.

Micro spazi bianchi

I piccoli spazi tra gli elementi del design vengono detti micro spazio bianco.
Vuoi degli esempi? Lo spazio tra linee e paragrafi o quello tra le immagini in una griglia.

Questo tipo di white space impatta direttamente la leggibilità dei contenuti.

Per intenderci, considera i margini di un paragrafo.
Velocità di lettura e comprensione vengono influenzati dalla dispozione del testo rispetto ai margini.
Al di fuori del perimetro confortevole e noto, anche una sola parola, verrà letta più lentamente.

Macro spazi bianchi

Hai presente il largo spazio tra i gli elementi principali e che circonda l’intero layout?
Spero di sì: questo è il macro white space.
In alcuni siti web potrai notare che questa creatura leggendaria dimora prepotentemente

• ai lati
• e tra i blocchi più corposi della pagina.

Al contrario del micro, il marco spazio bianco, agisce da container di tutto il design.
Come una grande tela, accoglie ogni elemento.

Ti piacerebbe avere un buon esempio di white spaces?
Il migliore ce l’hai sotto gli occhi ogni giorno: Google!

La semplicità della pagina principale di Google è proverbiale.
Ma questa semplicità ha un altro pregio: è sedativa.
Nessuno stress e sei pronto a mettere a fuoco la prossima ricerca.

Semplice, vero?

Google ha così tanto spazio bianco che i primi test sull’interfaccia utente sono stati quasi problematici.
Molti dei tester alle prime armi aspettavano inutilmente che la pagina finisse di caricare.
Ragion per cui, oggi, vedi i copyrights e link aziendali infondo alla pagina.

Quale spazio bianco utilizzare?

Da un grande potere, derivano grandi responsabilità
Ben Parker (lo zio di Peter)

L’arte nell’utilizzo dei micro e macro spazi puoi fondarla su alcuni semplici fattori:

• Contenuto – Più informazioni nel layout, minore macro spazio a disposizione. I micro spazi invece aumenteranno. Questo rapporto è essenziale. Ne va della leggibilità della tua pagina! È il primo passo per renderla confortevole agli utenti.
• Design – Lo stile con cui il designer dispone l’interfaccia prediligerà un tipo di spazio bianco ad un altro. Il rapporto tra micro e macro, quindi, dipenderà molto dal design dell’interfaccia.
• Utente – Ad ogni pubblico corrisponde un rapporto ideale differente tra macro e micro spazi vuoti. Non ci sono principi universali applicabili a tutti. Le ricerche sugli utenti però possono aiutarci a sondare i vari target.
• Branding – Utilizzare spazi vuoi dice molto di un’azienda e della qualità dei suoi prodotti. Pensa ad un brand come Apple. Non vedi un nesso col design degli spazi bianchi? Pensa, adesso, ai siti di news. Uso dei white space davvero rosicato e mole esagerata di contenuti. Cosa vogliono comunicare? Credibilità: tanti contenuti, in tempo reale, da tutto il mondo.

Attivo vs passivo: un altro utile approccio gli spazi bianchi

Oltre alla distinzione micro e macro, un’altra utile differenza può essere quella tra spazi bianchi attivi o passivi.

Spazi bianchi attivi –  Utilizzati per migliorare la struttura di una pagina e per guidare gli utenti attraverso i contenuti della pagina.

Spazi bianchi passivi – Inseriti per raffinare l’estetica del layout senza guidare l’utente ad un contenuto o secondo un flusso specifico. Pensa, per capirci, allo spazio tra i caratteri o tra i paragrafi

Dai uno sguardo agli esempi per cogliere meglio la differenza.

• Nessuno spazio bianco: Terribile leggibilità: testo compresso e attaccato.
• Spazio bianco passivo: Aggiunto qualche micro spazio bianco è già tutto più facile da leggere. Vero?
• Spazio bianco attivo e passivo: Più che leggibile: fluente! Lo spazio bianco ci aiuta a seguire il flusso di lettura. Gli occhi – e le nostre capacità attentive – ringrazieranno.

Tre elementi da considerare quando si usa il negative space

Leggibilità

Avrai capito che lo spazio bianco è essenziale per rendere un contenuto leggibile.
Se sei un designer, quando scegli le specifiche tipografiche (font, dimensioni, colori, etc.) devi tenerlo in conto. Lavora per la felicità dei tuoi utenti – e dei loro occhi -. Vedrai che saranno molto più attratti dalle tue pagine e dai loro contenuti.

Progetta con in mente tono e branding

A volte il silenzio contribuisce a definire meglio la personalità di un soggetto.
Lo spazio bianco fa la stessa cosa. Guarda i siti luxury: minimali ed eleganti. Pensa poi ai siti di news, ricchi e con poco spazio vuoto. Ad ognuno, il suo speficico tono di voce, insomma. Ovviamente senza pretese assiomatiche. Un buon test sul target di riferimento vale più di ogni elucubrazione.

Focus e attenzione

Gli spazi bianchi aiutano gli utenti ad orientarsi nell’esperire i contenuti.
Sono utilissimi per creare punti focali e dirigere l’attenzione verso aree specifiche del layout.

Differenziare la priorità di ogni elemento visivo è parte del processo di web design.
Ci sono molti modi per sfruttare lo spazio a questo scopo.
Prova, ad esempio, a circondare di white space i punti a cui vuoi dare maggiore focus.
L’editoria, in questo, è maestra.

Ricapitolando

Gli spazi bianchi ( o negative spaces) sono le aree tra gli elementi del design.
Sono uno strumento indispensabile per una user experience (UX) ponderata.
Non sono necessariamente bianchi. Con questo termine si indica semplicemente dove non ci sono né elementi della user interface (UI) né contenuti.

Se sei un designer, li puoi utilizzare in funzione di:

• Contenuti
• Design
• Utenti
• Branding

Utilizza i macro spazi bianchi per organizzare il layout del contenuto e dirigere l’utente attraverso i blocchi di contenuto mostrati. Usa invece micro spazi bianchi all’interno gli elementi del design tra testo, immagini e blocchi di contenuto.

Un’altro modo per intendere gli spazi bianchi è considerarli attivi o passivi.
Passivi quando non hanno altro scopo che facilitare l’esperienza degli utenti. Per aumentare la leggibilità, insomma.
Attivi quando guidano il fuoco dell’attenzione degli utenti.