4 cose che ogni designer dovrebbe sapere su Whitespace
Spazio bianco (o "spazio negativo") è uno spazio vuoto tra e attorno agli oggetti di una pagina. Gli elementi di spazio bianco nelle interfacce utente grafiche sono:
- Margini, rivestimenti e grondaie
- Spazio attorno a immagini e oggetti grafici
- Interlinea e spaziatura delle lettere all'interno del contenuto del testo
Sebbene alcune persone possano considerare lo spazio bianco uno spreco di proprietà preziose sullo schermo, è un elemento essenziale in un progetto. In effetti, lo spazio bianco è tanto importante quanto il contenuto. Come diceva Jan Tschichold:
Lo spazio bianco deve essere considerato come un elemento attivo, non come uno sfondo passivo
Tutte le buone interfacce utente incorporano i valori degli spazi bianchi appropriati in tutti gli elementi della pagina dall'alto verso il basso. Lo spazio bianco su una pagina può essere tanto importante quanto lo spazio occupato dagli elementi dell'interfaccia perché testo, pulsanti, loghi e altri oggetti hanno bisogno di spazio per respirare.
In questo articolo, scoprirai come utilizzare gli spazi bianchi nei tuoi progetti per dargli un aspetto pulito e ordinato:
1. Migliora la leggibilità del testo
Whitespace è in grado di rendere la lettura molto più semplice riducendo la quantità di visitatori di testo che vedono tutto in una volta. La mancanza di spazio bianco (pagina ingombra) non rende gli utenti desiderosi di leggere il contenuto. D'altro canto, è stato dimostrato che lo spazio bianco utilizzato correttamente aumenta la comprensione del testo fino al 20%, come sottolineato da Dmitry Fadeyev .
Due cose importanti da tenere a mente quando si ottimizza il contenuto del testo sono i margini del paragrafo e l' interlinea (lo spazio tra ogni linea nel testo). Quest'ultimo può migliorare drasticamente la leggibilità di un corpo di testo. Generalmente, maggiore è la spaziatura, migliore sarà l'esperienza dell'utente durante la lettura (anche se un'eccessiva interlinea può rendere le linee disconnesse).
2. Relazioni chiarificatrici
L'intero layout deriva dalla somma delle sue parti e le relazioni del contenuto sono definite dagli spazi bianchi circostanti. The Law of Proximity afferma che gli oggetti vicini l'uno all'altro sembrano simili. Lo spazio bianco funge da spunto visivo in questo caso. Dai un'occhiata all'immagine qui sotto:
Le leggi di Gestalt dettano che gli oggetti in prossimità appariranno come una "unità"; lo spazio bianco funge da spunto visivo.
Quasi tutti coloro che vedono questa immagine notano due gruppi di cerchi, piuttosto che semplicemente 12 cerchi. I cerchi sono tutti identici e l'unica differenza tra loro è la quantità di spazi bianchi che li separa.
È possibile raggruppare insieme gli elementi diminuendo lo spazio tra loro e aumentando lo spazio tra loro e altri elementi nella pagina.
Per le interfacce utente, ciò significa che gli oggetti nelle immediate vicinanze appariranno come una "unità". Ad esempio, nel contesto dei moduli Web, è una buona idea posizionare le etichette vicino ai campi rilevanti per creare un oggetto. Quando le etichette sono posizionate più vicino ai campi, ciò rende la relazione tra loro molto chiara per gli utenti.
Le informazioni vengono comunicate molto più chiaramente quando le etichette sono posizionate più vicino ai campi a cui si riferiscono.
3. Attirare l'attenzione
I progettisti possono utilizzare gli spazi bianchi per comunicare ciò che è più importante a colpo d'occhio. C'è una relazione tra distanza e attenzione; una maggiore distanza costringe l'attenzione. La mancanza di altri elementi farà risaltare solo gli elementi esistenti. È possibile utilizzare uno spazio bianco a proprio vantaggio per disegnare occhi vaganti su determinati elementi della pagina. L'imbottitura extra attorno a un particolare segmento di contenuti costringe l'attenzione dell'utente su quell'area semplicemente perché non c'è nient'altro sullo schermo per attirare l'attenzione. Quindi, più spazi bianchi intorno a un oggetto, più l'occhio è attratto da esso.
4. Crea Visual Hierarchy
Quando lo spazio bianco viene utilizzato in modo appropriato, consente a una pagina di creare un flusso e un equilibrio generali, che a sua volta aiuta a comunicare l'intento del progetto. Whitespace può supportare la gerarchia generale. Produce simmetria o asimmetria.
La simmetria crea memoria e armonia:
Mailchimp, come puoi vedere, è un grande sostenitore dello spazio bianco nei loro progetti. Quando i visitatori scansionano la homepage, il pulsante "Registrati gratis" attira la loro attenzione quasi immediatamente. Usando la simmetria è possibile creare un layout bilanciato con parti ugualmente importanti destra e sinistra.
Mentre l'asimmetria attira l'attenzione:
L'asimmetria è ottima per attirare l'attenzione su una particolare area della pagina.
Quando un elemento usa uno spazio asimmetrico, si distingue dagli altri elementi circostanti.
Conclusione
Lo spazio bianco non è uno spazio sprecato, è un potente strumento di progettazione. Può essere tanto importante quanto lo spazio occupato da immagini, testo o altre interfacce utente, perché anche lo spazio vuoto serve a uno scopo e supporta l'integrità visiva di un layout.
Sebbene sembri un argomento semplice, lo spazio bianco può essere difficile da padroneggiare perché l'applicazione degli spazi bianchi è sia arte che scienza. Comprendere veramente quanto spazio bianco dovrebbe essere usato per creare un buon layout richiede pratica.