Come utilizzare il modello F per aumentare le conversioni

Creare la tua pagina di destinazione post clic per includere tutti gli elementi vitali della pagina di destinazione post clic è importante, ma altrettanto importante è il loro ordine e posizione: il layout della tua pagina di destinazione post clic.

Quando si progetta il layout della pagina di destinazione post clic, è essenziale considerare il modo in cui è più probabile che i visitatori visualizzino la pagina. Riconoscere la nostra tendenza a leggere dall'alto verso il basso è un buon inizio per far sì che i visitatori si concentrino su ciò che vuoi che facciano. Sapendo dove è probabile che vada il loro sguardo, puoi creare una gerarchia visiva e posizionare il tuo CTA nelle posizioni migliori per la conversione.

C'è stata anche un'ampia ricerca per supportare questo. Nel 2006, il Nielsen Norman Group ha condotto quello che oggi è uno degli studi di eye-tracking più utili e più citati fino ad oggi. Durante lo studio, hanno esaminato come 232 utenti hanno visualizzato migliaia di pagine Web diverse. I risultati hanno concluso che il comportamento di lettura principale degli utenti era relativamente coerente tra i vari siti e attività. Gli utenti leggono in un layout F-Pattern.

Cos'è il modello F?

L'F-Pattern è il modo in cui i nostri occhi si muovono quando leggiamo contenuti online. In una manciata di secondi, i nostri occhi si spostano a velocità eccezionali attraverso la copia del sito Web e altri elementi visivi, scansionando la pagina in questo ordine:

• Innanzitutto, nella parte superiore della pagina per leggere i titoli importanti
• Quindi, in basso a sinistra della pagina per visualizzare numeri o elenchi puntati
• Infine, attraversa di nuovo la pagina per leggere il testo in grassetto o i sottotitoli

Le tre mappe di calore di seguito sono derivate da studi di tracciamento oculare degli utenti di tre diversi siti Web. La chiave di colore è la seguente:

• Rosso = il più visto e il più fissato
• Giallo = alcune visualizzazioni, ma meno fissazione
• Blu = meno visto e quasi nessuna fissazione
• Grigio = quasi nessuna vista e nessuna fissazione

Si noti che il modello di lettura F è più un contorno approssimativo e generalizzato, non necessariamente una forma F esatta. Inoltre, tieni presente che il design F-Pattern non si limita a due steli orizzontali come un tradizionale F.

Ci saranno momenti in cui gli utenti leggono solo attraverso una linea orizzontale, facendo sembrare il motivo una L capovolta. Altre volte leggeranno una terza sezione della pagina, facendo sembrare il disegno più una E che una F. E , se la tua pagina di destinazione post clic è più lunga, ti consigliamo di includere più di due gambi per contribuire a creare una gerarchia visiva che è più probabile che le persone seguano.

Come si applica il modello F alle pagine di destinazione post clic

È importante progettare pagine Web con un flusso intenzionale. Senza nulla posizionato specificamente per attirare l'attenzione dei tuoi spettatori, i loro occhi si sposteranno naturalmente su una pagina ricca di contenuti nel design F-Pattern.

Il design F-Pattern funziona meglio per le pagine dense di testo, come post di blog, pagine dei risultati di ricerca, pagine di vendita più lunghe, ecc. Tuttavia, ciò non significa che non puoi progettare pagine di destinazione post-clic in formato breve con il layout del modello F.

Utilizzando i risultati degli studi sul tracciamento oculare, puoi progettare strategicamente qualsiasi pagina di destinazione post clic in modo che gli elementi più importanti siano esattamente dove i tuoi visitatori hanno maggiori probabilità di concentrarsi su di essi.

Tieni presente che gli occhi degli spettatori iniziano quasi sempre nell'angolo in alto a sinistra della pagina prima di scansionare il resto della pagina. Quindi, se la tua pagina di destinazione post clic è occupata e desideri che i visitatori notino subito un particolare elemento, ad esempio un conto alla rovescia per la tua offerta, assicurati di inserirlo in questa sezione in alto a sinistra. Quindi, progetta il resto della tua pagina di destinazione post clic con una chiara gerarchia visiva e un flusso che conduca i tuoi spettatori al tuo CTA.

Una pagina di destinazione post clic che ignora l'F-Pattern

Pest Exterminator ha creato questa pagina di destinazione post clic e non segue il layout F. Manca qualsiasi gerarchia visiva:

Dove va prima la tua attenzione? L'immagine? Lo sconto? Il campo a una forma? Le tre offerte in fondo?

I tuoi occhi non sono attratti da un luogo specifico. C'è troppo da fare per attirare la tua attenzione in diverse direzioni. Ogni elemento è stato formattato per attirare quanta più attenzione possibile, il che li rende tutti in competizione tra loro. Pertanto, è difficile per i visitatori identificare l'obiettivo principale della pagina e lo sterminatore di parassiti probabilmente avrà difficoltà a generare conversioni.

Ora diamo un'occhiata ad alcuni esempi di landing page post clic che seguono lo schema F-Reading.

Tieni presente che per le pagine di destinazione post clic più brevi, abbiamo mostrato l'intera pagina. Per le pagine più lunghe, abbiamo visualizzato solo above the fold. Inoltre, alcuni dei marchi elencati potrebbero testare A/B la propria pagina con una versione alternativa rispetto a quella visualizzata di seguito.

pagine di destinazione post clic che seguono il layout F

Dovico

La pagina di destinazione post-clic di Dovico sopra impiega le migliori pratiche di web design di F-Pattern. Nota come ogni componente importante si trova esattamente lungo il percorso F-Pattern dove i visitatori guarderanno naturalmente quando visualizzeranno questa pagina:

1. Gli spettatori guarderanno prima nell'angolo in alto a sinistra della pagina, dove noteranno il logo dell'azienda.
2. Muovendosi lungo il primo stelo orizzontale, arriveranno poi al volto sorridente della donna. Ciò che è particolarmente interessante qui è che l'angolo F si inclina verso il basso verso il suo viso e non è direttamente dritto verso i numeri di telefono.
3. Spostandosi in basso sul lato sinistro della pagina fino al ramo orizzontale successivo, gli spettatori concentreranno la loro attenzione sul titolo e sul sottotitolo.
4. Infine, continueranno il modello F lungo lo stelo verticale, dove arriveranno al pulsante CTA, che è l'obiettivo principale della pagina di destinazione post-clic.

Posizionare gli elementi della pagina di destinazione post clic più essenziali lungo il layout F in questo modo aiuta a ottimizzare la pagina di Dovico e convincere i visitatori ad agire sull'offerta.

Rendimento dinamico

Anche la pagina di destinazione post clic di Dynamic Yield segue il layout F-Pattern, ma poiché il loro nome e logo è la cosa più piccola above the fold, è probabile che gli occhi dello spettatore inizino in una posizione diversa:

1. Probabilmente saranno attratti prima dal titolo della pagina, poiché il carattere è più grande e una parte di esso è in grassetto.
2. Successivamente, si sposteranno lungo il primo stelo fino all'immagine a destra, che completa il primo stelo orizzontale.
3. Scorrendo lo stelo verticale, gli spettatori leggeranno il sottotitolo.
4. Proseguendo verso il basso, è probabile che il pulsante CTA blu brillante catturi l'attenzione del visitatore in seguito.
5. Dopo il pulsante CTA, i badge del cliente fungono da stemma aggiuntivo e la pagina continua in modo simile below the fold.

La Chiropratica Congiunta

Poiché i progetti F-Pattern non devono sempre seguire una tradizionale forma a F, nota come la pagina di destinazione post-clic di The Joint Chiropractic ha alcuni gambi orizzontali:

1. Simile a Dynamic Yield, il titolo inizia con il modello F (e continua a destra con il modulo).
2. In secondo luogo, la dichiarazione di intenti (in caratteri più grandi rispetto al resto della copia) cade lungo lo stelo successivo.
3. Infine, l'iconografia e i vantaggi in grassetto di The Joint Chiropractic costituiscono gli steli finali del modello.

Nonostante il maggior numero di steli, la pagina è stata creata tenendo conto delle migliori pratiche di web design di F-Pattern, rendendo facile per i visitatori seguire e concentrarsi sulle parti più importanti della pagina di destinazione post-clic.

Il Boston Globe

La pagina di destinazione post-clic del Boston Globe non segue una tipica forma a F, che alla fine li aiuta a convincere i visitatori a convertirsi alla promozione:

1. Partendo dall'angolo in alto a sinistra, i visitatori individuano per primi il logo del giornale.
2. Direttamente sotto il logo c'è il titolo, seguito dall'immagine lungo lo stesso gambo orizzontale.
3. Proseguendo lungo lo stelo verticale, i visitatori si fissano sul pulsante CTA verde brillante.
4. Se scelgono di continuare più in basso lungo lo stelo verticale, impareranno cosa possono aspettarsi quando si iscrivono per l'accesso illimitato.

È il tuo turno di usare il modello F

Includere tutti gli elementi necessari della pagina di destinazione post clic è importante per le conversioni, ma il loro layout è altrettanto importante.

Il design F-Pattern ti aiuta a stabilire una gerarchia visiva e un flusso intenzionale per far sì che i visitatori si concentrino su elementi specifici. Se riesci a convincerli a seguire il percorso che desideri, avranno meno probabilità di rimbalzare e invece saranno più coinvolti e agiranno sulla tua pagina.

Con questi esempi in mente, tocca a te mettere in pratica l'F-Layout. Crea la tua landing page professionale post clic con Instapage, richiedi oggi stesso una demo Enterprise.