Come il vostro grafico vi sta uccidendo il tasso di conversione

Di Tim Ash

da ClickZ.com

How Your Graphic Designer Is Killing Your Conversion Rate
15 Marzo 2010

Lasciate che vi dica una verità scomoda: il vostro bambino è brutto. La vostra landing page ha problemi gravi e fondamentali che contribuiscono a dei tassi di conversione bassi e questo vi sta costando un sacco di soldi. A peggiorare le cose, questa situazione era del tutto evitabile, peggio ancora, siete stati complici attivi della vostra rovina.

Come è potuto accadere?Siete stati guidati giù per questo sentiero dal team creativo interno o dall’agenzia esterna. A causa della limitazione della loro unica prospettiva, siete stati costretti a sacrificare le conversioni in nome di un look figo. Quindi, alla fine vi siete convinti che la vostra craetura è magnifica ve ne siete immamorati.

Diamo uno sguardo alle origini di questa situazione ed iniziamo con un obiettivo in mente. Il “fine” dovrebbe essere abbastanza ovvio: avere la landing page o un processo più efficiente possibile. Ciò richiede di mettere da parte le vostre esigenze aziendali e personali e di considerare tutto quanto dal punto di vista dei visitatori. Solo loro cotano e senza di loro non ci sarebbe un business. È possibile che in passato a abbiate formalmente sostenuto il concetto che “il cliente ha sempre ragione”, ma probabilmente non avete fatto niente per metterlo in pratica.

La chiave per progettare landing page efficaci è la chiarezza.

Lo scopo della vostra landing page deve essere chiaro. Il visitatore deve essere focalizzato su un percorso semplice che conduce all’azione di conversione desiderata. Questo percorso semplice dovrebbe spiccare fuori dalla calma Zen della landing page.

Le peggiori pratiche

Purtroppo, molte landing page stanno sul versante opposto dello spettro, rispetto alla condizione desiderata: urlano e richiedtono l’attenzione del visitatore. Si tratta di un assalto visivo ai sensi del visitatore, che lo costringe a determinare quale dei tanti elementi della pagina sono quelli importanti.

I grafici raramente hanno una formazione orientata alla massimizzazione delle conversioni. I migliori sono orgogliosi della loro capacità di essere anticonformisti e di “pensare fuori dagli schemi”. Si annoiano a fare un regolare lavoro di progettazione grafica orientato alla produzione; a loro piace continuare a divertirsi facendo qualcosa di nuovo e di interessante ad ogni progetto.

Ecco un breve elenco delle trasgressioni grafiche più comuni che ho trovato sulle landing page:

Utilizzo selvaggio dei colori di sfondo: molte landing page usano temi con colori scuri e drammatici. Frequentemente lo sfondo della pagina o grandi sezioni di esso sono neri o di colori saturi e brillanti. Purtroppo, questa scelta di colore spesso crea un’atmosfera oscura e incombente, o che sottintende qualcosa di così esotico che attirerebbe solo un adolescente maschio pieno di adrenalina, patito di videogame.

Testo sgargiante: il testo ed i titoli della pagina sono disposti a casaccio sulla pagina e frequentemente venono usati caratteri molto grandi con colori a contrasto elevato; le dimensioni dei font sono spesso esagerate e vengono ulteriormente enfatizzate dall’utilizzo di effetti ai bordi, ombreggiature, dissolvenze, transizioni di colore e motivi di riempimento.

Abbellimenti visivi e svolazzi: Anche elementi semplici della pagina, come i bordi di un box, sono sottolineati da ombre esterne, bagliori o altri effetti. I semplici cerchietti negli elenchi puntati sono sostituiti da segni di spunta grafici colorati o altre icone. Lo spazio dello fondo neutro, ai lati della landing page è spesso riempito di qualche trama intricata o di immagini fotografiche.

Animazione e video: tutti gli altri peccati di design della landing page impallidiscono di fronte all’uso aggressivo del movimento, animazione e video. Immagini e testo pulsano o ruotano, slideshow di immagini fanno un uso selvaggio degli effetti di transizione; intricate sequenze di animazione attirano l’occhio e sequenze animate partono da sole al caricarsi della pagina. Queste tattiche per attirare l’attenzione di potenziali acquirenti sono molto efficaci; purtroppo, raramente sono legate all’obiettivo di conversione desiderato nella landing page e servono solo a sperperare qualche secondo prezioso della poca attenzione di cui dispone il visitatore. Non mettete contenuti multimediali sulla vostra pagina senza prima provarli per determinare l’impatto sulla conversione.

Case Study: Credo Mobile

Il nostro cliente, Credo Mobile, è una azienda di telefonia mobile socialmente consapevole, con sede a San Francisco. Essa dona una parte di tutte le sue entrate a gruppi che promuovono iniziative per lo sviluppo, che che i membri di Credo aiutano a scegliere.
Credo era interessata a migliorare le prestazioni di una landing page per una nuova campagna e-mail.

La pagina originale è la seguente:

credo-mobile

Credo chiese alla mia agenzia di condurre una Express Review online della sua landing page, per individuare i principali problemi di conversione. Dopo la revisione, furono creati, per raffianmento successivo, una serie di design che inglobavano le nostre raccomandazioni best-practices e gli ulteriori feedback sul lavoro in corso.

La landing page finale è la seguente:

credo-mobile-new

I risultati sono stati sbalorditivi.

In una prova testa-a-testa la nuova pagina ha avuto risultati migliori rispetto all’originale, dell’84 per cento.

Perché questa differenza radicale?

Si può sostenere che le landing page sono simili: entrambe mostrano la singola immagine di un telefono ed un pulsante distinto per l’invito all’azione.

Per rispondere a questa domanda la mia agenzia impiegato il nostro strumento visuale di previsione dell’attenzione.

Comprendendo come funzionano il cervello ed il sistema di percezione visiva, è possibile fare una simulazione software accurata, di come una pagina Web verrà visualizzata durante i primi secondi di movimento degli occhi e dove sarà focalizzata l’attenzione. I risultati sono istantanei e non richiedono costosi studi di eye-tracking, o instrumentazione delle pagine e lunhe raccolte di dati per creare heatmaps dal tracciamento del movimento del mouse. Le “Attention heatmaps” possono anche essere create sulla base di bozze grafiche in corso d’opera, non ancora visibili come pagine online.

La pagina prima degli interventi, mostra sparsi movimenti oculari (linee gialle) che rimbalzano per tutta la pagina. Guidati dai blocchi di colore e dalle zone di forte contrasto, gli occhi non trovano un posto per soffermarsi. La mappa termica dell’attenzione colorata, mostra anch’essa una attenzione diffusa in molte aree della pagina. Nel mezzo di tutto questo “rumore” visivo, il pulsante verde di chiamata all’azione viene perso e ignorato.

credo-mobile-HM

Per contro, la pagina finale mostra un osservare controllato, focalizzato sul telefono cellulare e il pulsante di invito all’azione. Dopo una breve scansione dii logo delle cause per lo sviluppo che Credo sostiene, (“prova sociale” che produce il fenomeno cognitivo di associazione detto “effetto alone”), l’occhio ritorna sul fumetto rotondo dell’offerta e sul telefono. Il pulsante di invito all’azione è uno dei tre “punti caldi” attenzione, rossi, della pagina.

credo-mobile-new-HM

La morale della storia è chiara: i grafici deve seguire una estetica visuale minimalista che si concentra sulla conversione e non sull’aspetto di facciata.

La nuova landing page può non essere visivamente stimolante, ma va bene così. In effetti, è auspicabile; in una pagina sotto tono l’invito all’azione emerge dalla relativa immobilità dello sfondo.

Il “noioso” funziona e vi fa fare un sacco di soldi e questo dovrebbe esse invece, molto eccitante.

Tim AshTim Ash

Traduzione di

biografia originale in inglese

sito di Tim Ash

Stampa articolo in formato PDFScarica il file in formato PDF

Altri articoli di Tim Ash

Altri articoli di ClickZ sulle conversioni e ROI

Post A Comment

Il tuo indirizzo email non sarà pubblicato.