I 7 principi di un design focalizzato sulla conversione

Prima di iniziare però volevo rassicurarti di una cosa: non dovrai essere un designer professionista per implementare da subito questi principi e creare delle landing page che convertono!

Sei pronto? Iniziamo subito!

Cos’è un design basato sulla conversione

Un bel design non è detto che converta.

La differenza tra un bel design e un buon design sta tutta nella sua progettazione.

Mentre da un lato si progetta per creare qualcosa di bello, dall’altro si progetta per creare qualcosa di funzionale ad un obiettivo.

Il Conversion-Centered Design (CCD) è un framework ad alta conversione ideato da Oli Gardner, uno dei fondatori di Unbounce, un noto software dedicato alla costruzione di landing page.

Questo framework si basa sui 7 principi fondamentali di un design focalizzato alla conversione, dove rientrano ogni tipo di leve psicologiche e stimoli atti a far convertire i visitatori.

Grazie allo studio e alla applicazione di questi 7 principi sarai in grado di progettare e migliorare qualsiasi pagina di destinazione, aumentando così da un lato le performance delle tue campagne pubblicitarie, dall’altro le percentuali di conversione dei visitatori del tuo sito web.

I 7 principi di un design basato sulla conversione

Ma quali sono quindi i 7 principi di un design basato sulla conversione?

Ecco l’elenco dei 7 principi che andremo ad approfondire in questo articolo:

Principio 1: Crea focus
Principio 2: Organizza le informazioni
Principio 3: Coerenza
Principio 4: Mostra i Vantaggi
Principio 5: Attira l’attenzione
Principio 6: Costruisci la fiducia
Principio 7: Riduci l’attrito

Principio 1: Crea focus

Il fondamento principale per creare un design basato sulla conversione è il focus.

Quando progetti una pagina di destinazione devi assicurarti che ogni elemento della stessa sia funzionale al raggiungimento di quell’unico obiettivo che ti sei prefissato di ottenere dal tuo visitatore.

Elimina quindi qualsiasi distrazione, qualsiasi informazione superflua e qualsiasi link esterno che possa portare l’utente lontano dall’unico obiettivo che ti sei prefissato di fargli raggiungere.

Creare focus, mantenendo alta l’attenzione del tuo visitatore, è il primo passo verso un design che converte!

Se il concetto è chiaro, possiamo proseguire e vedere come mettere in pratica il primo principio di un design focalizzato sulla conversione!

Progetta per un unico obiettivo

Qual è l’obiettivo principale che il tuo utente dovrebbe compiere una volta atterrato sulla tua landing page?

Questa è la prima domanda che ti devi porre ancor prima di accendere il pc o prendere carta e penna per disegnare la struttura della tua pagina di destinazione.

Ti è mai capitato di voler vedere un film su Netflix e al posto di guardarlo, passare la serata a scegliere cosa guardare?

Questo fenomeno in psicologia è noto come “paralisi per analisi” e si può riassumere in questo modo: più inviti all’azione e opzioni offri ai tuoi visitatori, maggiore sarà la probabilità che questi si confondano.

Quindi, più link e chiamate all’azione inserirai nella tua landing page, minore sarà il tuo conversion rate.

Ecco una foto tratta da uno studio di Unbounce che chiarisce bene il concetto:

Ricorda, le pagine di destinazione con più di uno scopo in genere non hanno scopo!

Mantieni alta l’attenzione

Per creare focus è indispensabile mantenere alta l’attenzione dei visitatori su un unico obiettivo.

Per farlo è indispensabile che il “rapporto di attenzione” della tua pagina di atterraggio sia di 1:1.

Ok, ma cos’è questo “rapporto di attenzione”?

Come spiegato nel framework dei 7 principi di un design basato sulla conversione, il “rapporto di attenzione” è il rapporto tra il numero di cose che puoi fare su una pagina, ed il numero di cose che invece dovresti fare.

Per farti capire meglio il concetto ti farò un esempio più pratico.

Le homepage dei siti web arrivano ad avere un “rapporto di attenzione” anche di 15:1 o addirittura di 20:1.

Questo perché sono pagine concepite per far navigare l’utente all’interno del sito, e quindi di permettergli di esplorare l’area di suo maggior interesse.

Quindi in questi casi il rapporto è così suddiviso: 20 cose che puoi fare (contattarmi, scoprire i servizi, scoprire chi sono) = 1 cosa che dovresti fare (un’azione tra queste).

Quando si progettano delle landing page che convertono invece, come detto in precedenza, questo rapporto dovrebbe essere sempre di 1:1.

1 cosa che puoi fare (contattarmi) = 1 cosa che dovresti fare (contattami).

Elimina le distrazioni

Se hai ancora qualche dubbio riguardo a come applicare il primo principio di un design focalizzato sulla conversione, ora ti spiego come eliminare le distrazioni.

Per creare focus e mantenere alta l’attenzione dei visitatori è indispensabile eliminare tutte le distrazioni presenti sulla pagina di atterraggio.

Per farlo puoi iniziare ad eliminare tutti i link che portano fuori il tuo visitatore dalla pagina.

L’unico link che il visitatore dovrà seguire è quello che porta all’obiettivo che vogliamo fargli completare.

Elimina quindi anche il menù di navigazione che permette ai visitatori di uscire dalla pagina.

Puoi crearne uno dedicato, che riassuma i punti salienti della tua landing, creando dei collegamenti ipertestuali all’interno della pagina con le così dette “ancore” o “anchor-text”, magari inserendo anche una Call to Action (chiamata all’azione) ben visibile.

Oltre a questo sarà utile eliminare o limitare  tutte le sezioni, le immagini, e qualsiasi altro elemento che non sia funzionale al nostro obiettivo di conversione e che rischia di distrarre l’utente inutilmente.

Ora che abbiamo capito come creare focus, possiamo passare al secondo principio!

Principio 2: Organizza le informazioni

Per creare un’ottima pagina di destinazione è indispensabile rispettare il secondo principio di un design focalizzato sulla conversione: organizzare le informazioni.

Capito quale sarà il nostro obiettivo di conversione, ora è il momento di creare la struttura della nostra landing page, organizzando al meglio i contenuti così da far fare all’utente un percorso ben preciso.

Il rischio di saltare questo passaggio potrebbe essere quello di ritrovarti a vendere un prodotto/servizio, ancor prima di averne esposto i suoi vantaggi.

Crea una struttura coerente all’obiettivo

Lascia in secondo piano sofware, tool e template e prendi la cara vecchia matita ed un foglio bianco.

Inizia ad annotare tutti i macro punti che ritieni indispensabili l’utente debba conoscere per poter completare l’obiettivo che ti sei prefissato.

Ora, sotto forma di scaletta, crea una gerarchia delle informazioni, secondo l’ordine più logico.

Questa sarà la struttura con cui presenti le informazioni della tua pagina di destinazione.

Ricordati che più riuscirai a trasportare l’utente da un punto A di partenza (il suo problema), ad un punto B di destinazione (la soluzione che offri), più le probabilità di convertire saranno maggiori.

Per farlo potrai avvalerti di foto, video, icone, illustrazioni e testi. Più riuscirai a miscelarli tra loro con la massima coerenza e più la tua struttura coinvolgerà l’utente!

F & Z patterns: cosa sono e come sfruttarli

Dopo aver creato la gerarchia delle informazioni, ed aver abbozzato la struttura della tua landing page è ora di pensare all’esperienza visiva che il tuo visitatore farà sulla pagina.

Come bisognerà strutturare ogni sezione? Dove andranno messe le immagini? E i Testi?

Le heatmap, ovvero le mappe di calore, hanno dimostrato che ci sono due modelli principali con i quali gli utenti leggono online.

Il modello a F ed il modello a Z.

Il primo, il modello a F, è adatto a pagine con molto testo.

Le mappe di calore hanno evidenziato che l’utente inizia la sua scansione dall’angolo in alto a sinistra verso la fine del lato destro, per poi scorrere in giù sul lato sinistro fino a quando un elemento non li incuriosisce ancora verso il lato destro.

Ti consigliamo quindi di inserire gli elementi più importanti su queste linee ed allineare i testi sempre a sinistra per il medesimo motivo. (FOTO)

Il secondo modello invece, detto anche Z-pattern, è adatto a pagine con poco testo.

Seguendo questo modello potresti progettare la tua pagina di destinazione alternando sezioni con il contenuto che va da sinistra verso destra a sezioni con il contenuto centrale.

Così facendo l’occhio del visitatore scansionerà la pagina in modo naturale, formando idealmente sullo schermo la lettera Z.

Perché dovresti creare un wireframe

Un Wireframe non è altro che lo scheletro della tua pagina, senza alcun elemento grafico e senza alcun immagine. Al loro posto si utilizzano dei placeholder.

Creare un wireframe è fondamentale per progettare al meglio la struttura della tua landing page senza farti distrarre da colori e foto.

Potrai capire se hai rispettato i pattern di cui ti ho parlato prima, se le informazioni hanno la giusta gerarchia e sono posizionate nel modo corretto e se ogni elemento presente è focalizzato all’obiettivo di conversione che vuoi raggiungere.

Principio 3: Coerenza

Il terzo dei 7 principi di un design focalizzato sulla conversione è fondamentale per non destabilizzare l’utente e per accompagnarlo in maniera naturale verso il raggiungimento del nostro obiettivo: la Coerenza!

Per qualsiasi attività, a prescindere dalla sua grandezza, è fondamentale avere un’identità visiva.

Ancor più fondamentale è che questa identità venga rispettata in ogni touch point che l’utente ha con il brand.

Per coerenza quindi si intende che la percezione visiva del tuo brand non venga alterata ma anzi mantenuta.

Brand Experience

Le relazioni che crei con i tuoi utenti sono alla base del tuo business.

L’utente, per creare una relazione stabile e duratura con il tuo marchio, deve entrare in contatto con il tuo brand numerose volte.

Per questo è fondamentale, per instaurare un rapporto di fiducia da parte del consumatore, che ci sia coerenza in qualsiasi punto di contatto con la tua attività.

Colori, font, immagini ed ogni aspetto caratterizzante a livello grafico, dovranno quindi essere utilizzati allo stesso modo in ogni occasione, dalle inserzioni, al sito web fino alla tua landing page.

Coerenza visiva tra le inserzioni e  la pagina di atterraggio

Hai mai provato a cliccare su un’inserzione ed atterrare su una pagina totalmente diversa da quella che ti saresti aspettato?

Magari con la conseguenza di chiudere tutto e scappare via il prima possibile?

Probabilmente chi ha creato quella landing page non ha seguito il principio numero tre di un design focalizzato alle conversioni.

A supporto della brand experience, sarà fondamentale che sia presente il design match, ovvero che le tue inserzioni saranno coerenti con la pagina di atterraggio.

Questo rassicurerà l’utente di essere nel posto giusto e lo farà proseguire nel suo viaggio alla scoperta del prodotto/servizio verso il quale ha espresso interesse, riducendo così il tasso di rimbalzo.

Principio 4: Mostra i vantaggi

Le persone online non leggono, scansionano!

In un mondo dove l’attenzione degli utenti è sempre più bassa, non possiamo basare tutte le nostre informazioni sul copy.

Gli utenti non leggono, per questo dovremo scegliere per la nostra pagina di destinazione foto, immagini, illustrazioni, icone e video che comunichino il messaggio in maniera diretta, immediata e facile.

Studi recenti affermano che il cervello umano ha una capacità incredibile nel memorizzare le immagini.

Leggendo o ascoltando un’informazione ad esempio, tre giorni dopo sarà possibile ricordarne circa il 10%, ma aggiungendo una qualsiasi immagine ci si ricorderà addirittura il 65%.

Non solo parole: foto, video e illustrazioni

Capito il concetto, ora si tratterà solo di scegliere le migliori immagini da inserire nella tua pagina di destinazione!

Queste dovranno essere coerenti con il messaggio da comunicare in ogni sezione, emozionare l’utente ed avranno lo scopo di creare empatia con il nostro prodotto/servizio.

I video sono un’arma potentissima, in quanto in pochi secondi riescono a comunicare il messaggio in maniera rapida e potente, coinvolgendo l’utente ed aumentando l’esperienza d’uso della nostra pagina di destinazione.

Le illustrazioni e le icone invece si possono utilizzare per veicolare bene i valori ed i benefici del nostro prodotto/servizio, così da alleggerire la parte testuale e far arrivare in maniera più diretta il nostro messaggio.

Un ultimo suggerimento generale è di rispettare il terzo principio di un design finalizzato alla conversione, ovvero quello della coerenza!

Tutti gli elementi grafici e visivi della nostro landing page dovranno essere coerenti con la brand experience così da coinvolgere appieno il nostro visitatore.

L’above the fold

L’immagine più importante di tutte è indubbiamente quella della “zona Hero”, overo la prima sezione della nostra pagina che rappresenta l’above the fold, ovvero la sezione che l’utente sarà in grado di visionare per prima senza dover compiere alcuna azione di navigazione.

Per la legge dei 5 secondi, che indica come un utente venga influenzato, all’atterraggio sulla pagina di destinazione, nei primi 5 secondi, dovremo essere in grado di far capire al visitatore: qual è la nostra offerta ed i relativi vantaggi, chi siamo e qual è l’azione che dovrà compiere!

Per questo l’immagine iniziale dovrà essere scelta con cura, comunicare i vantaggi della nostra offerta e rafforzare il nostro messaggio principale, chiamato anche “value proposition”.

Lo scenario migliore? La foto di una persona reale che utilizza il nostro prodotto/servizio.

Studi dimostrano che così facendo aumenta l’empatia con il visitatore e il tasso di conversione è nettamente superiore rispetto a foto del solo prodotto/servizio.

Principio 5: Attira l’attenzione

Eccoci al quinto principio della nostra lista dei 7 principi di design focalizzati sulla conversione: attirare l’attenzione!

Prima abbiamo parlato di come costruire l’attenzione a livello di struttura.

Ora invece ci soffermeremo su come attirare l’attenzione a livello visivo.

Prima di addentrarci negli aspetti più tecnici di come attirare l’attenzione, c’è da fare una premessa legata al colore ed alla sua psicologia.

I colori influenzano le nostre scelte e le nostre percezioni a livello inconscio.

Ad esempio un colore caldo trasmetterà un messaggio diverso rispetto ad un colore freddo.

Quello che voglio invitarti a fare è scegliere con cura i colori del tuo brand e della tua landing page, in maniera da essere sicuro che anche quelli aiutino a veicolare il giusto messaggio al tuo visitatore.

Non solo i colori aiutano ad attirare l’attenzione, vediamo ora insieme tutti i vari aspetti.

CTA che convertono

Le CTA (Call to Action) sono l’invito all’azione che proponiamo ai nostri visitatori di compiere, per raggiungere il nostro obiettivo.

Sono elementi importantissimi per incrementare il tasso di conversione, in quanto saranno il mezzo con il quale raggiungiamo il nostro fine.

Dovranno essere ben visibili, chiari ed attirare l’attenzione.

Ecco allora qualche suggerimento per creare delle CTA che convertono:

1. Usa colori contrastanti: utilizza dei colori che contrastino con i colori del resto della pagina, così da focalizzare ed attirare l’attenzione.
2. Consistenza: tutti i tuoi pulsanti di invito all’azione dovranno essere uguali, dello stesso colore e dovranno indicare la medesima azione da compiere
3. Dimensione del pulsante: il carattere del pulsante dovrà essere teoricamente il doppio del carattere della tuo copy, sia come dimensione che come peso
4. Usa un effetto animato: per rendere più visibile ed “allettante” la tua CTA potresti utilizzare degli effetti animati con il cambio del colore al passaggio del mouse
5. Posizionamento: dovresti sempre inserire la tua CTA all’interno dell’above the fold, ed alla fine della tua pagina. Oltre a questo, in base alla lunghezza della pagina,dovresti inserirla dopo ogni sezione importante per rafforzare l’invito all’azione, senza essere invasivo!

Gerarchia visiva e spazio negativo

Per attirare l’attenzione dei tuoi visitatori verso gli elementi principali della tua pagina dovrai creare una gerarchia visiva.

Come? Creando contrasto tra gli elementi presenti.

Un esempio? Utilizza dimensioni diverse del carattere tipografico tra titoli e body dei tuoi paragrafi, magari utilizzando un copy accattivante.

Ancora, utilizza il grassetto per dare importanza e rilievo a titoli e parole del tuo testo. Ricordi, gli utenti non leggono, scansionano! Questo li aiuterà a trovare subito gli elementi che cercano attirando la loro attenzione.

Ultimo suggerimento riguardo alla tipografia, è quello di utilizzare due font diversi per i titoli ed il corpo del testo. Mi raccomando però, che siano coerenti alla tua brand identity e che veicolino in modo adeguato il tuo messaggio!

Un altro elemento che aiuta a creare attenzione è lo spazio negativo o spazio bianco.

Per intenderci è tutta la parte di pagina non ricoperta da elementi grafici o testuali.

Utilizzando sapientemente lo spazio negativo riusciremo a focalizzare l’attenzione dei nostri visitatori verso gli elementi davvero importanti della nostra pagina!

Bonus: utilizza le immagini direzionali

Numerosi studi hanno dimostrato, grazie a mappe di calore e strumenti di tracciamento oculare, che immagini direzionali e frecce aumentano l’attenzione verso gli elementi importanti della pagina, facendoli visualizzare per primi.

Ma cosa sono le immagini direzionali? Sono delle foto dove il soggetto rappresentato, al posto di guardare verso l’utente, guarda nella direzione del testo e della chiamata all’azione.

Molto famoso è il test che è stato fatto per la sezione hero del sito rappresentato nell’immagine qui sotto.

Il bambino, come puoi vedere, che guarda verso l’utente focalizza l’attenzione sulla sua faccia.

Diversamente invece il bambino che guarda verso il blocco di testo, focalizza l’attenzione su quest’ultimo e sulla CTA.

Principio 6: L’importanza della fiducia

La fiducia sta alla base del rapporto tra la nostra azienda e l’utente finale.

Conquistare la fiducia del visitatore è di primaria importanza se vogliamo che le nostre conversioni aumentino in modo drastico.

Per questo è importante inserire nelle nostre landing page la riprova sociale verso il nostro servizio/prodotto.

Come? Inserendo le testimonianze dei nostri clienti, i loghi delle aziende che ci hanno scelto, e le garanzie che offriamo ai nostri futuri clienti.

Ecco alcuni consigli pratici:

Per quanto riguarda i loghi delle aziende con cui hai collaborato, cerca di inserirli in una misura adeguata, non troppo grandi, e desaturati, ovvero senza colori.

Questo per non distogliere l’attenzione dal resto del tuo design.

Le garanzie invece, come ad esempio soddisfatti o rimborsati, oppure reso gratuito entro 30 giorni ecc, sono un ottimo per creare fiducia e ridurre ogni possibile obiezione all’acquisto/azione.

Il consiglio è di posizionarli vicino al form di contatto o al pulsante di acquisto, o più in generale vicino alla sezione dove l’utente compirà l’azione da noi desiderata.

Un altro metodo per aumentare la fiducia, nel caso ci fosse la possibilità di pagare direttamente sul sito, è quella di inserire i loghi dei metodi di pagamento, così da rassicurare l’utente su come potrà effettuare la transazione.

Ora vediamo invece come usare la recensioni a nostro favore.

Le recensioni

Le recensioni sono gli elementi più importanti per creare fiducia nei nostri visitatori.

Per l’utente, sapere che altre persona hanno usufruito del prodotto/servizio e leggere le loro opinioni è davvero importantissimo per potersi fidare di noi.

Per utilizzare lo strumento delle recensioni nel modo corretto e producente possibile però dovremo renderle il più veritiere possibile.

Ecco alcuni suggerimenti pratici per ottimizzare al massimo le recensioni dei tuoi clienti:

1. utilizza foto reali, in alta risoluzione e se possibile con il soggetto in primo piano e sorridente;
2. inserisci quanti più dettagli possibili, come la posizione lavorativa ed il nome intero, per rendere le testimonianze più credibili possibile;
3. nel caso in cui non avessi le foto reali o l’autorizzazione per poterle usare, non utilizzare foto stock di persone super curate, sono poco credibili. Prediligi invece foto realistiche di persone comuni;
4. utilizza il grassetto per enfatizzare parti salienti della recensione, attirerai maggiormente l’attenzione su di essa;
5. utilizza una dimensione del carattere di poco più piccola rispetto al testo normale e lascia abbastanza spazio tra una recensione e l’altra. Il tutto per attirare maggiormente l’attenzione del tuo visitatore.

Principio 7: riduci l’attrito

Bene, siamo giunti all’ultimo dei 7 principi di un design focalizzato sulla conversione: ridurre l’attrito.

Arrivati a questo punto la tua pagina di destinazione è quasi pronta per iniziare a macinare conversioni.

E’ giunto però il momento di focalizzarci sugli aspetti funzionali e di user experience, che se non curati al meglio possono distruggere il lavoro fin qui svolto.

I moduli di contatto

Progettare un buon modulo di contatto è fondamentale per poter aumentare il tuo tasso di conversione.

Ecco qualche consiglio pratico in merito:

1. riduci al minimo i campi richiesti, un form con numerosi campi da compilare può scoraggiare l’utente con il rischio di fargli abbandonare la pagina;
2. se hai intenzione di profilare meglio i tuoi utenti e richiedere comunque un numero abbastanza alto di informazioni, utilizza un form in più step. Questo guiderà l’utente, riducendo il numero di campi per ogni step;
3. motiva la richiesta di informazioni che potrebbero far pensare l’utente. Un esempio? Se chiedi il numero di telefono specifica la finalità di tale informazione;
4. ricordati di creare una “thank you page” per ringraziare e rassicurare l’utente dell’azione appena compiuta. Pensa anche a come poterla utilizzare ai fini di marketing 😉

Ottimizza la versione mobile

Gli smartphone stanno monopolizzando la fruizione del traffico online.

Sarà fondamentale ottimizzare la tua pagina di destinazione con la metodologia “mobile first”.

Pensa prima a come verrà visualizzata la tua pagina di destinazione dai dispositivi mobili ed ottimizzala di conseguenza.

Rendi il tuo design semplice e scorrevole, eliminando da mobile tutte le sezioni superflue non finalizzate alla conversione.

Ottimizza al massimo l’above the fold della tua versione mobile.

Da smartphone gli utenti hanno tassi di rimbalzo maggiori e minor tempo di permanenza sulla pagina. Sarà quindi indispensabile riuscire ad attirare la loro attenzione all’apertura della pagina.

Velocità e accessibilità

Altri due aspetti fondamentali per l’esperienza utente sono la velocità di caricamento e l’accessibilità.

Gli utenti sono sempre meno pazienti, ed una pagina che ha tempi di caricamento sopra i 2 secondi sono soggette ad un’altissima frequenza di rimbalzo e di abbandono, lasciando nella mente dell’utente una pessima esperienza con il brand.

Puoi verificare la velocitò di caricamento delle tue pagine di destinazione con servizi come: Pingdom , GTMetrix o Page Speed Insights di Google.

Per quello che riguarda l’accessibilità invece, controlla che la tua langing page sia il più fruibili possibile anche da persone con disabilità visive, cognitive e fisiche.

Non inserire testi troppo piccoli, da mobile controlla che i pulsanti siano progettati per il tap con il dito e non per il clic del mouse e assicurati che i colori della tua landing abbiano un contrasto sufficientemente elevato.

Per questo puoi utilizzare il Contrast Checker, uno strumento molto semplice, eche ti suggerisce un punteggio in base ai colori della tua pagina di destinazione.

Conclusioni

In questo articolo abbiamo visto i 7 principi di un design focalizzato sulla conversione.

Abbiamo capito che per creare una pagina di destinazione a prova di conversione dobbiamo focalizzarci su un unico obiettivo, organizzare al meglio le nostre informazioni e mantenere coerenza con il nostro brand e le nostre campagne.

Abbiamo poi approfondito l’utilizzo di immagini ed icone per comunicare al meglio i nostri vantaggi, come attirare l’attenzione dei nostri visitatori e creare fiducia verso il nostro prodotto/servizio, ed infine abbiamo capito l’importanza di curare la user experience dell’intera pagina di atterraggio.

Se vuoi approfondire questi temi, ed essere guidato verso la creazione di una pagina di atterraggio che converta allora cosa aspetti, contattaci!