L’obiettivo del visual design è quello di comunicare. Come organizzare e dare la priorità gli elementi veicolando informazioni preziose sulla loro importanza relativa? La gerarchia visiva aiuta la comprensione, rafforza il messaggio, e guida il lettore attraverso i contenuti.
Una gerarchia è – brevemente – un’organizzazione di elementi in diversi livelli di importanza. Attraverso dei principi di progettazione di base si sottolineano quali elementi rispetto ad altri siano più importanti e si progettano i contenuti per fornire indicazioni visive per gli elementi che stanno sullo stesso livello della gerarchia. L’organizzazione della pagina quindi crea un certo senso di ordine.
Le gerarchie visive creano “aree di interesse” su una pagina, comunicano ulteriori significati attraverso convenzioni e ripetizioni, evidenziano le azioni che si desidera che i visitatori facciano e stabiliscono schemi di movimento e flusso. In definitiva, la gerarchia visiva stabilisce cosa “raccontare” sulla pagina e sul sito.
Perchè la gerarchia visiva è importante? Semplice, perchè diventa più efficace comunicare delle informazioni. Siamo esseri “visivi” e attraverso segnali visivi riusciamo a comprendere meglio il nostro ambiente circostante.
I siti web hanno un sacco di informazioni da comunicare. Quando navighiamo su internet e apriamo una nuova pagina, ci poniamo solitamente alcune domande di cui abbiamo bisogno di una risposta:
- È quello che sto cercando?
- Dov’è?
- Come faccio a completare il mio lavoro?
Con la creazione di gerarchie visive, i designer riescono a creare pagine in modo da rendere la scansione delle informazioni più facile e immediata. In questo modo:
- si rende più facile la ricerca per gli utenti;
- si creano percorsi chiari per le azioni da far prendere agli utenti;
- si rafforza il messaggio che si vuole comunicare.
Una delle prime cose che avete imparato con HTML sono stati probabilmente i tag heading (H1, H2, etc…). I titoli possono essere considerati parte di una gerarchia e consentono ad alcune parole di diventare più importanti rispetto al resto del testo. Parole chiave con i tag blockquote, ul, strong e em, aggiungono una gerarchia visiva al testo.
Confrontare le due immagini qui sotto, uno senza gerarchia e una con una chiara gerarchia visiva:
L’immagine a sinistra non ha alcuna gerarchia e di conseguenza il lettore avrà bisogno di fare un sacco di lavoro per determinare se questa pagina è ciò che cerca. Supponendo che lo sia, il visitatore non ha altra scelta che leggere ogni parola della pagina per trovare le informazioni di cui ha bisogno di completare il suo compito.
L’immagine a destra, invece, rende la pagina facile da scansionare e acquisire. E’ facilmente leggibile e non richiede molto sforzo per il lettore per determinare se è sulla giusta pagina. Supponendo che lo sia, la pagina conduce rapidamente alle informazioni di cui ha bisogno.
Quale dei due layout è più invitante? Quale verrà letto probabilmente? Qual è il modo più efficace di comunicare?
Le gerarchie visive creano centri di interesse e ogni pagina web deve avere un obiettivo. Questo obiettivo potrebbe essere semplice come stimolare la lettura o più complesso, come ad esempio invogliare un visitatore a compiere determinate azioni (acquisti, richieste). Ogni pagina deve avere qualche elemento primario che i visitatori devono notare subito. La gerarchia rende chiari gli elementi primari, secondari e quelli a sostegno della pagina.
Principi di progettazione di visual design
Pensiamo ai principi di base della progettazione visiva: contrasto, ripetizione, allineamento e vicinanza. Ognuno ci permette di aggiungere significato relativo alle informazioni presenti nella pagina:
- Contrasto: mostra importanza relativa. Senza che venga detto assumiamo che un testo più grande sia più importante di un testo più piccolo. Un’intestazione h1 in HTML è più grande di un titolo h2 che è più grande di un titolo h3. La grandezza cattura la nostra attenzione prima e noi abbiamo l’impressione che sia più importante.
- Ripetizione: attribuisce significato a nuovi elementi. Pensate ai link sottolineati di colore blu. Dopo averli visti una prima volta, sappiamo riconoscerli la volta successiva. La ripetizione comunica immediatamente che gli elementi siano allo stesso livello della gerarchia.
- Allineamento: crea ordine. Permette di collegare rapidamente gli elementi della pagina e aiuta a definire punti iniziali e finali. Un singolo elemento che rompe l’allineamento stabilito richiama l’attenzione su se stesso e la sua importanza. Pensate a una citazione rientrata. Visivamente dà l’impressione di un concetto importante preso dal all’interno del testo.
- Prossimità: raggruppa elementi all’interno di una gerarchia e crea nuove sub-gerarchie. Esempio: un’home page di un sito ha tre offerte per prodotti o servizi diversi. Ognuna potrebbe avere un titolo, un paragrafo descrittivo, un’immagine e un link per maggiori informazioni. Gli elementi di design specifici sarebbero su un diverso livello gerarchico, ma ogni offerta (contenendo gli stessi elementi 4) collega le offerte allo stesso livello gerarchico.
