Percezione visiva: come usarla per progettare un sito web

Il termine gerarchia visiva suggerisce che ci sia un modo appropriato per vedere i contenuti: in maniera gerarchica. In altre parole, c’è un metodo per mettere in ordine le cose… alcuni contenuti dovrebbero essere visti per primi, altri per secondi, altri per terzi, e così via. Il contenuto più importante deve essere in cima alla gerarchia. È l’elemento visivo che guarderai per primo, l’elemento che poi ti indirizza sul cosa guardare dopo. Così come un grande scrittore inizia con un incipit interessante che ti fa arrivare col fiato sospeso al paragrafo successivo, un designer riflessivo farà spostare lo sguardo da un contenuto a quello successivo.

52 Weeks of UX fornisce anche degli esempi di siti con una forte e con una debole gerarchia visiva:

Un bravo web designer deve quindi classificare - in termini di importanza - i vari elementi di un sito web rispetto agli obiettivi di business.

Per esempio, il punto focale di una homepage dovrebbe essere una grande immagine che catturi istantaneamente l’attenzione del visitatore. A questa dovrebbe seguire una headline che dica cosa viene offerto e poi una Call To Action (CTA) su cui i visitatori possono cliccare per approfondire.

Ecco un esempio ben fatto: l’homepage di TOMS.

La chiave è classificare gli elementi del sito in base alla loro importanza e posizionarli in modo che guidino in maniera fluida i visitatori attraverso il sito.

Gli occhi tendono a seguire un percorso a forma di F

Attraverso l’utilizzo delle mappe di calore, diversi studi hanno scoperto un trend comune nel modo in cui le persone guardano i contenuti di un sito web: i movimenti degli occhi seguono un distinto percorso a F.

Ecco come appare visivamente:

La prima pagina sulla sinistra è una sezione “chi siamo” di un sito web. La pagina accanto è una pagina prodotto di un e-commerce. La terza pagina è una pagina risultati di un motore di ricerca (SERP).

Come si può notare, c’è un pattern riconoscibile in tutti e tre i tipi di pagina.

La forma a F è preponderante sulla pagina prodotto dell’e-commerce o sulla SERP, ma è chiaro che altri tipi di contenuti sono scandagliati in maniera simile.

Un’ottimale UX da desktop può spesso essere raggiunta strutturando il layout della pagina tenendo conto di questo principio per direzionare l’attenzione del visitatore.

Anche gli spazi bianchi hanno grande importanza

Gli spazi bianchi – o spazi negativi – sono l’area tra i vari elementi. È lo spazio vuoto che separa grafiche, testi, titoli, colonne...

Anche se può sembrare insignificante, gli spazi bianchi in realtà giocano un ruolo enorme e hanno un grande impatto sull’estetica globale del sito.

Per esempio, uno degli errori più comuni è quello di sovraccaricare un sito web con troppi elementi. Può sembrare un metodo efficace per attrarre l’attenzione del visitatore, ma in realtà troppi elementi tendono a distrarre l’attenzione e non a focalizzarla. Il risultato: un sito web saturo, pesante e non performante.

In un mondo in cui siamo costantemente sovraccaricati di dati e informazioni, quello che molti utenti cercano è la semplicità.

C’è anche un articolo di ConveriosnXL che tratta la tesi secondo cui un sito web “semplice” è scientificamente migliore.

In questo articolo, l’autore fa riferimento a uno studio di Google del 2012 che afferma “Siti web visivamente complessi sono costantemente valutati come meno belli delle loro controparti più semplici”.

Emerge quindi una verità: Less is more (Meno è meglio).

Ecco qualche esempio di siti che puntano sulla semplicità:

Gli spazi bianchi rendono lo stile del sito più pulito ed è più facile per l’utente focalizzarsi sul messaggio principale. I visitatori riescono così ad assorbire più efficacemente il copy e più probabilmente noteranno i punti focali del sito, come le CTA.

Gli occhi sono naturalmente attratti verso il contrasto

Uno dei modi più efficaci di attirare lo sguardo verso i punti focali è creare contrasto.

Questo è infatti uno dei principi della Gestalt Theory che “tenta di descrivere come le persone tendono a organizzare elementi visivi in gruppi o in un insieme unico quando vengono applicati determinati principi”.

La somiglianza aiuta nell’assimilazione dei contenuti

La somiglianza è un altro dei principi della Gestalt Theory che afferma che “elementi che condividono caratteristiche simili sono percepiti come maggiormente correlati rispetto a gli elementi che non hanno quelle caratteristiche”.

Per dirla in modo semplice, organizzare i diversi elementi in gruppi permette agli utenti di distinguerli rapidamente dal resto del sito. Questo è un bene perché permette di creare una UX più continuativa e richiede un minor sforzo di progettazione.

Ecco un semplice esempio preso dall’homepage dell’Harvard Business Review in cui hanno posizionato le newsletter HBR in un unico gruppo.

Usare elementi simili è dunque un metodo efficace per dividere le varie sezioni del sito in modo che il tutto sia più facilmente assimilabile.

Anche la vicinanza aiuta

C’è un ultimo principio della Gestalt Theory che merita di essere trattato: la vicinanza.

È molto semplice: “gli oggetti più vicini sono percepiti come maggiormente correlati tra loro rispetto a quelli più lontani”.

Dai un’occhiata a questi gruppi di punti.

Siamo naturalmente inclini a considerare i punti a sinistra come un elemento singolo. Invece, percepiamo i punti a destra come due elementi separati.

La legge della vicinanza ci permette di meglio comprendere il contenuto di un sito e dividere i vari elementi in differenti categorie.

È possibile usare questo aspetto della percezione visiva per spezzare i contenuti creando categorie e anche sotto-categorie.

A sua volta, questo dovrebbe migliorare il flusso del sito e aiutare gli utenti a navigarlo più facilmente.

La sezione aurea può ottimizzare l’estetica globale del sito web>

Il concetto della sezione aurea risale a oltre 2.000 anni fa ed è stato studiato da Platone a Euclide, fino ai moderni matematici come Roger Penrose.

La sezione aurea corrisponde a 1,618 e visivamente appare così:

Conosciuta anche come divina proportione, la sezione aurea è una relazione in cui gli elementi sono proporzionati in modo da essere esteticamente piacevole all’occhio umano.

È un fenomeno che ritroviamo nell’architettura antica e in tutta la natura. E, cosa ancor più interessante, può essere applicata anche al design dei siti web.

Ecco un buon esempio:

Il layout e l’organizzazione degli elementi si adattano perfettamente alla sezione aurea.

Conclusioni

La percezione visiva riferita al web design è estremamente complessa e ricca di sfaccettature e i principi qui discussi sono solo una minima parte dell’intero processo.

Per ottimizzare al meglio un sito web e creare la migliore user experience possibile è però fondamentale comprendere come le persone percepiscono visivamente i contenuti e quali reazioni psicologiche questi scatenano.

Liberamente tradotto da The Daily Egg.