Come gestire lo spazio bianco di una pagina web

  Per costruire una pagina web servono contenuti, immagini, una struttura di navigazione vincente. Vi dice niente? Ebbene, questo non basta. È necessario trovare il corretto equilibrio tra i diversi elementi, più uno: lo spazio bianco, o spazio negativo, che dir si voglia. Forse vi siete già trovati di fronte l’annoso problema “Ma quanto spazio bianco lasciare nella pagina?” oppure, quante volte non ve lo siete chiesti affatto? Lo spazio bianco è un elemento che da sempre costringe i web designer a trovare il compromesso migliore per riempirlo, non senza qualche sacrificio, dosando estetica e funzionalità. L’obiettivo di questo post è proprio quello di rendere più dolce il sacrificio e suggerire quali elementi sono indispensabili da considerare, per ottenere un layout veramente efficace.  

Trova il tuo equilibrio

La prima cosa importante da sapere : lo spazio bianco identifica uno spazio utile. Spesso si puà pensare che sfruttare una pagina web al massimo delle sue possibilità sia la scelta migliore. Così facendo si ottiene, al contrario, un gran caos. Tuttavia, anche usare troppo spazio bianco rischia di essere inefficace. E quindi? Trovare l’equilibrio tra gli elementi e contenuti che compongono la pagina è l’unica regola da seguire.  

Macro vs Micro

Fondamentalmente lo spazio bianco  può essere suddiviso in due componenti principali: macro spazio bianco e micro spazio bianco. Il macro spazio bianco indica la distanza tra i principali elementi della pagina, i margini e il padding in un sito web. Vedi la homepage di Google. Con micro spazio bianco si identifica, invece, la distanza tra il titolo e l’inizio del testo, la distanza tra i paragrafi, ma anche lo spazio tra le singole parole e le singole lettere. È da considerare micro spazio bianco anche lo spazio tra immagine e didascalia.  

Gerarchia dei contenuti

Ogni elemento ha un peso particolare nell’economia della pagina: il logo, la barra di navigazione, le immagini. Tutto quello che può influenzare la user experience, senza dimenticare il rapporto che esiste tra contenuto e contenitore. È infatti necessario mantenere una consistency (coerenza) di significato, allineata alle strategie di comunicazioni aziendali, proprio come succede nella comunicazione offline. Lo spazio bianco può essere usato per aumentare o diminuire la visibilità di alcuni elementi della pagina. L’obiettivo non è diminuire la visibilità di un contenuto rispetto ad un altro, non fraintendetemi. Pensate a questa operazione come ad una educazione alla lettura dei contenuti del sito. L’occhio del visitatore, quando arriva nel vostro sito internet, si limita a scorrere velocemente la pagina, fermandosi laddove, per una frazione di secondo,  viene percepito un elemento interessante. È solo dopo questa prima valutazione della pagina che inizia una lettura più attenta e profonda. In questo caso la logica che viene seguita è molto semplice: maggiore è lo spazio bianco che circonda il contenuto, maggiore sarà la percezione di chi osserva che quel determinato elemento è importante rispetto al resto dei contenuti. Prendete come esempio il bottone della call-to-action. Se correttamente posizionato, esso è immediatamente riconosciuto, ma non è forse questo il suo obiettivo?  

Leggibilità del testo

Recenti studi (Fonte: Audiweb @ Iab Seminar Mobile & Advertising. 1 luglio 2014) hanno evidenziato come ogni giorno il 70% delle persone  che naviga in internet, lo fa da un dispositivo mobile. Questo non ha solo costretto i possessori di un sito internet a ottimizzarlo per mobile, ma ha evidenziato quanta importanza hanno le regole di formattazione di un testo. Un font troppo piccolo, un interlinea sbagliato, possono creare non pochi problemi nella lettura, fino a disturbare completamente la vista, costringendoci a abbandonare il sito che fino a quel momento stavamo navigando. Soprattutto nel caso di siti content-oriented è indispensabile utilizzare lo spazio negativo per dare maggior evidenza al titolo e all’eventuale sottotitolo. Catturare l’attenzione e guidare la lettura in modo ordinato e soprattutto intuitivo. Il sito di Wired è un bel esempio di utilizzo tipografia leggibile, di grandi dimensioni, con un colore a contrasto, molto evidente e con la giusta distanza tra i contenuti.  

Bilanciare

Un difetto dello spazio bianco è che se manca è molto evidente. Ottenere un layout equilibrato richiede un occhio molto allenato. Lo spazio negativo può aiutare a raggiungere l’equilibrio solo se vengono misurate in modo corrette le aree occupate dal contenuto. Prendiamo ad esempio il sito Apple. L’uso dello spazio bianco e l’equilibrio che è stato creato tra elementi grafici e contenuti testuali conferisce a tutto il sito un aspetto elegante pulito, oltre che facilitare la fruizione dei contenuti. Anche il colore è importante in questa fase, sempre in funzione di educare l’occhio a seguire un fil rouge di contenuti immediatamente comprensibile, ma è l’uso dello spazio bianco che riesce ad armonizzare l’intero progetto.  

Fate un passo indietro

Ultimo consiglio, una volta completato il vostra pagina web, riposate l’occhio e poi tornate più volte sul progetto. È sempre possibile che un elemento sia sfuggito al vostro controllo.