Orientare l’attenzione visiva nelle landing page

Il compito di una landing page è convertire i visitatori del sito in lead o in clienti. Per poter raggiungere questo obiettivo deve suscitare interesse e, per farlo, deve prima di tutto attirare l’attenzione.

Definita l’azione più importante che l’utente deve compiere una volta approdato sulla pagina, è necessario utilizzare in maniera persuasiva i dispositivi verbali e visuali che abbiamo a disposizione – principalmente attraverso la call to action e gli elementi (foto)grafici più importanti – creando delle scorciatoie cognitive che agevolino il processo di selezione e valutazione delle informazioni.

Lo scopo è modellare il design verbale e visuale a supporto dell’invito all’azione, portando l’attenzione del visitatore esattamente dove vogliamo. A tal proposito va considerato che nel Web l’attenzione fornita dall’utente è per lo più visiva, per cui è su questo aspetto che dobbiamo insistere per migliorare le performance della landing page. Vediamo in che modo.

Centri d’attenzione e percorsi visivi

I centri d’attenzione sono i punti di interesse sui quali si concentra lo sguardo nel momento in cui osserviamo un determinato contesto visivo. Durante la scansione dello spazio gli occhi eseguono movimenti rapidissimi alla ricerca di elementi di potenziale attrattiva: è su questi che si focalizza l’attenzione. Può essere qualsiasi cosa che per forma, colore, disposizione spaziale emerge all’interno della scena che stiamo esaminando.

Non tutti, però, ottengono lo stesso risultato in termini di coinvolgimento. Quelli più efficaci sono i centri d’attenzione che riescono a stimolare i recettori presenti nella parte più profonda del cervello, a dialogare con la parte irrazionale ed emotiva dell’osservatore.

Esistono centri d’attenzione verso i quali il nostro cervello prova un’innata attrazione. Uno di essi è rappresentato dai volti umani: in una situazione in cui compaiono volti di persone il nostro sistema visivo è naturalmente portato a concentrarsi su di essi, in particolare sugli occhi. Anche le mani, e i gesti che compiono, costituiscono dei punti di interesse molto rilevanti.

Poi ci sono gli indicatori direzionali – come le frecce – che sono in grado di attivare una risposta inconscia da parte del cervello che ci porta a volgere automaticamente l’attenzione verso il punto segnalato.

Un aspetto particolarmente interessante dei centri d’attenzione come gli occhi, le mani e gli indicatori direzionali (più o meno espliciti) è che creano dei percorsi visivi lungo le direzioni suggerite dalla loro posizione, direzioni che il nostro sguardo segue spontaneamente.

Il percorso visivo, che definiamo mediante il movimento dei nostri occhi, dà origine a quella che in gergo prende nome di linea latente; essa non è reale, ma è creata psicopercettivamente e per il cervello assume lo stesso valore delle linee disegnate.

Questo fenomeno può essere sfruttato con profitto nella realizzazione dei visual delle landing page per orientare l’attenzione visiva dell’utente verso l’elemento desiderato, come la call to action, il form da compilare, il pulsante da premere.

Ecco qualche esempio:

Sempre in tema di percorsi visivi è possibile fare un’ulteriore considerazione. A parità di condizioni, gli elementi posti in basso a destra nella composizione subiscono una forza avanzante, cioè sembrano venire più incontro all’osservatore rispetto a quelli posti nelle altre parti del campo; quelli in alto a sinistra invece sono soggetti a una forza retrocedente, appaiono cioè allontanarsi dall’osservatore. Queste aree del campo si definiscono rispettivamente zona di massimo avanzamento e zona di massimo arretramento, mentre la diagonale che le unisce è stata chiamata da Wassily Kandinsky diagonale disarmonica. Può essere utile tenerne conto nel disporre le componenti grafiche nella landing page, ad esempio collocando l’invito all’azione nella zona di massimo avanzamento perché l’occhio tende a percorrere la diagonale disarmonica e a fermarsi in basso a destra.

Rompere gli schemi

In una landing page meno c’è, meglio è. Nonostante questo sano principio, può capitare che nella pagina compaiano diversi elementi che sono costretti a contendersi l’attenzione del pubblico, come accade per esempio quando ci sono più offerte tra cui scegliere o quando il numero di informazioni che è necessario fornire riduce la percentuale di visibilità delle singole entità.

In casi simili è bene adottare delle misure che facilitino l’individuazione degli oggetti sui quali vogliamo che venga compiuta l’azione desiderata, dei criteri di composizione che permettano di distinguerli da tutto il resto rendendoli centri d’attenzione.

La maniera migliore per riuscirci consiste nel rompere lo schema strutturale su cui è costruita la landing page, alterando la coerenza grafica e il ritmo visivo degli elementi nel punto di interesse. Di solito, infatti, le pagine web presentano una sequenza ottica ben ordinata, costituita da un insieme di figure uguali o somiglianti – dal punto di vista formale e cromatico – che si ripetono a intervalli più o meno regolari. In un contesto del genere la rottura dello schema diventa un valido mezzo per porre in evidenza un oggetto proprio perché, mentre osserviamo una sequenza visiva che si interrompe, i nostri percorsi visivi si focalizzano dove rileviamo la soluzione di continuità.

Uno dei modi per ottenere questo effetto è modificare la geometria degli elementi inserendo in corrispondenza dell’invito all’azione una forma che stravolga l’uniformità del progetto. Ad esempio, in un layout contraddistinto da entità rettangolari possiamo assegnare al pulsante che ci interessa venga premuto un aspetto circolare.

Oppure possiamo cambiare l’orientamento degli oggetti su cui vogliamo cada l’occhio rispetto alla disposizione e alla direzione assunta dal resto dell’impaginato grafico. In genere nelle pagine web prevale l’orientamento orizzontale o verticale degli elementi (titoli, paragrafi, campi di testo, immagini, pulsanti, ecc.), per cui posizionare in diagonale l’invito all’azione può essere una buona idea per metterlo in risalto.

Infine, agire sul colore è sempre uno dei sistemi più adatti a creare incoerenza visiva, a patto che nella landing page sia presente una certa omogeneità cromatica che renda evidente lo stacco tra l’oggetto di interesse e il resto. Sul colore vale la pena citare un fenomeno caratteristico legato alla fisiologia dell’occhio: l’effetto avanzante del colore rosso e retrocedente del colore azzurro secondo cui, a parità di condizioni, un oggetto rosso apparirà più vicino all’osservatore rispetto a un oggetto azzurro.

È possibile combinare tra loro le diverse modalità di rappresentazione – forma, orientamento e colore – per rafforzare l’effetto, ma senza esagerare in quanto ciascuna di esse, se opportunamente utilizzata, è più che sufficiente per raggiungere lo scopo desiderato.

Giocare con l’inconscio

In alcuni casi è possibile creare dei centri d’attenzione o dei percorsi visivi in maniera sottile, quasi subliminale, agendo sotto il livello di coscienza, attraverso l’inserimento di componenti grafiche in apparenza troppo deboli per essere avvertite consapevolmente, ma comunque capaci di influenzare l’inconscio e condizionare il comportamento dell’utente.

Quando si riesce a lavorare in questo modo il risultato è più “elegante” perché sono meno evidenti i metodi impiegati per ottenerlo.

Di seguito alcuni esempi.

Noti nulla di particolare? La punta del dito indice cade proprio sul pulsante, quasi a volerlo premere. Forse non te ne sei accorto, ma il tuo cervello probabilmente sì.

In questo caso, invece, dove sta puntando il razzo? Non è propriamente una freccia, ma la direzione che invita a seguire è ben delineata.

Scacco matto e il re cade proprio in direzione del pulsante che, non a caso, ha lo stesso colore.

Occhio ai risultati

Quando si progetta una landing page è bene eseguire dei test per valutarne l’efficacia. Per esempio, un semplice test A/B può essere d’aiuto nel capire quale soluzione stilistica, tra le due prese in considerazione, offre migliori performance in termini di conversione.

Quando però si tratta di misurare la presa attentiva dell’utente lo strumento più adatto per farlo è di certo l’eye tracking, una tecnica che consente di rilevare, attraverso il monitoraggio oculare, i punti della pagina web su cui si focalizza l’attenzione del visitatore.

I dati raccolti attraverso l’eye tracking possono essere di vario genere e presentati sotto diverse forme di rappresentazione visiva. Quelle più utilizzate sono tre:

• heat map, o mappe di calore: consentono di identificare le aree in cui si focalizza maggiormente lo sguardo, segnalando con colori differenti i punti di maggiore o minore interesse (rispettivamente in rosso e in blu/verde);
  
• gaze plot: forniscono informazioni circa i percorsi visivi seguiti dagli utenti, indicando nello specifico il posizionamento dello sguardo, l’ordine di visualizzazione e la durata delle fissazioni;
  
• aree di interesse (AOI, areas of interest): permettono di isolare e analizzare specifiche zone su cui si concentra l’attenzione degli osservatori.
  

È giusto precisare che per ottenere valori attendibili da qualsiasi test sulla landing page il campione di pubblico su cui effettuare le misurazioni deve essere sufficientemente ampio.