Proseguire o non proseguire? Chi naviga nei siti web si pone continuamente questa domanda, senza saperlo, quando osserva ciò che sta davanti ai propri occhi. Succede che le persone valutano gli elementi della pagina senza seguire un percorso lineare e senza leggere le parole in successione. Insomma, saltano in vari punti secondo una determinata “gerarchia visiva”.

Capire quali siano gli elementi che attirano l’attenzione dei visitatori di un sito e la priorità visiva che viene loro attribuita, è la chiave per creare una pagina di destinazione che converta.

La comprensione di questo comportamento è possibile grazie a una serie di studi che risale al lontano 1912. In quegli anni in Germania 3 psicologi hanno costituito le basi della Gestaltpsychologie, conosciuta anche come Psicologia della Gestalt. Più precisamente la traduzione dal tedesco significa psicologia della forma o della rappresentazione.

E cosa centra questa Gestaltpsychologie con il modo in cui i visitatori esplorano i siti web?

Semplice, ci permette di capire come raggruppiamo gli oggetti a livello inconscio e ci permette di conseguenza di organizzare questi oggetti in modo che vengano colti dalle persone che li guardano.

Insomma, vogliamo o no che le persone vedano il nostro modulo contatti? Vogliamo che vedano il carrello per gli acquisti? Vogliamo che vedano il numero di telefono per chiamarci? Vogliamo, ancora, che vedano le nostre offerte o i messaggi che ci stanno particolarmente a cuore?

Ecco, questi sono dei validi motivi per continuare a leggere questo articolo e scoprire cosa dice questa psicologia della Gestalt.

Psicologia della Gestalt e fondamento della gerarchia visiva

Più di un secolo fa gli psicologi tedeschi Kohler, Wertheimer e Koffka iniziarono a studiare come le persone percepiscono il mondo. Un concetto fondamentale del loro pensiero è che “Il tutto è diverso dalla somma delle sue parti” dal punto di vista percettivo.

In altre parole questo significa che le persone interpretano il modo in cui gli elementi sono distribuiti nello spazio e tendono a organizzarli per dar loro un senso.

Faccio un esempio: cosa vedi in questa immagine?

Il perimetro di quel triangolo è illusorio ma lo percepiamo ugualmente: è la nostra mente che riempie gli spazi
Il perimetro del triangolo è illusorio ma lo percepiamo ugualmente

Riesci a vedere il triangolo capovolto tra i kiwi?

Il perimetro di quel triangolo è illusorio ma lo percepiamo ugualmente: è la nostra mente che riempie gli spazi.

La psicologia percettiva ha individuato delle leggi che esprimono i modi in cui le persone vedono gli elementi di un gruppo nel suo insieme. Sono proprio queste leggi ad aiutarci a trovare la disposizione cruciale di tutti i componenti di una pagina web ossia a costruire una gerarchia visiva che faccia vedere ai visitatori quello che interessa a noi nell’ordine stesso con cui loro vanno a leggerselo.

Somiglianze e Dissomiglianze

La legge di somiglianza afferma che elementi simili vengono percepiti come se fossero raggruppati insieme.

Faccio un esempio: nell’immagine qui sotto, cosa vedi?

La maggior parte delle persone vede 3 file di cerchi neri e 3 file di cerchi bianchi
La maggior parte delle persone vede 3 file di cerchi neri e 3 file di cerchi bianchi

La maggior parte delle persone vede 3 file di cerchi neri e 3 file di cerchi bianchi… non “36 cerchi” o “6 file di cerchi” o “6 colonne di cerchi”. Questo significa che se mettiamo vicini elementi con aspetto simile in una pagina web, li assoceremo tra loro considerandoli come stesse funzionalità, o come stesse argomentazioni. Allo stesso tempo, sempre per questa tendenza a raggruppare insieme cose simili, noteremo anche cose che sono dissimili dal gruppo (dissomiglianze).

Faccio un esempio: cosa vedi nell’immagine sotto?

l’elemento anomalo dissomigliante attira la nostra attenzione
l’elemento anomalo dissomigliante attira la nostra attenzione

In questa immagine la nostra mente raggruppa insieme tutti gli elementi simili per forma e colore e quindi l’elemento anomalo dissomigliante attira la nostra attenzione perché diverso dal resto del gruppo che abbiamo costruito a livello mentale.

Cos’è una gerarchia visiva?

Con le premesse fatte abbiamo capito che abbiamo la tendenza a notare le differenze tra i gruppi di elementi. Ma c’è molto di più! Riusciamo a trarre conclusioni sull’importanza che hanno queste differenze e a dare quindi priorità a quelle che percepiamo come più significative.

Faccio un esempio: che importanza dai ai cerchi di questa immagine?

la grandezza determina la percezione di importanza
la grandezza determina la percezione di importanza

Senza avere alcuna informazione su questo gruppo di oggetti, è probabile che andremo a classificarli così:

Il cerchio più grande attira maggiormente l'attenzione
Il cerchio più grande attira maggiormente l’attenzione

Il cerchio più grande attira maggiormente l’attenzione, poi il secondo più grande, e così via.

Faccio adesso questo esempio: a cosa dai priorità in questa frase?

Questa è la frase più importante. Questa è la frase più importante. Questa è la frase più importante. Questa è la frase più importante. Questa è la frase più importante. Questa è la frase più importante

I nostri occhi sono stati attratti dall’anomalia, la frase in grassetto. Abbiamo raggruppato insieme le frasi non formattate e le parole in grassetto si sono distinte. Significa che quando rendiamo differenti le dimensioni o le forme degli elementi in un gruppo, richiamiamo l’attenzione delle persone.

Faccio ancora un esempio: cosa attira la tua attenzione nelle frasi qui sotto?

Questa è la frase più importante. Questa è la frase più importante. Questa è la frase più importante. Questa è la frase più importante. Questa è la frase più importante. Questa è la frase più importante.

Questa volta abbiamo sicuramente visto le parole in grassetto di carattere più grande rispetto a tutte le altre, prima ancora di notare le parole in grassetto all’interno del paragrafo.

Il punto della situazione è che ciò che si differenza attira l’attenzione e l’attenzione è proprio ciò che vogliamo per le informazioni più importanti nella nostra pagina web.

Sono le differenze che riusciamo a creare nel design che svolgono un ruolo strategico nel catturare gli occhi dei nostri visitatori sul copywriting per il marketing, sugli inviti all’azione, sui vantaggi di un prodotto di un ecommerce tutto ciò che per noi è importante al fine di convertire questi visitatori in contatti o potenziali clienti.

Queste strategie che attirano l’attenzione costituiscono la gerarchia visiva.

Una gerarchia è fatta di elementi prioritari e di sequenze in ordine di importanza. L’informazione più importante dev’essere dove cadono gli occhi dei visitatori appena arrivano sulla pagina web; la seconda informazione in ordine gerarchico d’importanza è dove gli occhi si posano subito dopo e così via.

Senza saperlo, le persone classificano mentalmente gli elementi della gerarchia visiva come cruciali o superflui, sulla sola base delle differenze tra essi.

Quali sono le informazioni importanti per la gerarchia visiva? Se un contenuto è ben progettato gli elementi chiave sono i titoli, le foto e secondariamente le didascalie, gli elenchi puntati, i paragrafi brevi.

Un testo lungo e senza formattazione è invisibile.

La gerarchia visiva è stata evidenziata anche a livello sperimentale dal Nielsen Norman Group, come “Modello a forma di F“. Lo studio si è basato sul tracciamento dello sguardo di 232 soggetti messi a guardare migliaia di pagine web e graficamente è stato rappresentato con questa l’immagine:

Nielsen Norman Group,
Nielsen Norman Group, Modello a forma di F

Come testimoniano le immagini delo studio possiamo dire che i modelli di lettura degli utenti di Internet assomigliano approssimativamente ad una F anche se non sono sempre così accurati: a volte gli utenti leggono una terza parte del contenuto, rendendo il modello più simile ad una E che ad un F; altre volte leggono solo una parte, rendendo il modello simile a una L rovesciata.

Indipendentemente dal fatto che si tratti di una “F”, una “L”, una “E” o addirittura una “Z” per pagine con meno testo, le implicazioni sono le stesse: le persone di lingua occidentale leggono da sinistra a destra e dall’alto verso il basso durante la scansione e saltano sulla base delle differenze nel contenuto.

Titoli, sottotitoli, immagini, parole in grassetto, didascalie, elenchi: sono tutti elementi che aiutano a organizzare il contenuto secondo una gerarchia visiva perchè sono diversi dal testo standard non formattato.

Faccio un esempio. Guarda lo schema delle pagine qui sotto:

L’immagine a destra ricorda il modello di lettura ad F mentre l’immagine a sinistra non organizza il suo contenuto
L’immagine a sinistra non organizza il suo contenuto

Siamo sicuramente in grado di organizzare meglio a livello mentale il contenuto a destra piuttosto che quello a sinistra. L’immagine a destra ricorda il modello di lettura ad F mentre l’immagine a sinistra non organizza il suo contenuto con una gerarchia visiva.

Progettare la gerarchia con un obiettivo

Prima di iniziare a creare una gerarchia visiva con gli elementi del nostro sito web, abbiamo bisogno di definire un obiettivo per capire quali priorità assegnare. Pensiamo ad esempio la home page di questo sito: com’è strutturata la gerarchia visiva?

lavoro di progettazione a livello strutturale
lavoro di progettazione a livello strutturale

In questo esempio di web design non c’è improvvisazione ma un sapiente lavoro di progettazione a livello strutturale. L’occhio cade sull’immagine della carne, grande e prevalente nella sezione della pagina. L’intento è di accendere il desiderio di mangiare questo piatto. Il secondo elemento della gerarchia visiva è il titolo grande che chiarisce il nome del piatto ed il terzo elemento in ordine di importanza per il lettore è il pulsante rosso che invita a prenderlo.

L’obiettivo è la vendita del piatto di carne.

Per raggiungere questo obiettivo costruisco un percorso visivo gerarchico:

  • mostro il piatto con dimensione talmente grande da sovrastare qualsiasi altro elemento della pagina e nello stesso tempo creo un desiderio
  • uso un titolo grande per il nome del piatto con un carattere più grande rispetto a tutti quelli presenti nella pagina ed in posizione vicina al primo elemento gerarchico (la foto del piatto)
  • sotto il titolo c’è l’invito all’acquisto (il mio obiettivo) con un colore ben visibile.

Conclusioni

Come diciamo noi di Site Inside ai nostri clienti quando realizziamo siti web  a Padova e strategie di web marketing,  è fondamentale che le informazioni vengano trasmesse nell’ordine più rilevante per i visitatori.

Capito questo, facciamo in modo che le informazioni vengano notate:

  1. Cattura l’attenzione con un titolo e fai sapere ai visitatori perché dovrebbero leggere il resto della pagina.
  2. Elabora brevemente i vantaggi della tua offerta con parole in grassetto, testo puntato e piccoli paragrafi.
  3. Mostra loro come richiedere l’offerta con un invito all’azione.