Creare una gerarchia visiva: l'arte di catturare l'attenzione

"Devo cestinare questo o leggerlo?" i soggetti della ricerca si chiedono mentre esaminano un pezzo di posta diretta. Dall'alto verso il basso valutano la lettera e dopo soli 11 secondi prendono una decisione.

Durante quel periodo, gli sperimentatori dell'Associazione di marketing diretto di Monaco notano qualcosa di strano negli occhi dei soggetti. Non seguono un percorso lineare, leggendo ogni parola in successione, ma saltano in diversi punti del corpo della lettera. Allora cosa stavano guardando?

La risposta è la chiave per creare una landing page post clic che converta, con l'aiuto di quella che viene chiamata "gerarchia visiva". Per comprenderlo appieno, dovremo tornare indietro nel 1912 in Germania, dove tre psicologi iniziarono a formare le basi della psicologia della Gestalt.

Psicologia della Gestalt e fondamento della gerarchia visiva

Più di un secolo fa, i pensatori tedeschi Wolfgang Kohler, Max Wertheimer e Kurt Koffka hanno iniziato a studiare come le persone percepiscono il mondo. I loro nomi e la teoria della "Psicologia della Gestalt" potrebbero non sembrare familiari, ma il messaggio che racchiude la loro ricerca sarà:

"Il tutto è diverso dalla somma delle sue parti" , il che significa che il tutto ha "un'esistenza indipendente nel sistema percettivo", afferma il dott. Russ Dewey.

In altre parole, i tre uomini hanno proposto che gli umani non percepiscano l'ambiente circostante individualmente e allo stesso modo. Invece, li organizziamo in modi specifici per dare loro un senso nel loro insieme.

Prendi ad esempio la seguente immagine. Cosa vedi?

Probabilmente noterai tre cerchi parzialmente disegnati, ma anche un triangolo capovolto al centro dove non ce n'è. I cerchi incompleti formano gli angoli del triangolo e la tua mente riempie i bordi. Questo è chiamato un "contorno illusorio" ed esemplifica esattamente ciò che Koffka intendeva quando disse: "il tutto è diverso dalla somma delle sue parti". Ci sono più di tre cerchi parzialmente disegnati in questa immagine. Insieme, posizionati come sono, quei cerchi formano un triangolo bianco.

Dalla loro ricerca, i tre uomini hanno creato otto leggi di organizzazione percettiva - modi in cui gli umani vedono i componenti di un gruppo nel suo insieme. Uno più di ogni altro ha a che fare con il modo in cui le persone trovano informazioni cruciali sulla tua pagina di destinazione post-clic.

Le leggi della somiglianza

La legge della somiglianza afferma che cose simili appaiono come se fossero raggruppate insieme. Nell'immagine qui sotto, cosa vedi?

Se hai detto "36 cerchi" o "6 file di cerchi" o "6 colonne di cerchi", sei in minoranza. La maggior parte delle persone vede tre file di cerchi neri e tre file di cerchi bianchi. Poiché ogni altra riga è colorata e modellata in modo simile, è vista come parte del proprio gruppo all'interno del tutto.

Allo stesso tempo, a causa di questa tendenza a raggruppare cose simili, notiamo anche cose dissimili dal gruppo. Gli psicologi della Gestalt chiamavano queste differenze "anomalie".

Nell'immagine sopra, raggruppiamo insieme tutte le mele verdi simili e quella rossa si distingue come un'anomalia. Che l'anomalia sia dissimile per dimensioni, colore o forma, attira la nostra attenzione perché è diversa dal resto del gruppo.

Questo processo di raggruppamento percettivo degli elementi può spiegare ciò che gli sperimentatori della Direct Marketing Association di Monaco hanno notato negli occhi dei soggetti di ricerca.

Che cos'è una gerarchia visiva?

Brandon Jones di Tuts+ afferma che le persone non sono "veggenti di pari opportunità". Non solo abbiamo la tendenza a notare le differenze tra i gruppi, ma anche a trarre deduzioni sull'importanza da queste differenze. Ad esempio, classifica i cerchi in questa immagine:

Senza sapere nulla su di loro, probabilmente li hai classificati come segue:

E questo perché il cerchio più grande attira più attenzione, poi il secondo più grande e così via. Ora applichiamo un principio simile alle parole sulla pagina.

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.

In quell'estratto, i tuoi occhi erano probabilmente attratti dall'anomalia. Hai raggruppato le frasi non formattate e le parole in grassetto si sono distinte. Quando si introducono differenze di dimensioni, l'attenzione è rivolta altrove.

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 è la frase più importante.

Questa volta, prima di notare le parole in grassetto all'interno del paragrafo, probabilmente hai visto le parole in grassetto ancora più grandi sopra di esso. Potremmo continuare a modificare le parole con il colore e il posizionamento per farle risaltare ancora di più, ma hai capito. "Diverso" attira l'attenzione e l'attenzione è ciò che vuoi che venga prestata alle informazioni più importanti sulla tua pagina di destinazione post clic.

Con le differenze nel design, puoi attirare strategicamente gli occhi dei tuoi visitatori sui messaggi di marketing che sono fondamentali per generare conversioni, ad esempio la tua proposta di valore, i vantaggi del tuo prodotto e l'invito all'azione. Queste strategie che attirano l'attenzione formano la "gerarchia visiva".

All'interno di tale gerarchia, l'informazione più importante è dove gli occhi dei tuoi visitatori si posano per primi sulla pagina, quindi la seconda informazione più importante è dove i loro occhi si posano dopo, e così via. Senza nemmeno rendersene conto, classificano mentalmente questi elementi da cruciali a non necessari in base alle differenze.

Stili di lettura dentro e fuori dal web

Rivisitiamo ora l'esperimento della Direct Marketing Association di Monaco, in cui i soggetti sceglievano se cestinare o leggere una lettera di vendita in soli 11 secondi. Sono stati in grado di prendere una decisione così rapidamente a causa delle differenze di progettazione.

Innanzitutto, i loro occhi sono balzati su quelle che percepivano come le informazioni più importanti sulla pagina: titoli e foto. Successivamente, didascalie, elenchi puntati e brevi paragrafi hanno attirato l'attenzione. La copia lunga e non formattata è stata digerita per ultima, se non del tutto.

Da allora, numerosi studi hanno rafforzato i risultati, in particolare la ricerca del Nielsen Norman Group che ha dato vita al "modello a forma di F". Dopo aver tracciato lo sguardo di 232 soggetti su migliaia di pagine web, il gruppo ha trovato:

• I primi utenti leggono nella parte superiore della pagina, creando la barra orizzontale superiore della forma "F".
• Quindi, le persone avanzano più in basso nella pagina, leggendo i sottotitoli per formare la barra orizzontale inferiore della "F".
• Infine, gli utenti scansionano il lato sinistro, formando lo stelo verticale della "F".

Sembrava qualcosa del genere:

Tuttavia, il nome "F-shaped" è un po' fuorviante. Come spiegano i ricercatori, i modelli di lettura degli utenti di Internet non sono sempre così precisi:

Ovviamente, i modelli di scansione degli utenti non sono sempre composti esattamente da tre parti. A volte gli utenti leggeranno attraverso una terza parte del contenuto, facendo sembrare il modello più simile a un E che a un F. Altre volte leggeranno solo una volta, facendo sembrare il modello una L invertita (con la barra trasversale in alto) . In genere, tuttavia, i modelli di lettura assomigliano più o meno a una F, sebbene la distanza tra la barra superiore e quella inferiore vari.

Indipendentemente dal fatto che si tratti di una "F", una "L", una "E" o anche un motivo a "Z" per pagine meno pesanti di testo, le implicazioni sono le stesse: le persone di lingua inglese leggono da sinistra a destra e dall'alto verso il basso durante la scansione delle differenze nel contenuto. Titoli, sottotitoli, immagini, parole in grassetto, didascalie, elenchi: questi sono elementi dissimili dal testo standard non formattato.

Guarda le pagine fittizie qui sotto:

Non contengono parole reali, ma probabilmente sei in grado di organizzare mentalmente quella giusta meglio della sinistra. Quello di destra si adatta allo stile di lettura del modello F, mentre il sinistro non organizza il suo contenuto in una gerarchia visiva di sorta.

Sappiamo già dalla ricerca che blocchi di testo come quelli nella pagina di sinistra raramente vengono letti. Quindi, come ti assicuri che il tuo lo faccia?

Progettare con le differenze in mente

Prima di iniziare a creare una gerarchia visiva, è necessario un obiettivo, afferma Peep Laja di CXL:

Dovresti classificare gli elementi sul tuo sito web in base al tuo obiettivo aziendale. Se non hai un obiettivo specifico, non puoi sapere a cosa dare la priorità.

Usa uno screenshot di una homepage di Williams Sonoma per dimostrare:

Il più grande colpo d'occhio è l'enorme pezzo di carne (fammelo desiderare), seguito dal titolo (dì di cosa si tratta) e dal pulsante di invito all'azione (prendilo!). Il quarto posto va a un paragrafo di testo sotto il titolo, il quinto è il banner di spedizione gratuita e la navigazione in alto è l'ultima. Questa è una gerarchia visiva ben fatta.

Sulla tua pagina di destinazione post clic, tuttavia, non dovrebbe esserci alcun menu di navigazione. Quindi, l'attenzione sarà attirata in modo leggermente diverso. Diamo un'occhiata a una pagina di destinazione post clic di Simply Measured:

Dove sono finiti i tuoi occhi per primi? Prossimo? Scorso? Se dovessimo indovinare, diremmo...

1. Il titolo: "Come rendere più veloci le decisioni di marketing sociale".
2. Il sottotitolo: "Scopri come risparmiare tempo e sembrare un professionista".
3. Il testo in grassetto: “In questa guida imparerai a…”
4. La copia puntata sotto il testo in grassetto.
5. L'invito all'azione: "Invia".

Questo è un esempio di una grande gerarchia visiva perché trasmette le informazioni nell'ordine più rilevante per i visitatori. Innanzitutto, il titolo e il sottotitolo comunicano l'USP dell'offerta in modo orientato ai vantaggi. I potenziali clienti capiscono immediatamente che impareranno come prendere decisioni sociali più velocemente con l'offerta in questa pagina.

Dopodiché, scansionando il lato sinistro della pagina nel tipico modello F, i visitatori notano il testo in grassetto che li conduce all'elenco puntato, che descrive esattamente ciò che si può guadagnare rivendicando l'offerta.

Infine, i potenziali clienti eseguono la scansione un po' più in basso, quindi attraverso la pagina, dove vedono il pulsante di invito all'azione che è stato colorato in modo diverso rispetto al resto degli elementi sulla pagina per attirare l'attenzione. Consente loro di sapere come richiedere la loro offerta.

La copia del corpo può essere letta per intero dopo che questi tre elementi sono stati fissati, ma potrebbe non esserlo, motivo per cui è importante far risaltare le tue informazioni più importanti. In questo ordine, la tua gerarchia visiva dovrebbe almeno:

1. Cattura l'attenzione con un titolo e fai sapere ai visitatori perché dovrebbero leggere il resto della tua 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.

Quindi, come lo fai esattamente con gli elementi di design? Sai che "diverso" attira l'attenzione, il che a sua volta trasmette importanza, ma quali elementi di design dovresti usare quando crei una gerarchia visiva?

Le caratteristiche che influiscono sulla gerarchia visiva

Secondo il designer e autore freelance Steven Bradley, cinque caratteristiche possono essere manipolate per formare una gerarchia visiva sulla tua pagina:

• Dimensioni: come ci si aspetterebbe, elementi più grandi hanno più peso
• Colore — Non è del tutto chiaro il motivo, ma alcuni colori sono percepiti come pesanti più di altri. Il rosso sembra essere il più pesante mentre il giallo sembra essere il più leggero.
• Densità: impacchettare più elementi in un dato spazio, dà più peso a quello spazio
• Valore: un oggetto più scuro avrà più peso di un oggetto più leggero
• Spazio bianco: lo spazio positivo pesa più dello spazio negativo o dello spazio bianco

La misura in cui utilizzi questi elementi sulla tua pagina di destinazione post clic influenzerà la posizione degli occhi dei tuoi visitatori. Ecco come usarli per creare la tua gerarchia visiva:

• Dimensioni: il titolo dovrebbe essere il testo più grande della tua pagina. Se ne hai uno, il sottotitolo dovrebbe essere il secondo più grande. Più piccoli dovrebbero essere i sottotitoli che usi per separare il contenuto se la tua pagina è lunga, e il più piccolo dovrebbe essere il testo del corpo non formattato.

• Colore: questo elemento è molto importante per il tuo invito all'azione. La combinazione di colori gioca un ruolo importante nel guidare il tuo visitatore verso il tuo pulsante. La chiave qui è il contrasto. Notare che nella pagina di destinazione post clic di Simply Measured, il colore arancione appare solo una volta su una pagina principalmente blu e bianca. Ciò rende il pulsante CTA estremamente evidente per il visitatore.

• Densità: guarda di nuovo la pagina Williams-Sonoma. Il titolo e l'invito all'azione sono entrambi sovrapposti all'immagine in primo piano. Mettendo tutti questi elementi in uno spazio così piccolo, i designer hanno attirato più attenzione su di esso rispetto al menu o al banner sopra.

• Valore: le parole in grassetto attirano più attenzione di quelle non formattate. Il titolo, il sottotitolo e il testo del corpo che introducono i vantaggi della tua offerta dovrebbero avere più valore rispetto al resto del testo sulla tua pagina.

• Spazio bianco: ricorda i risultati dello studio della Direct Marketing Association di Monaco di Baviera: uno dei più grandi che attirano l'attenzione sono i piccoli paragrafi. "Suddividere" il testo in sezioni composte da un massimo di tre frasi può renderlo non solo più accattivante, ma anche più facile da leggere e conservare.

Leggi le tue informazioni più importanti

La gerarchia visiva aiuta i visitatori a dare la priorità alle informazioni sulla tua pagina di destinazione post clic. Fai convertire i tuoi visitatori creandone uno che:

• Sottolinea il tuo USP nel titolo
• Trasmette i vantaggi della tua offerta nel body copy
• Consente ai potenziali clienti di sapere come richiedere la tua offerta con il pulsante CTA

Inizia a progettare la tua gerarchia visiva in modo rapido e semplice, registrati oggi stesso per una demo di Instapage Enterprise.