strategy design emotion
percezione-visiva-per-progettare-siti-web

Percezione visiva: come usarla per progettare un sito web

  • Il 90% delle informazioni trasmesse al cervello è di tipo visivo e le immagini vengono processate 60.000 volte più velocemente dei testi
  • Il 65% delle persone apprendono meglio attraverso immagini e uno dei modi migliori per trasmettere efficacemente un messaggio è attraverso un contenuto visivo”
  • “Il 46,1% delle persone dichiara che il design di un sito è il primo criterio in base al quale valutano la credibilità dell’azienda"

Numerose ricerche dimostrano che gli esseri umani sono visual-oriented.

La vista è uno dei nostri sensi primari: ci aiuta a incamerare le informazioni e a capire ciò che ci circonda.

La percezione visiva influenza la frequenza di rimbalzo, la durata media di sessione e il tasso di conversione, e impatta profondamente anche sul valore del brand.

In questo articolo cercheremo di capire come la percezione visiva si applica al web design attraverso l’analisi di alcuni principi base di una user experience ottimale.

Una forte gerarchia visiva fornisce una chiara guida alla lettura

Nel momento in cui un utente arriva sul sito, l’obiettivo è quello di guidarlo in un percorso che termini in una conversione.

Per riuscirci, dal punto di vista del design, è essenziale creare una gerarchia visiva.

52 Weeks of UX offre un’eccellente descrizione del processo:

definizione-gerarchia-visiva

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:

gerarchia-visiva-web-design-efficace


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.

percezione-visiva-web-design

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:

percezione-visiva-sito-web

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à:

web-design-efficace

progettazione-sito-web-efficace

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”.

gestalt-theory-web-design


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.

web-design-efficace-gestalt-theory


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.

progettazione-siti-web-efficaci

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ì:

sezione-aurea-web-design


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:

divina-proportione-web-design

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.

Contattaci
Grazie per averci inviato la tua richiesta!
C'è stato un errore, ti chiediamo di riprovare.
inserisci il tuo nome
inserisci il tuo cognome
inserisci la tua email
per quale azienda lavori?
inserisci il tuo telefono
in che Paese ha sede la tua azienda?
accetta la privacy e iscriviti alla nostra newsletter
invia
Loading
Ti suggeriamo
skeuomorphic-design-web-design-sito
Skeuomorphic design

I critici sostengono che lo scheumorfismo sia obsoleto, ma l’IoT, la virtual reality e i wearables stanno cambiando i trend del design. Scopriamo insieme come!

idee creative pagina 404
Realizzare pagine 404 creative

Durante la navigazione di un sito web capita di incontrare una pagina di errore 404, scopriamo insieme cos'è e come si può personalizzare.

importanza web analytics
Analisi dei dati: perché è fondamentale per un sito web

Ogni decisione aziendale è guidata da obiettivi che vanno raggiunti e misurati. Lo stesso vale per un sito web!