Design di una landing page: struttura per pagine che convertono

Un buon design di landing page è un obiettivo, argomentato in ordine. A differenza di una homepage, che serve tutti, una landing page esiste per un visitatore che arriva da un posto preciso per compiere un'azione: prenotare la lezione di prova, iscriversi alla lista d'attesa, riscattare l'offerta. La struttura che funziona sempre è una hero chiara, il problema con le parole del lettore, come funziona, le prove, i dettagli dell'offerta, le risposte alle obiezioni e la stessa call to action alla fine. Il compito del design è rendere quell'ordine facile da seguire.

Una pagina, un obiettivo

Scrivi l'obiettivo in una sola frase prima di progettare qualsiasi cosa: «Far prenotare una lezione introduttiva gratuita ai nuovi visitatori che arrivano dal nostro annuncio Instagram.» Così ogni sezione ha un test. Aiuta quella persona a compiere quel passo? Se no, taglia o sposta sul sito principale.

Struttura di una landing page, sezione per sezione

1. 1

   Hero

   Titolo con la promessa, una riga di supporto, un pulsante, un'immagine. Il design della sezione hero tratta questa schermata nel dettaglio.

2. 2

   Il problema

   Due o tre frasi che descrivono la situazione in cui si trova il visitatore, con le sue parole. Mostra che capisci prima di vendere.

3. 3

   Come funziona

   Tre passaggi, ciascuno con un titolo breve e una frase. Ci si impegna più facilmente quando si riesce a immaginare il processo.

4. 4

   Prove

   Testimonianze vere con nomi, foto di lavori veri, loghi di clienti veri o una breve demo. Mai inventate.

5. 5

   L'offerta nel dettaglio

   Cosa ottengono esattamente, quando, e cosa costa o non costa. Condizioni chiare eliminano l'esitazione.

6. 6

   Obiezioni

   Una breve FAQ che risponde ai motivi per cui la gente non agisce: tempo, prezzo, adeguatezza, disdetta, cosa succede dopo.

7. 7

   Call to action finale

   Ripeti la promessa del titolo e lo stesso pulsante. I visitatori che leggono fino in fondo sono pronti; non farli tornare su.

Non ogni pagina ha bisogno di ogni sezione. Una lista d'attesa per un lancio può essere solo una hero, tre righe su come funziona e un campo email. Un'offerta di forte impegno, come un corso o una consulenza, di solito le richiede tutte e sette e più prove.

Un esempio concreto: offerta introduttiva di uno studio yoga

Fai corrispondere la pagina all'annuncio che ha portato il visitatore

La maggior parte dei visitatori di una landing page arriva da qualcosa: un annuncio Instagram, un annuncio LinkedIn, un'email, un QR code su un volantino. Appena atterrano, controllano di essere nel posto giusto. Ripeti nel titolo l'offerta esatta dell'annuncio e porta con te il suo aspetto: lo stesso sfondo, gli stessi colori e lo stesso carattere. Una pagina che non somiglia all'annuncio sembra un'esca, anche quando non lo è.

Progettare entrambi da un'unica fonte lo rende automatico. In Gradiently, con Pro un solo progetto può essere ridimensionato a ogni formato in un passaggio, così il post, la storia, l'intestazione dell'email e la hero della pagina condividono un Mark e un titolo. Un solo aspetto, ogni formato mostra il flusso di lavoro, e la coerenza del brand spiega perché conta oltre una singola campagna.

Scelte di design che tengono le persone a scorrere

• Un solo colore d'accento per tutti i pulsanti, usato solo lì. L'occhio impara dove cliccare. La regola 60 30 10 è un buon modo per impostare l'equilibrio.
• Spazio generoso tra le sezioni, così ognuna si legge come un'unica idea. Le pagine affollate sembrano una fatica.
• Titoli che hanno senso da soli. Molti scorrono solo i titoli; devono raccontare l'intera storia.
• Foto vere al posto di quelle stock. La tua vera sala, il tuo prodotto, il tuo team o i tuoi risultati.
• Moduli brevi. Chiedi solo ciò che ti serve ora. Un indirizzo email è più facile da dare di un numero di telefono.
• Nessun menu di navigazione, o solo un logo, così non c'è dove andare a zonzo.

Prima il mobile, poi i test

Il traffico dai post social arriva per lo più da telefoni, quindi progetta prima la versione larga 390 pixel. Tieni titolo e pulsante nella prima schermata, fai i pulsanti alti almeno 44 pixel e usa un pulsante fisso solo se non copre il contenuto.

Non esiste un buon tasso di conversione universale: dipende dall'offerta, dal prezzo e dal traffico. Ciò che puoi sempre fare è rendere la versione successiva più chiara della precedente. Per i colori dietro a tutto questo, vedi le combinazioni di colori per siti web.