Cosa guardare nelle tue recensioni preliminari sul design

Il testo segnaposto può confondere i tuoi visitatori. Il carattere sbagliato può oscurare il messaggio della tua pagina. Quando così tanti piccoli dettagli si uniscono per formare un design di pagina di destinazione post clic di successo, trascurarne solo uno può costare conversioni.

Ecco perché è necessario, prima di finalizzare la pagina di destinazione post clic, condurre una revisione preliminare del progetto.

La revisione del progetto preliminare

La progettazione di una pagina di destinazione post clic richiede il coordinamento di un intero team di creativi. Designer UX, copywriter, project manager e sviluppatori hanno tutti un ruolo da svolgere nel processo. (Scopri come la soluzione di collaborazione Instapage può accelerare questo processo.)

Spesso, prima ancora che venga disegnato un wireframe a bassa fedeltà, i team di progettazione rispondono a queste domande su ogni elemento della pagina.

1. Perché lo stiamo facendo / Quale problema stiamo cercando di risolvere?

Supponiamo, ad esempio, che tu stia progettando i media per la tua pagina di destinazione post clic. Al primo passaggio, vuoi identificare il "perché" dietro la tua decisione. Guarda la tua pagina di destinazione post clic. Perché hai aggiunto i media?

È per mostrare ai potenziali clienti l'aspetto del tuo prodotto? È per spiegare come funziona il tuo servizio? Usa la risposta per determinare quale tipo di media potrebbe raggiungere meglio il tuo obiettivo.

Uno scatto da eroe può aiutare i visitatori a immaginare una vita migliore con il tuo prodotto. Se il tuo problema è "Il nostro servizio è nuovo e le persone non lo capiscono", un video esplicativo può mostrare esattamente come funziona.

Non dimenticare mai: nulla sulla tua pagina di destinazione post clic dovrebbe essere progettato senza uno scopo. Ogni elemento contribuisce al tasso di conversione.

2. Per chi lo stiamo facendo?

La tua preferenza per un particolare carattere del titolo? Dimenticalo. Quell'immagine stock che pensi sia "all'avanguardia"? Buttalo fuori. Il nucleo del tuo design dovrebbe ruotare attorno a ciò che i tuoi visitatori preferiscono.

Per chi stai creando questa pagina? Quale messaggio risuonerà con loro? Un buon passo verso la piena comprensione dei tuoi potenziali clienti è la creazione di buyer personas.

Queste rappresentazioni basate sulla ricerca dei tuoi segmenti di clienti target ti daranno un'idea dei dati demografici e dei comportamenti (e altro ancora) che puoi utilizzare per basare il design della tua pagina di destinazione post clic.

Costruiscili con l'aiuto di dati qualitativi provenienti da sondaggi sui clienti e dati quantitativi da strumenti di analisi. Prima di avere un'idea di chi stai vendendo, non puoi iniziare a elaborare strategie per vendere a loro.

3. Come sapremo di aver avuto successo?

Se hai intenzione di implementare un particolare elemento di design, dovresti avere un modo per misurare se quell'elemento ha raggiunto il tuo obiettivo.

Se pensi che una pagina con una copia più lunga possa descrivere al meglio il tuo servizio, puoi misurarne il successo con la profondità di scorrimento e il tasso di conversione.

Se pensi che un video funzionerebbe meglio di una copia lunga, potresti utilizzare le riproduzioni come metrica e tasso di conversione per determinarne il successo rispetto a una pagina ricca di testo.

Assicurati di aver identificato, in anticipo, una metrica in grado di misurare con precisione il successo dei tuoi elementi di design. Altrimenti, non saprai cosa sta contribuendo al tuo tasso di conversione. E se non sai cosa sta contribuendo al tuo tasso di conversione, non sarai in grado di migliorarlo.

Elementi da valutare nella revisione preliminare del progetto

“Tratta ogni componente come se potesse essere presentato a un concorso di design”, afferma il designer Microsoft Claudio Guglieri. “Se presti attenzione ad ogni componente, il tutto sarà più della somma delle sue parti.”

Ciascuno dei componenti della tua pagina di destinazione post clic potrebbe portare a casa un premio per il design? Prima di inviare i wireframe allo sviluppo, è importante accertarsi. La cattura degli errori ora è fondamentale per evitare errori costosi dopo la pubblicazione.

Mentre le risposte alle tre domande precedenti variano da azienda a azienda, le best practice per gli elementi della pagina di destinazione post clic non lo fanno. Assicurati che la tua pagina non riduca il tasso di conversione una volta pubblicata valutando quanto segue:

Disposizione

Per migliaia di anni abbiamo letto con l'aiuto di un sistema a griglia. Oggi, colonne e righe guidano i nostri occhi sul web come facevano prima dell'avvento di Internet, su riviste, libri e giornali.

"Questi sono i sistemi che sono stati trasferiti più o meno direttamente sul Web e funzionano", afferma Alex Bigman. “Parola saggia: molti designer hanno tentato di evitare la griglia in nome della 'creatività'; molti di questi siti web non vengono letti".

La ricerca lo conferma. Uno studio di Microsoft e MIT ha scoperto che quando a due gruppi di soggetti venivano presentati layout di pagina diversi, uno tradizionale e l'altro non tradizionale, le loro risposte erano le seguenti:

• Il gruppo non tradizionale ha sopravvalutato il tempo impiegato per leggere il pezzo e, a volte, ha mostrato disappunto fisico per il layout sotto forma di cipiglio.

• Il gruppo tradizionale ha sottovalutato il tempo impiegato per leggere il pezzo e ha riportato una maggiore attenzione durante la lettura.

Allo stesso modo le convenzioni di layout non dovrebbero essere evitate; neanche le convenzioni di design dovrebbero esserlo. La legge sull'esperienza degli utenti web di Jakob Nielsen afferma che gli utenti di Internet trascorrono la maggior parte del loro tempo su altri siti web. Su quegli altri siti web è dove hanno formato le loro aspettative su come funziona il web.

Ad esempio, gli utenti sono arrivati ​​a riconoscere il testo sottolineato come un collegamento ipertestuale. I loghi si trovano più spesso nell'angolo in alto a sinistra della pagina e facendo clic su di essi di solito si reindirizza un utente alla home page (tuttavia, non dovrebbe trovarsi sulla pagina di destinazione post clic). La familiarità di un sistema influisce notevolmente sulla soddisfazione dell'utente, afferma Nielsen:

Più le aspettative degli utenti si rivelano giuste, più si sentiranno in controllo del sistema e più gli piacerà. E più il sistema infrange le aspettative degli utenti, più si sentiranno insicuri.

Al di là delle convenzioni di progettazione, la gerarchia visiva dirige lo sguardo dei visitatori sui contenuti più importanti di una pagina. Creandone uno con tecniche radicate nella psicologia della Gestalt, puoi utilizzare la formattazione per far risaltare le tue informazioni più importanti.

• Dimensioni: più è grande, più attenzione attirerà.

• Posizione: le persone consumano le pagine dall'alto verso il basso, da sinistra a destra. Pertanto, gli elementi in alto a sinistra verranno visualizzati più spesso di quelli in basso a destra.

• Colore: i colori che contrastano con il resto della pagina attireranno l'attenzione.

• Densità: l' aggiunta di diversi elementi a un piccolo spazio aumenterà la quantità di attenzione che quell'area attira.

• Valore: un oggetto più scuro apparirà più evidente di un oggetto più chiaro. Le parole in grassetto attirano maggiormente l'attenzione, ad esempio.

Gli elementi che trasmettono le tue informazioni più importanti - titoli, vantaggi, supporti informativi e pulsante CTA - dovrebbero essere formattati con le caratteristiche di cui sopra per attirare l'attenzione del lettore.

Tipo

La capacità di conversione della tua pagina dipende molto dal tipo e dalla sua formattazione. Un carattere scelto con saggezza può aumentare la fiducia e la leggibilità, mentre uno scelto male può avere un impatto negativo su entrambi. Assicurati che:

Il carattere della pagina di destinazione post clic è coerente con il carattere del tuo sito web

La coerenza del marchio è un forte fattore di influenza delle decisioni di acquisto. Se i visitatori fedeli non riconoscono la pagina di destinazione post clic come appartenente alla tua attività, potrebbero non fidarsi che lo sia. Rimani fedele al marchio con i font di Adobe Typekit e Google Fonts.

Il tuo carattere è leggibile in tutte le dimensioni

L'esperto di usabilità D Bnonn Tennant consiglia 16px perché è vicino a quello che vediamo nei libri (schermo a sinistra, pagina del libro a destra):

Usa il testo sans-serif nella copia del corpo, poiché gli studi hanno dimostrato che serif è più difficile da leggere in dimensioni più piccole online. Un buon modo per garantire la leggibilità è assicurarsi che il tuo carattere possa superare il test "il1":

Mantieni al minimo i caratteri diversi

I caratteri decorativi possono attirare l'attenzione e aggiungere un tocco di personalità alla tua pagina di destinazione post clic. Tuttavia, se ne usi troppi, la tua pagina di destinazione post clic sembrerà una lettera di riscatto online:

Attenersi a non più di due caratteri diversi sulla pagina di destinazione post clic, altrimenti si rischia di diluire il potere del proprio marchio, far apparire la pagina disorganizzata e danneggiare la leggibilità.

Le tue righe di testo hanno una lunghezza bilanciata

Ricorda, le persone sono abituate a leggere con l'aiuto di una griglia. Se le tue righe di testo ignorano quella griglia e si estendono sull'intera pagina, allungheranno i limiti della capacità di attenzione dei visitatori. Allo stesso tempo, se sono troppo brevi, l'occhio del lettore dovrà tornare indietro troppo spesso, il che interromperà il loro ritmo.

Inconsciamente, saltare a una nuova riga dà energia al lettore. Ma quell'energia svanisce più una linea si allunga. Per questo motivo, il team di consulenza sull'usabilità, il Baymard Institute, consiglia una lunghezza della riga compresa tra 50 e 75 caratteri.

L'interlinea aiuta la leggibilità

Lo spazio verticale tra le tue linee dovrebbe trovare un equilibrio tra grande e piccolo. Troppo piccola e una linea inizierà a fondersi con quella sottostante; troppo grande e l'occhio del visitatore si perderà tra una riga e l'altra.

Il designer di font Matthew Butterick afferma che, per la massima leggibilità, la spaziatura tra ogni riga dovrebbe essere una percentuale della dimensione del carattere - 120%-140% per l'esattezza.

Il testo si adatta ai modelli di lettura sul web

Nelle pagine ricche di testo, i lettori tendono a elaborare una pagina in uno schema che assomiglia a una "F". Nelle pagine che presentano immagini, quel motivo assomiglia più a una "Z".

Assicurati che, con l'aiuto della gerarchia visiva, il tuo testo comunichi le tue informazioni più preziose in un modo che si adatti allo stile di lettura dei visitatori.

Titoli, sottotitoli, elenchi puntati e lettere in grassetto attirano tutti gli occhi dei visitatori sullo schermo mentre scorrono la pagina.

Non rompi il margine sinistro

Quando leggiamo, il margine sinistro è "casa" per i nostri occhi. Le righe di testo possono terminare in molti punti diversi, ma il margine sinistro è il punto in cui i nostri occhi rimbalzano dopo averlo completato.

È per questo motivo che dovresti sempre allineare la tua copia del corpo a sinistra (i titoli possono essere centrati) e non dovresti mai rompere il margine sinistro con elementi come le foto.

Altrimenti, creerai la tua pagina di destinazione post clic
molto di piu
difficile per i tuoi visitatori
leggere.

Colore

Scegliere i colori giusti per la tua pagina di destinazione post clic ha meno a che fare con il significato psicologico dei colori e più con il modo in cui attirano l'attenzione. Con due o tre colori (semplice è meglio, gli studi dimostrano) scelti dalla ruota dei colori, puoi creare uno schema che diriga l'attenzione sugli elementi coinvolti nella conversione: il tuo modulo e il pulsante CTA.

Combinazione di colori complementari

Gli schemi complementari vengono creati scegliendo i colori uno di fronte all'altro sulla ruota dei colori. Tale opposizione crea contrasto tra gli elementi all'interno di questo schema.

Schema di colori analogo

Uno schema di colori analogo viene creato con i vicini sulla ruota dei colori. Non creerà lo stesso livello di contrasto di uno schema complementare, ma sarà visivamente facile da digerire.

Combinazioni di colori monocromatici

Viene creato uno schema di colori monocromatico con tinte, toni e sfumature della stessa tonalità sulla ruota dei colori. Poiché le differenze tra i colori in uno schema monocromatico sono sottili, sono spesso abbinati a un singolo colore complementare per far risaltare elementi come la forma e il pulsante CTA.

La tua combinazione di colori riflette il tuo marchio?

Guardando quei diagrammi, potresti chiederti come scegliere una base, un accento e un colore di sfondo. La risposta? Inizia con i colori del tuo marchio.

• Usa i colori del tuo logo come punto di partenza per creare uno schema di colori che rafforzi la coerenza del marchio.

• Quindi, crea un colore di base determinando su cosa viene visualizzato il tuo logo.

• Infine, scegli uno sfondo e un colore di accento (colore del tuo pulsante CTA) che contrastino tra loro per attirare la massima attenzione.

Scopri di più se hai scelto i colori giusti qui.

Menu di navigazione, piè di pagina

Questi sono forse gli elementi di design più facili da spuntare dalla tua lista. Guarda nella parte superiore del wireframe della pagina di destinazione post clic. Qualcuno ha disegnato un menu di navigazione? Se è così, scartalo.

Ora, guarda in basso. È stato abbozzato un piè di pagina con numerosi sitelink? In tal caso, rimuoverli.

Il rapporto di conversione della tua pagina di destinazione post clic dovrebbe essere 1:1, il che significa che dovrebbe esserci un solo elemento cliccabile sulla tua pagina di destinazione post clic: il pulsante CTA. Gli studi rafforzano l'idea che i link in uscita diminuiscano il tasso di conversione, quindi mantieni i tuoi visitatori concentrati escludendoli.

immagini

I media possono essere un potente persuasore sulla tua pagina di destinazione post clic se usati nel modo giusto. Alcune immagini che vorrai considerare con:

• Immagini dei prodotti che danno ai tuoi visitatori un'idea dell'aspetto della tua offerta o di come funziona.

• Infografiche che trasmettono informazioni in modo visivamente facile da digerire. Grafici e grafici sono ottimi per aiutare le persone a confrontare i set di dati.

• Scatti eroici che aiutano il visitatore a immaginare come migliorerebbe la sua vita con la tua offerta.

• Loghi aziendali che mettono in evidenza marchi di fiducia con cui hai lavorato o pubblicazioni famose in cui sei stato presentato.

• Badge di sicurezza che consentono ai visitatori di sapere che sono al sicuro sulla tua pagina.

• Distintivi di autorità che evidenziano i premi vinti dalla tua attività.

Quando esamini il design della pagina di destinazione post clic, assicurati che queste immagini abbiano un senso nel layout. I badge di sicurezza sono più efficaci accanto a un modulo. I colpi dell'eroe dovrebbero essere premiati con proprietà immobiliari di primo piano sulla tua pagina, così come i distintivi delle autorità. Dove si trova l'immagine è importante tanto quanto ciò che sta comunicando.

Design della forma

Poiché è spesso la principale fonte di attrito su una pagina di destinazione post clic, il modulo deve essere progettato con particolare attenzione. Quando non lo è, le etichette scadenti possono confondere i visitatori e i campi non necessari possono spaventarli.

Durante la revisione preliminare del progetto, consultare le best practice del Nielsen Norman Group per la progettazione dei moduli durante la valutazione del proprio:

Richiede solo le informazioni di cui hai assolutamente bisogno?

I tuoi team di marketing e vendita dovrebbero essere d'accordo sulla definizione di un lead qualificato nelle diverse fasi del percorso dell'acquirente. Tale definizione dovrebbe includere le informazioni necessarie per acquisire dai potenziali clienti in ogni fase.

Assicurati che il tuo modulo richieda solo le informazioni che hai ritenuto necessarie per garantire che i potenziali clienti siano adatti alla tua attività. Con ogni campo modulo che rimuovi, le tue possibilità di conversione aumentano. Basta chiedere al team di Marketo:

I tuoi campi sono presentati in un formato a colonna singola?

Invece di disporli orizzontalmente o in un formato a doppia colonna, assicurati che i campi del modulo siano presentati in un'unica colonna. Due colonne interromperanno l'avanzamento verso il basso del tuo visitatore mentre compila ogni campo (è possibile fare un'eccezione per i campi correlati come città/codice postale).

I campi e le etichette simili sono raggruppati insieme?

I campi come nome e cognome, città e codice postale, carta di credito e CVV dovrebbero essere vicini l'uno all'altro, così come le informazioni identificative come le etichette. Tali etichette dovrebbero essere sopra ogni campo anziché al suo interno, poiché la ricerca ha dimostrato che il testo segnaposto che scompare ha il potenziale per frustrare e confondere i visitatori.

Puoi combinare o modificare i campi del modulo per ridurre l'attrito?

Se il tuo modulo utilizza un menu a discesa con meno di tre opzioni di risposta, considera di convertirlo in qualcosa di più facile da completare, come un insieme di pulsanti di opzione:

Se stai progettando un modulo di compressione pagina che richiede nome e cognome, considera la possibilità di combinare i campi o persino di rimuovere il cognome (alcune pagine non richiedono nemmeno il nome).

Per rendere le cose ancora più semplici, prendi in considerazione l'offerta di riempimento automatico social per consentire ai visitatori di convertire con il clic di un pulsante.

Disegno del pulsante

Spesso, i visitatori della pagina di destinazione post clic danno per scontato di sapere esattamente dove devono fare clic per richiedere un'offerta. Questo è il risultato di un buon design dei pulsanti, ed è anche quello a cui dovresti mirare.

I potenziali clienti stanno già pensando intensamente per determinare la tua affidabilità e il valore della tua offerta. Non farli lavorare di più per determinare come rivendicarlo. Evita di nascondere inavvertitamente il tuo pulsante con il design sbagliato controllando quanto segue:

Il tuo pulsante assomiglia a un pulsante?

Guarda i pulsanti sulla tastiera. Questi sono quelli a cui i tuoi potenziali clienti sono abituati a spingere nel mondo reale. Il tuo dovrebbe essere simile.

Quanto simile? Dipende dal tuo pubblico.

Pulsanti scheuomorfi

Per un pubblico che non è esperto di Internet, le tecniche di progettazione skeuomorphic possono aiutare a rendere identificabile un pulsante. Lo scheumorfismo è uno stile di design che imita la composizione degli oggetti nel mondo reale. Ecco un esempio di calcolatrice digitale creata con design skeuomorphic:

Gli effetti tridimensionali come l'ombreggiatura fanno apparire i pulsanti premuti. Sono ciò a cui siamo stati abituati fin dai primi giorni di Internet:

Quindi, se, durante la creazione delle tue buyer personas, scopri che il tuo pubblico non trascorre molto tempo online, questo tipo di pulsante potrebbe essere quello che includi nella tua pagina di destinazione post clic. Eccone uno molto stilizzato:

Se ti aspetti che i tuoi visitatori siano utenti Internet più esperti, tuttavia, potrebbero non aver bisogno di segnali come le ombre per identificare un pulsante. Potresti essere in grado di impiegare l'uso di ...

Bottoni piatti

Il flat design è una tecnica che non ruota attorno alla ricreazione di oggetti nel mondo digitale. È un approccio più minimalista.

I pulsanti creati con questa tecnica non si basano su ombre dure e luci per rendersi identificabili. Ecco di nuovo una calcolatrice, progettata solo con tecniche piatte:

Ecco un pulsante piatto su una pagina di compressione:

La ricerca ha dimostrato, tuttavia, che questa tecnica può confondere e frustrare anche gli utenti esperti di Internet escludendo gli indicatori di cliccabilità come gli effetti 3D. Kate Meyer spiega:

Gli utenti sono costretti a esplorare le pagine per determinare cosa è cliccabile. Spesso fanno una pausa nelle loro attività per passare il mouse sopra gli elementi sperando in significanti dinamici di cliccabilità, o fanno clic sperimentalmente per scoprire potenziali collegamenti.

Questo comportamento, fare clic a caso per trovare un pulsante o un collegamento, a volte è gratificante. A volte ciò che i visitatori cliccano è in realtà un pulsante cliccabile, altre volte no. Meyer si espande:

Anche se gli utenti sono per lo più in grado di orientarsi attraverso le interfacce con questo comportamento esplorativo, sono comunque costretti a fare un lavoro extra e vengono distratti dai loro obiettivi primari senza ottenere alcun beneficio tangibile.

Di conseguenza, molti designer di landing page post clic creano pulsanti che raggiungono un equilibrio tra piatti e skeuomorfi.

Piatto 2.0

Tale equilibrio è noto come design "Flat 2.0", "semi-piatto" o "quasi piatto". Ecco un pulsante semi-piatto:

La tecnica utilizza ombre e luci per indicare la cliccabilità, ma in un modo molto più sottile. Quando scegli tra flat, semi-flat e skeuomorphic, pensa sempre al tuo utente, dice Meyer:

Non prendere decisioni di design che sacrificano l'usabilità a favore della tendenza. Non dimenticare che, a meno che tu non stia progettando solo per altri designer, non sei l'utente. Le tue preferenze e la capacità di interpretare i significanti di cliccabilità non sono le stesse dei tuoi utenti perché sai cosa è destinato a fare ogni elemento nel tuo design.

Il tuo pulsante attira l'attenzione?

Per attirare l'attenzione sul pulsante CTA, riempilo con un colore che è stato utilizzato con parsimonia (o per niente) sulla tua pagina di destinazione post clic. A causa di questo caso di studio, una volta si pensava che il rosso avesse prestazioni migliori del colore verde:

Ma quando prendi in considerazione il contesto, ti rendi conto che il pulsante rosso probabilmente ha battuto il verde perché risaltava tra molti altri elementi verdi sulla pagina (l'icona del denaro, il logo, la foto).

Se stai creando uno schema di design usando la teoria dei colori, il tuo pulsante CTA è il tuo colore "accento". È più evidente se confrontato con una tonalità sul lato opposto della ruota dei colori (vedi "Colore" sopra).

Il tuo bottone è abbastanza grande?

Oggi l'accesso a Internet avviene principalmente tramite dispositivi mobili. Ciò significa che le persone che raggiungono la tua pagina di destinazione post clic dovranno essere in grado di premere il pulsante con il dito. Il tuo è abbastanza grande?

Uno studio del MIT mostra che il touchpad medio è compreso tra 10 e 14 mm, il che rende 10x10 mm una buona dimensione minima del pulsante:

Qualsiasi più piccolo, dicono i dati, e aumenterai le probabilità di errore dell'utente:

Salva le conversioni con una revisione preliminare del progetto

Rilevare gli errori nella revisione preliminare del progetto farà risparmiare tempo al tuo team e alle conversioni della tua attività dopo che la pagina di destinazione post-clic è attiva. Prima di finalizzarlo, assicurati di poter rispondere a tutte le domande precedenti e spunta ogni casella nell'elenco di controllo per la pubblicazione di Instapage.

Collega sempre tutti i tuoi annunci a pagine di destinazione post clic personalizzate per ridurre il costo per acquisizione del cliente. Inizia a creare le tue pagine post clic dedicate registrandoti oggi stesso per una demo di Instapage Enterprise.