I migliori consigli per la progettazione di pagine di destinazione per dispositivi mobili che non troverai da nessun'altra parte

Ci sono molte risorse online che affrontano i progetti di landing page post-clic per dispositivi mobili, ma non ci sono molte istruzioni di progettazione specifiche su come creare effettivamente una pagina ad alta conversione.

Quale layout della struttura è consigliato per la visualizzazione mobile? Quanti pixel devono essere i pulsanti? Quanti pixel dovrebbero separare gli elementi? Dovresti usare l'effetto "hover"? Le etichette dei moduli devono essere interne o esterne?

Mi chiamo Cosmin Serban, direttore dei servizi di progettazione di Instapage. Potresti chiederti, cosa rende Cosmin qualificato per scrivere sul design della pagina di destinazione post-clic mobile?

Ho istruito i clienti sulle migliori pratiche nella progettazione e strutturazione delle loro pagine di destinazione post clic per migliorare i loro tassi di conversione. Inoltre ho:

• Ha recensito oltre 1.000 pagine di destinazione post clic
• Collaborato con i clienti per garantire che il loro messaggio venga trasmesso e che i loro visitatori abbiano una buona esperienza che alla fine porta a una conversione

Inoltre, facevo parte del team che ha sviluppato oltre 200 modelli ottimizzati utilizzati per creare e lanciare oltre 200.000 pagine di destinazione post clic, puoi trovare i modelli qui.

Design della pagina di destinazione post clic per dispositivi mobili: cosa sapere prima di iniziare

Alcuni concetti in questo articolo sono stati sviluppati internamente durante la creazione della nostra libreria di modelli. Ciò non significa necessariamente che tutti questi suggerimenti debbano applicarsi a ogni singola pagina di destinazione post clic che crei. Ogni pagina di destinazione post clic presenta una serie unica di sfide, ma la comprensione di queste nozioni di base dovrebbe sicuramente aiutarti a fornire un'esperienza migliore a chiunque visiti dal proprio dispositivo mobile.

Iniziamo con le differenze più importanti tra l'esperienza desktop e mobile.

Struttura

Anche se non sembra all'inizio del tuo progetto, avere una struttura in atto in cui fornisci il giusto gruppo di elementi al momento giusto è più critico di quanto pensi.

La prima cosa che viene in mente è il modo completamente diverso in cui i nostri visitatori scansionano il contenuto sulle pagine mobili. Abbiamo tutti sentito parlare del modello F o del modello Z sulle pagine di destinazione post clic del desktop, ma come si chiama il modello per dispositivi mobili? Non gli daremo necessariamente un nome, ma molto probabilmente è molto lineare. Scorrere su e giù è l'unico modo per capire cosa offre la pagina di destinazione post clic:

Poiché questa è una delle limitazioni più importanti del modo in cui i visitatori interagiscono con una pagina di destinazione post clic, suggeriamo di attenersi a un layout a una colonna invece di provare a stipare molti contenuti orizzontalmente. (A nessuno piace pizzicare e zoomare.)

Sul desktop, la maggior parte delle volte i marketer digitali pensano al posizionamento di ogni singolo elemento e all'impatto che ha. Sui dispositivi mobili, è meglio fare uno spostamento e pensare a gruppi di elementi e a come impilarli uno sopra l'altro per ottenere il massimo impatto.

Questo confronto fianco a fianco mostra come è strutturata una pagina desktop rispetto a una pagina mobile:

Ti consigliamo di andare da sinistra a destra e posizionare ogni gruppo di elementi uno sotto l'altro. Prendiamo ad esempio l'area dell'intestazione (above-the-fold). Avremo il logo in alto, seguito dal gruppo composto dal titolo principale e dal titolo di supporto, quindi sotto l'intero gruppo di riquadri del modulo.

La capacità di raggruppare elementi crea un insieme di oggetti reattivo nativamente mobile. In alternativa, i gruppi possono essere configurati per bloccare le proporzioni di disposizioni complesse per mantenere le loro proporzioni esatte quando vengono convertiti nella versione mobile della tua pagina.

Mobile Aspect Ratio Lock mantiene insieme i tuoi raggruppamenti a strati e blocca le proporzioni, sia che si trovino su un desktop o su un layout mobile.

Qualsiasi due o più elementi strettamente correlati o complementari tra loro dovrebbero sempre restare uniti. In questa situazione non avrebbe senso avere la casella del modulo nella parte superiore della pagina, quindi il concetto di avere il modulo nell'area above the fold non è l'ideale. Dare al visitatore il contesto di ciò che sta registrando per primo è più importante che dargli semplicemente un modo per agire il più velocemente possibile.

Tempo di caricamento

Indipendentemente dal dispositivo utilizzato dai tuoi visitatori, la velocità di caricamento della pagina è molto importante. Tieni presente che la maggior parte dei tuoi visitatori utilizzerà le limitazioni relative ai dati mobili e incorrerà in costi per visualizzare la tua pagina, quindi fai attenzione al tipo di grafica o agli elementi che aggiungi alle pagine. Immagina di accedere a una pagina e di riprodurre automaticamente un video.

Se hai bisogno di molte animazioni per supportare i contenuti, ti suggeriamo di utilizzare immagini semplici per dispositivi mobili. Per semplice, intendo dire che dovrai creare immagini di sfondo personalizzate per una particolare sezione. L'utilizzo di un software di fotoritocco per regolare le dimensioni o il layout della foto potrebbe valere il tempo extra richiesto quando significa che puoi velocizzare le tue pagine.

Stessa cosa con le immagini di sfondo, dal momento che non hai bisogno di un'immagine larga 2.000 pixel e 300 kb da caricare nella tua sezione, ti suggerisco di chiedere a un designer di creare un'immagine su misura personalizzata che puoi impostare come sfondo della tua sezione:

Il più delle volte mantenere la pagina mobile il più semplice possibile è sempre una buona idea. Ad esempio, se hai più elementi grafici che trasmettono lo stesso messaggio, mostrane solo uno sul cellulare.

Poiché la maggior parte dei telefoni cellulari si adatterà alle dimensioni dell'area del contenuto fornita nel generatore di dispositivi mobili, una buona regola è quella di avere un'immagine larga almeno 400 pixel per garantire che non ci siano spazi vuoti sui lati.

Crea una pagina di destinazione post clic AMP

La creazione di una pagina di destinazione post clic positiva sui dispositivi mobili è essenziale poiché la pagina di destinazione post clic è il luogo in cui si verificano le conversioni. Se la tua pagina si carica troppo lentamente o crea un'esperienza sconnessa dall'annuncio al post clic, i visitatori rimbalzano.

Quindi, considera che Google considera l'esperienza sulla pagina di destinazione post clic come un fattore per determinare il ranking dell'annuncio, che alla fine contribuisce alla percentuale di clic. Aggiungi tutto questo e i marchi hanno un grosso problema tra le mani. Fortunatamente, il framework AMP esiste.

Le pagine AMP in particolare sono attraenti per gli inserzionisti perché consentono un'esperienza utente mobile più avvincente attraverso tempi di caricamento quasi istantanei e scorrimento fluido, pur supportando una certa personalizzazione di stile e branding. Poiché AMP limita HTML/CSS e JavaScript, consente un rendering della pagina di destinazione post clic più rapido. A differenza delle tradizionali pagine per dispositivi mobili, le pagine AMP vengono automaticamente memorizzate nella cache da Google AMP Cache per tempi di caricamento più rapidi in Google.

I vantaggi del framework AMP superano davvero i suoi limiti:

• Maggiore velocità di caricamento della pagina sui dispositivi mobili
• Migliore esperienza utente per la navigazione mobile
• L'utilizzo delle pagine AMP può aiutarti ad aumentare il tuo punteggio di qualità
• Google favorirà le pagine che utilizzano AMP

A partire da giugno 2018, Instapage offre pagine di destinazione post clic AMP in cui i marketer digitali possono creare pagine conformi ad AMP all'interno dell'app senza uno sviluppatore. Perché, alla fine, se il caricamento della pagina non è istantaneo, non è abbastanza veloce.

Progettare per il tocco

Una delle tue maggiori sfide con il design della pagina di destinazione post clic per dispositivi mobili è assicurarti che sia il più semplice possibile per i visitatori agire. Tale azione potrebbe essere l'invio di un modulo o un semplice tocco su un pulsante. Ti aspetteresti che la maggior parte delle persone apporterà alcune modifiche, ma non è sempre così.

Abbiamo tutti sperimentato pagine in cui è molto difficile toccare qualcosa o l'esperienza non è su misura per gli utenti mobili. Soprattutto i collegamenti di testo: è molto utile regolare la dimensione di qualsiasi elemento di testo collegato a un collegamento ipertestuale. Il tuo visitatore non dovrebbe dover ingrandire per eseguire l'azione desiderata.

pulsanti

Ma il problema più grande che abbiamo notato è la dimensione dei pulsanti nelle pagine di destinazione post clic. Il nostro team consiglia di progettare pulsanti con un'altezza di almeno 70 pixel e non aver paura di renderli più larghi possibile, ma non allungarli mai per l'intera larghezza (400 pixel) poiché potrebbero essere confusi con una piccola sezione.

L'effetto hover è un bel tocco per le pagine desktop perché segnala al visitatore che può agire su quel particolare elemento. Sui dispositivi mobili, gli effetti al passaggio del mouse sono ridondanti.

Margini

Per i margini consigliamo di mantenere una zona sicura di almeno 20 pixel verticalmente libera su ogni lato ed evitare qualsiasi tensione visiva che potrebbe apparire con elementi troppo vicini ai lati dello schermo del telefono.

Lo spazio vuoto è importante tanto per le pagine mobili quanto per le pagine desktop. I concetti di base valgono ancora, basta cercare di distanziare tutto e non avere elementi molto vicini tra loro. In questo modo eviterai la tensione visiva.

Avere margini coerenti porterà sicuramente a una migliore esperienza utente. Il nostro team di solito si assicura di avere almeno 20-40 pixel tra ogni elemento. Quanto decidi dipende da te poiché ogni blocco potrebbe avere una struttura di elementi unica.

È piuttosto soggettivo, ma una volta stabilita una regola prova a replicarla in tutta la pagina e questo gli darà un aspetto più moderno:

leggibilità

Penseresti che essere in grado di leggere chiaramente il contenuto sia un dato di fatto, ma troppe volte abbiamo visto landing page post-clic in cui il testo è troppo piccolo o troppo grande. Trovare un buon equilibrio è abbastanza facile, una buona regola pratica per la dimensione del carattere utilizzata per particolari elementi sono:

• Titolo principale: 28 pixel
• Sottotitolo: 22 pixel
• Paragrafi: 17 pixel
• Altri dettagli: 15 pixel

Ovviamente puoi regolare quelle dimensioni poiché non esiste una taglia per soddisfare tutte le esigenze. Tuttavia, dovrebbe servire come una buona base per andare avanti con la progettazione di una pagina di destinazione post clic per dispositivi mobili.

Un altro elemento degno di nota è l' altezza della riga con elementi di testo.

In determinate situazioni sul desktop ha senso avere 1.0 o addirittura 1.2, quando crei la tua landing page mobile post-clic assicurati che l'altezza della riga per gli elementi di testo sia almeno 1.4.

In conclusione: minore è la dimensione del carattere, maggiore dovrebbe essere l'altezza della linea.

Forme

Poiché i moduli sono la parte più importante della maggior parte delle pagine di destinazione post clic, è fondamentale che le persone possano inviare facilmente le proprie informazioni.

Nelle nostre pagine per dispositivi mobili di solito estendiamo i campi del modulo il più possibile orizzontalmente ed evitiamo situazioni come avere un campo modulo e il pulsante sulla stessa riga. Questa è solo una brutta esperienza:

Un'altra cosa che viene fuori molto spesso è avere a che fare con moduli che hanno molti campi.

La migliore pratica scoperta dal nostro team è che ogni volta che una pagina ha più di 2 campi modulo per impostare la posizione dell'etichetta all'esterno, rendendo più facile per i visitatori sapere quali informazioni sono necessarie invece di cercare di ricordare cosa inserire:

Aumenta le tue conversioni da dispositivo mobile a partire da oggi

Proprio come le pagine desktop, il design della pagina di destinazione post clic per dispositivi mobili riguarda innanzitutto l'esperienza dell'utente e ciò che convincerà le persone a impegnarsi e a convertirsi. Senza prendere in considerazione i suggerimenti di cui sopra, è probabile che il tuo tasso di conversione mobile ne risentirà e le persone rimbalzeranno.

Prendi in considerazione l'implementazione dei consigli e osserva come le tue pagine di destinazione post clic si trasformano in asset di conversione altamente ottimizzati. Ottieni una demo AMP di Instapage oggi.