Come diventare un designer centrato sulla conversione

Quindi vuoi essere un designer di template per la landing page? Potresti pensare di averlo facile: dopotutto, i modelli di pagina di destinazione sono solo una singola pagina. È molto più semplice della progettazione di un sito Web completo. Ma le regole del design cambiano un po 'quando si costruiscono pagine di destinazione centrate sulla conversione.

Cos'è una pagina di destinazione?

Prima di entrare nei principi di progettazione che stanno dietro le pagine di destinazione, prendiamo alcune definizioni fuori dal modo:

Una pagina di destinazione è una pagina web autonoma specifica per la campagna. Il suo intento è far sì che i tuoi visitatori completino una singola azione. Non è il tuo sito web, e sicuramente non è la tua home page.

I siti web sono stazioni centrali del marchio e sono per le persone che trovano organicamente il tuo sito o che hanno bisogno di fare riferimento o guardarlo nella modalità di ricerca del loro ciclo di acquisto. Loro sono non buono per le campagne di marketing.

Le campagne di marketing si basano su un unico scopo: acquistarlo, iscriversi a questo e, in quanto tale, richiedere un'esperienza più mirata. La ragione principale per l'utilizzo di una pagina di destinazione rispetto a una home page per il target di qualsiasi traffico della campagna (PPC, email, social) è a causa di qualcosa chiamato rapporto di attenzione.

Il rapporto di attenzione è il rapporto tra i punti di interazione (link) su una pagina, il numero di azioni previste su quella pagina (che per una campagna è sempre 1). In una homepage questo è tipicamente intorno a 40: 1, il che significa che ci sono 39 azioni di distrazione e 1 azione desiderata.

D'altra parte, una landing page focalizzata ha un rapporto di attenzione di 1: 1. Per questo motivo, gli esperti di marketing intelligenti utilizzano una pagina di destinazione dedicata specifica per ogni campagna pubblicitaria.

Cosa significa questo per me come designer?

Sono finiti i giorni in cui era accettabile progettare una bellissima esperienza sul web, mettere giù il pennello e andare via con un assegno in tasca.

La conversione è una delle parole più calde sul web in questo momento. Ogni pagina web che disegni è ora un pezzo di "contenuto responsabile". Con questo intendo che il suo scopo, impatto e successo possono essere misurati e vengono misurati. Se non sta giocando un ruolo nel convertire correttamente i visitatori in clienti, non è stato progettato correttamente.

Il design non è l'unico fattore in alti tassi di conversione. La copia gioca un ruolo enorme. Ma la copia più grande del mondo non ti aiuterà se il tuo visitatore è distratto, offeso - sappiamo tutti che il cattivo design può essere decisamente offensivo - o confuso.

Combinando alcuni semplici principi di progettazione e una certa psicologia di base, puoi spostare completamente l'attenzione sull'esperienza web di progettazione che sia piacere e conversione.

Io chiamo questo Design centrato sulla conversione. CCD in breve.

Questo è un corso accelerato in CCD, quindi discuterò i 7 principi, ti diverto su alcuni Psych 101, poi ti mostrerò alcuni modelli di landing page belli e ad alta conversione che li mettono in pratica in modo da poter imparare con l'esempio.

Pronto a diventare un Designer centrato sulla conversione?

I 7 principi del design centrato sulla conversione

I principi sono semplici Impara, praticali e vedrai i tuoi tassi di conversione salire.

Principio 1: incapsulamento

Avvolgere le cose è una pratica intelligente. Funziona per la tua testa a temperature fredde, patate bollite in caldo, e rende il Natale più divertente. Quindi prendi la cosa più importante sulla tua pagina (il tuo obiettivo di conversione) e avvolgila in qualcosa per dimostrare che è degno dell'attenzione del tuo visitatore.

Principio 2: contrasto

Così molti marketer parlano del colore dei bottoni. Questo è un errore. Un buon designer basato sulla conversione sa che il colore del pulsante è irrilevante. È il contrasto che conta. Se hai una pagina con tonalità prevalentemente verdi, un pulsante rosso salterà ai tuoi visitatori. Non preoccuparti che sembra arrabbiato; i tuoi potenziali clienti non sono tori.

Principio 3: indicazioni di direzione

In alcune culture, è considerato maleducato. Non in terra di conversione. Quando qualcuno arriva sulla tua pagina di destinazione, il tuo progetto deve puntare verso l'obiettivo che vuoi che raggiunga. Usa le frecce e la triangolazione per creare punti focali. Con la fotografia, usa la linea di vista per attirare l'attenzione sul tuo invito all'azione (CTA).

Principio 4: spazio bianco

Questo è semplice. Non stipare le cose insieme. La mancanza di spazi bianchi è un design offensivo. Facendo respirare gli occhi delle persone (possono farlo?) Crei un'esperienza più piacevole che ti darà alcuni secondi preziosi in più per comunicare il messaggio della tua campagna.

Principio 5: urgenza e scarsità

Questo è il primo principio basato sulla psicologia. Creare urgenza o scarsità è principalmente un esercizio scritto, ma spetta a te presentare le informazioni usando un buon design. La vicinanza all'obiettivo di conversione della pagina di destinazione è fondamentale quando si tratta di segnalare la scarsità. Assicurando che il tuo visitatore capisca di avere una scadenza, puoi rendere quel clic un po 'più probabile.

Expedia fa un ottimo lavoro qui utilizzando l'incapsulamento per evidenziare la dichiarazione di scarsità ("Solo 3 biglietti rimasti a questo prezzo!") Nell'immagine qui sotto.

Principio 6: prova prima di acquistare

Hai mai "campionato" un'uva in un supermercato? Questa è un'anteprima della qualità e aiuta le persone a prendere decisioni di acquisto informate. Esempi nel regno digitale includono un capitolo di un ebook o una presentazione visiva che copre alcuni punti salienti di un rapporto del settore, di un corso online o di un video teaser / trailer per un evento imminente. Amazon ha davvero fissato lo standard con le anteprime dei libri "Guarda dentro".

Aprendo il tuo prodotto all'esame accurato prima dell'acquisto, sembri autorevole e credibile. Ciò aumenta la fiducia e può essere un fattore importante per aumentare le conversioni.

Come designer orientato alla conversione, dovresti trovare modi creativi per presentare queste anteprime.

Principio 7: prova sociale

Elementi di fiducia sono una parte fondamentale di qualsiasi pagina di destinazione. Eseguono il backup delle tue affermazioni e, quando vengono eseguite correttamente, parlano ai tuoi visitatori dal punto di vista di un consumatore che la pensa allo stesso modo. Le testimonianze sono l'approccio più popolare. Come il principio 5, questo è principalmente un elemento scritto, ma è possibile utilizzare gli aspetti della progettazione di contenuti intelligenti, in particolare la gerarchia, per incoraggiare le persone a leggerle effettivamente.

Aggiungere un titolo esplicativo sopra le testimonianze (o il logo del cliente, ecc.) Può aumentare il potere della prova sociale.

Design centrato sulla conversione in azione; 5 modelli di pagina di destinazione

Armati con i tuoi nuovi strumenti di progettazione, diamo un'occhiata a cinque modelli di pagina di destinazione Unbounce per ispirarti mentre crei i tuoi modelli.

1. Lockwood: immobiliare

  • incapsulamento L'obiettivo di conversione è la forma, quindi è posizionato frontalmente e al centro e incapsulato in un contenitore che consente ai contenuti critici sopra di esso di connettersi visivamente.
  • Contrasto Il CTA si distingue chiaramente sulla pagina con un vivace contrasto di colore.
  • Indicazioni direzionali C'è una freccia posizionata alla fine dell'area del contenuto principale che indirizza lo sguardo verso il CTA e l'uso dello stesso colore arancione collega i due elementi.
  • Lo spazio bianco Mentre scorri la pagina, i tuoi occhi possono cadere liberamente attraverso i blocchi di contenuti. Una fotografia ampia e spaziosa e una tavolozza minimalista si uniscono per renderlo un'esperienza piacevole.
  • Scarsità L'affermazione che solo 3 delle unità rimangono è posizionata direttamente sotto il CTA come promemoria per cui dovresti affrettarti. Se vuoi diventare più aggressivo qui puoi provare uno * starburst * cringe *, ricordati di rimanere di classe. Sarebbe un ottimo test A / B.
  • Prova sociale Qui vengono utilizzate prove sociali appropriate, incentrate sui premi di design, piuttosto che su una testimonianza che avrebbe un impatto molto limitato.

2. Lasano: salute e benessere

  • Incapsulamento della forma? Dai un'occhiata.
  • CTA contrastante? Dai un'occhiata.
  • Lo spazio bianco? Dai un'occhiata.
  • Prova sociale? Dai un'occhiata.
  • Indicazioni direzionali Qui noterai due forme di stecca direzionale. Il primo utilizza la linea del sito della donna per dirigere il tuo sguardo da sinistra a destra. Ancora meglio sarebbe se guardasse in basso ea destra, ma potrebbe anche farla sembrare triste, il che andrebbe contro il tema del modello. In secondo luogo c'è un'istruzione secondaria sotto il modulo che termina con una piccola freccia di promemoria che ti indica il backup. Le piccole cose non hanno sempre un grande impatto, ma quando hai molte piccole cose che lavorano in concerto possono farlo.

3. Yuli: demo del software

  • Incapsulamento della forma? Dai un'occhiata.
  • CTA contrastante? Dai un'occhiata.
  • Lo spazio bianco? Dai un'occhiata.
  • Indicazioni direzionali La parte superiore della pagina è dove tutti i contenuti principali sono presenti, quindi una freccia - con una richiesta - viene posizionata nel punto in cui il contenuto è stato letto, indicando il CTA. Nota anche come viene creata una sorta di triangolo didattico riservando il colore arancione per gli elementi che fanno riferimento allo scopo della pagina: "demo gratuita", "unisciti a noi per una demo gratuita", "prenota la mia demo ora".
  • Prova sociale Un video è utilizzato questa volta per un livello superiore di sofisticazione. In un test A / B eseguito nella home page di Unbounce.com, ho scoperto che sostituendo le testimonianze testuali con una versione video, i tassi di conversione sono aumentati del 25%. Qui c'è una combinazione di video e testo. Si noti inoltre che il modello utilizza la gerarchia di progettazione delle informazioni per introdurre gli elementi di prova sociale (il video e il logo del cliente sotto) con un titolo descrittivo.

4. Wanderlust: viaggiare

  • CTA contrastante? Dai un'occhiata.
  • Lo spazio bianco? Dai un'occhiata.
  • Prova sociale? Dai un'occhiata.
  • incapsulamento È leggermente diverso su una pagina di destinazione click-through in quanto non esiste alcun modulo, ma il CTA è ancora posizionato con altre informazioni critiche in un riquadro di delimitazione nell'intestazione della pagina. L'elemento footer utilizza anche il contrasto del colore per incapsulare la "dichiarazione dell'argomento di chiusura" con un CTA ripetuto.
  • Indicazioni direzionali È un po 'allungato, ma la Torre Eiffel si collega alla CTA. E indica piuttosto abilmente che cliccando sul CTA, verrai portato a Parigi per stare sotto la torre. Che romantico. In un altro senso, le foto delle caratteristiche circolari portano l'occhio verso il basso attraverso la pagina fino al CTA di chiusura.

5. Polar: non a scopo di lucro

  • Lo spazio bianco? Dai un'occhiata.
  • Prova sociale? Dai un'occhiata.
  • CTA contrastante Come in tutti questi esempi, il CTA si distingue dal resto del design. Si noti anche come l'obiettivo della campagna (per raccogliere fondi tramite donazioni) sia evidenziato usando il colore arancione nel termometro target. Questo crea una connessione tra gli obiettivi emotivi e fisici (conversione) della pagina.
  • Urgenza e scarsità La combinazione dell'obiettivo di donazione e le affermazioni emotive "Il tempo stringe per l'orso polare" e "Prevedo che potremmo vedere le estati senza ghiaccio al Polo Nord entro un decennio" creano sia l'urgenza che l'imminente senso di scarsità.

In sintesi

Essere un Designer centrato sulla conversione è la prossima evoluzione del design nel mondo degli affari e, armati dell'apprendimento di oggi, farai felici i tuoi clienti / boss quando aumentano i loro tassi di conversione.

Quindi, mentre progetti i tuoi modelli di landing page di Themeforest, eseguili contro i sette principi del CCD e scopri come si impilano davvero.

Ulteriori letture

  • The Ultimate Guide to Conversions Centered Design (ebook)