Pagina di destinazione e home page: qual è la differenza?

Il design della homepage del sito web della metà degli anni '90 era un vero incubo per gli standard di design odierni, ma durante l'infanzia del web era tutto ciò che sapevamo. I collegamenti ipertestuali turchesi brillanti che fluttuavano nello spazio sembravano una buona idea all'epoca.

Due decenni dopo, le cose sono cambiate. Le home page di oggi si concentrano più sull'attirare i visitatori nell'imbuto di marketing che sull'abbagliarli con grafiche e colori ultraterreni che abbracciano lo spettro visibile. Creare esperienze ad alta conversione in pochi minuti è ora possibile grazie ai costruttori di pagine di destinazione.

A tale riguardo, le home page stanno diventando molto simili alle landing page post-clic. Ma ci sono ancora alcune grandi differenze tra loro. Tieni a mente queste differenze di design per creare pagine altamente efficaci.

Design della home page del sito Web rispetto al design della pagina di destinazione post clic: cosa devi sapere

1. Le pagine di destinazione post clic e le home page dei siti Web dovrebbero essere create per utenti diversi

Ok, quindi le possibilità che ti imbatti in una homepage che assomigli al casino di Microsoft del 1995 sono scarse. Ma perché?

Kara Jensen, Principio Creativo di BOP Design, spiega:

"Può essere facile farsi prendere dal concetto di un sito Web e dimenticare l'utente finale. Un sito Web di successo non è solo un bel pezzo visivo; è un portale per attirare il pubblico di destinazione e fornire loro le informazioni di cui hanno bisogno per decidere se vogliono diventare un nuovo cliente."

Nelle professioni creative come il web design, non è raro che i designer (e persino i clienti) si affezionino così tanto al prodotto finale da dimenticare per chi lo stanno realizzando: il visitatore.

Vent'anni fa, quel paesaggio spaziale disseminato di collegamenti ipertestuali poteva sembrare interessante al designer di Microsoft, ma era qualcosa che interessava all'utente? Probabilmente no.

Che ne dici di quel pulsante laterale "FAQ" nella seconda homepage? È stato progettato pensando all'utente? No.

Prima di progettare qualsiasi pagina, è essenziale chiedersi: "Qual è l'obiettivo di questa pagina?" — o, ancora meglio, "Qual è l'obiettivo di un utente che raggiunge questa pagina?"

Qual è l'obiettivo della pagina?

Sulla tua home page, quell'obiettivo è impossibile da prevedere per ogni visitatore. I nuovi potenziali clienti o i lead di ritorno potrebbero voler conoscere la storia dietro la tua attività, mentre altri andranno direttamente ai piani e alle informazioni sui prezzi. Ecco perché le home page includono barre di navigazione e più collegamenti in uscita che offrono ai visitatori un facile accesso a qualsiasi contenuto desiderino.

Prendiamo ad esempio la homepage del prodotto Zoho CRM, in cui la navigazione consente a clienti, sviluppatori e potenziali clienti di apprendere ogni minimo dettaglio sullo strumento:

Le landing page post clic, però, hanno un solo obiettivo: convertire un visitatore in un'offerta. Quando gli utenti accedono alla tua pagina di destinazione post clic da un link promozionale, è perché stanno considerando di rivendicare l'offerta che hai pubblicizzato. Ecco perché, nella tua pagina di destinazione post clic, è tuo compito includere solo le informazioni di cui il tuo visitatore avrà bisogno per determinare se vale la pena rivendicare quell'offerta.

Ecco una pagina di destinazione post clic creata dalla stessa azienda:

Le principali differenze di design possono essere viste above the fold, anche a colpo d'occhio. La mancanza di navigazione in questa pagina mantiene i visitatori concentrati sull'offerta su cui hanno cliccato per valutare. Il titolo sulla pagina di destinazione post clic è molto più orientato ai vantaggi rispetto a quello sulla home page.

Sotto la piega, la home page presenta schermate dell'app piene di collegamenti ad altre pagine, mentre la pagina di destinazione post clic presenta numeri specifici per dimostrare l'efficacia dello strumento.

Pagina iniziale:

pagina di destinazione post clic:

Scorri ancora più in basso e vedrai che la homepage di Zoho utilizza piccoli paragrafi di testo che inducono i visitatori a mostrare le pagine del sito Web, mentre la pagina di destinazione post-clic lo sostituisce per la prova sociale:

Pagina iniziale:

pagina di destinazione post clic:

Sulla homepage, abbiamo contato più di 80 link ad altre pagine che non erano CTA. Nella pagina di destinazione post clic, ce n'erano due. Tuttavia, due sono troppi. Il rapporto tra link e pulsanti CTA (ovvero il tuo "rapporto di conversione") sulla tua pagina di destinazione post-clic, dovrebbe essere sempre 1:1.

Diamo un'occhiata a un altro esempio, questa volta da FreshBooks. Innanzitutto, la loro homepage, above the fold:

Ora, una delle pagine di destinazione post clic dell'azienda, above the fold:

Sembrano quasi identici, vero? Quasi, ma nota nella pagina di destinazione post clic che il titolo e l'invito all'azione sono stati modificati. In particolare, il menu di navigazione è stato rimosso per mantenere i visitatori concentrati sulla valutazione dell'offerta.

Diverse parti della homepage sotto la piega sono le stesse. Entrambi presentano prove sociali, gli stessi paragrafi di testo orientati ai benefici e molta della stessa grafica. Ma guarda attentamente e noterai che, nella pagina di destinazione post clic, tutti i CTA secondari sono stati sostituiti dal pulsante "Provalo gratis".

Ecco uno screenshot dalla homepage:

Ed eccone uno dalla pagina di destinazione post clic:

Non lasciare che il paradosso della scelta entri in gioco

Ricorda il paradosso della scelta: più opzioni hai, più difficile diventa prendere una decisione. Ecco perché ci vuole sempre più tempo per ordinare nei ristoranti con menu più estesi.

Nel ristorante che è la tua pagina di destinazione post clic, i CTA sono le voci del tuo menu. Offri ai tuoi visitatori solo uno tra cui scegliere. FreshBooks lo fa con l'invito all'azione "Provalo gratis" in tutta la pagina.

Sulla loro homepage, FreshBooks offre ai visitatori più CTA, il che va bene. Questi "CTA secondari" come "Ulteriori informazioni" aiutano i potenziali clienti a trovare le risposte alle loro domande e, se progettati correttamente, non distoglieranno nemmeno troppa attenzione dal CTA principale.

Riesci a individuare l'invito all'azione principale e l'invito all'azione secondario in questa pagina?

Vedi come "Provalo gratis" appare più dei pulsanti incolori "Ulteriori informazioni" qui sotto? Il designer di questa pagina vuole attirare il visitatore sul pulsante "Provalo gratis", ma offre comunque ai potenziali clienti l'opportunità di imparare se non sono pronti a provare. E questa è la differenza più significativa tra la home page di un sito Web e una pagina di destinazione post clic.

La home page si concentra maggiormente sull'informazione e la responsabilizzazione del visitatore, mentre la pagina di destinazione post clic si concentra sulla persuasione del visitatore.

Non possiamo sapere con certezza l'obiettivo di ogni visitatore della home page. Tuttavia, l'obiettivo del visitatore della pagina di destinazione post clic? È prendere una decisione. Crea una pagina di destinazione post clic anatomicamente corretta per aiutarli a farlo.

2. Le home page seguono l'esempio minimalista delle landing page post clic

Sebbene i loro obiettivi specifici possano essere diversi, in un modo fondamentale, i visitatori della pagina di destinazione post clic e i visitatori della home page vogliono la stessa cosa. Sergie Magdalin, Chief Web Design Officer di Webflow, spiega:

"I designer di tutto il mondo si sono resi conto che le persone visitano i siti Web per i loro contenuti - che si tratti di tempeste di tweet infuriate, lunghe letture ponderate o l'ultimo meme "generato dagli utenti" - e il ruolo finale del design è quello di presentare i contenuti in modo intuitivo, efficiente e " modo delizioso".

Questo è uno dei motivi per il passaggio dal design scheuomorfo verso approcci di design più "piatti", più minimalisti..."

Nel 1995, le migliori pratiche di progettazione e l'euristica web standardizzata dovevano ancora essere sviluppate. I creatori di siti web avevano poche ricerche su cui basare i loro progetti. È così che Internet è finito con i collegamenti ipertestuali che fluttuavano nello spazio.

Il design della pagina ha iniziato a cambiare

Man mano che sempre più aziende e consumatori si rivolgevano al Web, l'attenzione si concentrava sull'agevolare la transizione dal mondo reale al cyberspazio. I design scheuomorfi, come l'icona del cestino, ad esempio, hanno reso facile il riconoscimento degli elementi e della loro funzione sul web.

C'era un grosso problema con loro, però. Tendevano a ingombrare le pagine web. E questo interferiva con ciò che i visitatori volevano: il contenuto. Oggi, elementi di design "più piatti", minimalisti - ombre, caratteri di base e colori vivaci, ad esempio - lo presentano ai visitatori in modo semplice e diretto.

Questi elementi sono anche un punto fermo di un particolare tipo di pagina: la pagina di destinazione post clic. Come l'ascensore di un'azienda sul Web, una pagina di destinazione post-clic contiene tutto ciò di cui un visitatore ha bisogno per valutare rapidamente un'offerta e nient'altro.

Questo è ciò che li rende così efficaci nella conversione. Sottolineano il contenuto con un layout semplice. E ora le home page stanno iniziando a fare lo stesso. Dai un'occhiata a questa pagina di destinazione post clic del pilota automatico:

Ora guarda la loro homepage:

Abbastanza simile, vero? Fai clic e scorri verso il basso per vedere che i loro design sono simili anche sotto la piega.

Se hai bisogno di un altro esempio, torna alla home page di FreshBooks e alla pagina di destinazione post clic sopra. Oggi, indipendentemente dalla pagina web, il suo obiettivo è fornire contenuti invece di distrarli.

3. Sia le pagine di destinazione post clic che le home page dei siti Web devono guidare i visitatori con una gerarchia visiva

Anche prima di Internet, le persone hanno visualizzato le pagine allo stesso modo. I primi studi sull'eye-tracking hanno mostrato che i lettori prima inseriscono una pagina attraverso un'immagine o un titolo su una pagina scritta, quindi guardano in basso a sinistra per cercare il testo puntato o in corsivo. La copia del corpo è stata letta per ultima.

Sul web, questo è diventato noto come il modello a forma di F:

Per convincere i lettori a visualizzare i tuoi contenuti più importanti, dovrai creare quella che viene chiamata una "gerarchia visiva" basata sul modo in cui alle persone piace leggere. Dovrebbe assomigliare a qualcosa di simile a questo:

1. Usa immagini che catturano l'attenzione e un titolo importante per catturare i tuoi lettori.
2. Dividi il contenuto della tua pagina con sottotitoli.
3. Utilizza gli elenchi puntati per attirare l'attenzione sugli elementi di un elenco, come caratteristiche e vantaggi.
4. Usa la copia del corpo all'interno di quei sottotitoli e dei proiettili per elaborare brevemente.

La gerarchia dovrebbe anche essere basata su principi di web design familiari. Ad esempio, i loghi si trovano sempre nella parte superiore sinistra di una pagina web. I collegamenti sono sottolineati o di un colore diverso dal resto del testo. Non cercare di reinventare il modo in cui le persone leggono sul web. Uno studio del MIT una volta ha dimostrato che le persone preferiscono layout di pagina che sono familiari a quelli che tentano di deviare dalle migliori pratiche di vecchia data.

Esempio

Ecco un esempio di una buona gerarchia visiva:

L'immagine e il titolo catturano l'attenzione del lettore. Passano al sottotitolo, "Più di 40.000 organizzazioni e filiali in tutto il mondo... e ancora in crescita". Al di sotto di questo, i punti elenco trasmettono informazioni importanti sul software. A destra, un modulo raccoglie informazioni sui potenziali clienti e un pulsante dai colori vivaci completa la conversione.

Esempio di cattiva gerarchia visiva

Ecco un esempio di una cattiva gerarchia visiva:

La pagina ha un titolo, un sottotitolo, elenchi puntati e persino un'infografica, quindi cosa c'è che non va?

Bene, le persone leggono da sinistra a destra e poiché il modulo rompe il margine sinistro, il testo inizia dal modulo. Ciò significa che, per quanto riguarda i lettori, questa pagina inizia all'estremità destra di quel modulo. E questo significa che la parte più critica di questa pagina - il modulo e l'invito all'azione - si perde completamente.

I visitatori leggeranno il sottotitolo, i punti elenco e daranno un'occhiata all'infografica a destra perché è nel loro campo visivo. Tuttavia, anche con l'aiuto di quell'aiuto visivo, è innaturale per i lettori guardare il modulo a sinistra quando il resto del contenuto è a destra.

Ecco una homepage che crea una buona gerarchia visiva (clicca qui per vedere la homepage completa):

Un'immagine e un titolo attirano l'attenzione del lettore, quindi diversi sottotitoli con contenuto puntato descrivono brevemente i vantaggi del servizio. Quindi, una testimonianza video parla del potere di Upwork. E al di sotto di questo, un invito all'azione invita il visitatore a unirsi alla piattaforma.

Ecco un esempio di una cattiva gerarchia visiva della home page (fai clic qui per vedere la home page completa):

A prima vista, questa homepage sembra seguire le regole di una buona gerarchia. Un'immagine con un titolo sovrapposto attira l'attenzione del visitatore; quindi, un sottotitolo introduce alcune icone puntate. Al di sotto di questo, l'azienda mette in mostra premi e clienti importanti. Ma poi, sotto?

Niente. L'utente deve scorrere verso l'alto o cercare nel piè di pagina del sito Web per eseguire il passaggio successivo. Ogni elemento della tua pagina dovrebbe guidare il tuo visitatore all'ingresso della tua canalizzazione di marketing. Dovrebbe esserci un CTA alla fine di questa pagina.

Le home page dei siti web e le pagine di destinazione hanno più cose in comune di quanto pensi

Tutto questo parlare delle home page dei siti Web rispetto alle pagine di destinazione post clic potrebbe farti pensare che siano due animali completamente diversi. In un certo senso, lo sono certamente. Ma in fondo sono uguali.

La creazione di landing page post clic non è mai stata così facile, fino ad ora. Quindi, registrati oggi per una demo di Instapage Enterprise.