By Cody Davis on Unsplash

Gerarchia visiva

In questo articolo affronteremo i principi alla base della composizione grafica, quelle accortezze progettuali che permettono di organizzare gerarchicamente il contenuto di un elaborato con un duplice effetto: rendere più chiara la struttura della comunicazione facilitando la comprensione della stessa; guidare la lettura dell’utente sui punti salienti in modo progressivo, così da rendere la fruizione dinamica e coinvolgente.

Cos’è la gerarchia visiva

La gerarchia visiva è uno strumento della teoria della comunicazione che si appoggia sulla Gestaltpsychologie, la “psicologia della forma” formalizzata in Germania all’inizio del secolo scorso ad opera di Wertheimer, Koffka e Kohler. Questo strumento permette al progettista di organizzare il contenuto della comunicazione secondo una gerarchia di ordine di lettura e/o di rilevanza del contenuto: nel primo caso l’elemento che si vuol far leggere per primo non necessariamente è il più importante, ma può facilitare la comprensione del resto del contenuto o può rendere la fruizione più dinamica e interessante; nel secondo caso, l’elemento messo in evidenza è il più importante dal punto di vista del contenuto: senza di questo si rende più difficoltosa la comprensione della comunicazione. L’utilizzo consapevole della gerarchia visiva consente al progettista quindi di guidare il lettore nella fruizione della comunicazione, facilitandone la comprensione.

Pochi elementi ben equilibrati muovono l’occhio dell’osservatore verso i punti salienti della comunicazione: lo spazio tra “Douglas” ed il breve paragrafo successivo e la sua dimensione maggiore lo categorizzano immediatamente come titolo, seguito dal corpo e dalla CTA, chiara e sempre evidenziata nel sito con un cerchietto arancione. Lo spazio libero attorno a questi elementi concentra l’attenzione dell’utente immediatamente in quest’area, per poi lasciarla vagare nuovamente libera nell’esplorazione dell’immagine di fondo—© Dinesen.com

Nella progettazione di interfacce con l’utente, UI, è compito della gerarchia visiva organizzare il contenuto mediante colori, tipografia, dimensioni, contrasti e rapporti reciproci, al fine di indirizzare la — pochissima — attenzione dell’utente verso ciò che il progettista ritiene prioritario, rendendogli la vita più facile e di conseguenza più felice ed engaged.

Con quali tecniche, quindi, si riesce ad organizzare gerarchicamente il contenuto della nostra comunicazione? Come detto, ci si rifà alle teoria della Gestaltpsychologie — che vedremo in dettaglio in un prossimo articolo — , ed in particolare ai principi di Vicinanza e Somiglianza. All’interno di questi principi si utilizzano degli “strumenti” che tutti conosciamo bene: colore, contrasto, dimensione, posizione, stile.

Vicinanza

Molto sinteticamente si può dire che:

“a parità di altre condizioni, si unificano — considerandoli una totalità unitaria — le parti del campo che si trovano a minore distanza.”

Facile no? Elementi vicini tra loro sono considerati parte di uno stesso gruppo, ponendoli gerarchicamente sullo stesso livello.

Vogliamo rendere un elemento più importante dell’altro, dando una chiara gerarchia verticale (titolo e corpo del testo ad esempio)? Semplice, sarà sufficiente utilizzare uno degli strumenti prima elencati, cambiando il colore del titolo, aumentandone i punti del carattere, usando uno stile di carattere diverso (grassetto, maiuscoletto) o/e applicando una trasformazione particolare (indentatura, sottolineatura, evidenziazione…)

Somiglianza

“Gli elementi vengono uniti in forme con tanta maggior coesione quanto maggiore è la loro somiglianza.”

Ovvero: elementi simili tra loro vengono riconosciuti come parte di uno stesso gruppo semantico. Possiamo quindi utilizzare i nostri strumenti colore, dimensione e stile per organizzare il contenuto in gruppi semanticamente simili: usiamo uno stile di paragrafo per titoli, uno per i sottotitoli, uno per il corpo, uno per le note. Ed ancora, utilizziamo un colore per evidenziare i concetti chiave, una forma per i pulsanti delle call to action, CTA, un simbolo “lente di ingrandimento” per segnalare gli approfondimenti, una cerchio rosso posto sempre in alto a destra (o sempre a sinistra!) con una “x” sopra per indicare l’azione di “chiudere” una finestra o una “<” per indicare l’azione di “tornare indietro”.

Sono tutti elementi che già conosciamo, ma che vanno utilizzati con cura e meticolosità: interrompere la consistenza nell’utilizzo di certe caratteristiche per gli stessi elementi (spostare il nostro cerchietto con la “x” da sinistra a destra in due schermate) disorienta l’utente, gli fa perdere confidenza con la nostra UI e insinua dubbi sul risultato del cliccare sull’elemento. In altre parole rompe il POLA — che non è un termine milanese per chiamare il membro maschile—ma il “principle of least astonishment”, il principio della minor sorpresa (la traduzione non è altrettanto affascinante): lo affronteremo in dettaglio in un prossimo articolo.

Contrasto e spazio negativo

Sappiamo bene cosa è il colore, cos’è un grassetto o un font espanso: questi elementi ci aiutano nell’organizzazione del contenuto come strumenti dei principi visti poco prima. Ci interessa soffermarci invece sul contrasto e lo spazio negativo, sue strumenti estremamente potenti per la comunicazione visiva.

Lo spazio attorno ai testi “This” e “is basic.”, la loro dimensione rispetto ai tre paragrafi in basso e la posizione ravvicinata rispetto al centro focale, il triangolo blu, rendono questi elementi gerarchicamente importanti — via https://www.inspirationde.com/image/43788/

Il contrasto è quella caratteristica di una composizione dove due o più elementi sono differenti tra loro per una o più caratteristiche, in modo marcato e risaltante. Parlando di tipografia, un Times New Roman ed un Georgia non sono così diversi tra loro (non me ne vogliano i tipografi) come possono esserlo un Times New Roman con un Impact, ad esempio. I primi due non sono in contrasto tra di loro, la seconda coppia si. L’uso del contrasto nella gerarchizzazione dei contenuti deve poggiare su una sufficiente differenziazione degli elementi per funzionare: riprendendo l’esempio precedente, scrivere un titolo in Times e il corpo in Georgia, entrambi in punto 12, non è certamente sufficiente a creare sufficiente contrasto per distinguere la gerarchia tra i due elementi.

Lo spazio negativo — che andremo ad affrontare con molta calma in un prossimo articolo — è quel magico ed incompreso strumento che si affida all’assenza di contenuto per potenziare la comunicazione… un silenzio fragoroso!

In linea di principio è estremamente facile: lasciare sufficiente spazio vuoto attorno ad un elemento conferisce a quest’ultimo una forte importanza. Percettivamente, esso crea un campo di forza repulsivo che ha la capacità di “ripulire” lo spazio affollato e ricco di segni attorno a lui, investendolo di un potere gerarchico incredibile. Questo consente all’elemento di “respirare”, creando una composizione elegante e ben equilibrata: provare per credere… non abbiate paura di lasciare spazi “sprecati”: non lo sono affatto!

Abbiamo visto come pochi ed essenziali elementi possano guidare l’occhio dell’osservatore lungo la linea gerarchica delle informazioni che abbiamo tracciato con colori, pesi, distanze reciproche, spazi bianchi e dimensioni: a volerlo sottolineare, questo tipo di metodologie si mescolano con i principi di una buona progettazione in architettura, e non è un caso che l’organizzazione delle informazioni si chiami in gergo proprio IA, Information Architecture.