Essenziale per qualsiasi sito web o per qualsiasi cosa un marchio diffonda nel mondo è l’invito all’azione (CTA, call to action). L’invito all’azione è ciò che vuoi che gli utenti facciano. Sui siti internet il pulsante di solito dice qualcosa sull’effetto di: “Iscriviti ora”, “Inizia”, “Leggi” e così via.
Per disegnare una call to action invitante per prima cosa dobbiamo capire quale azione vogliamo che i visitatori del nostro sito compiano, che si tratti di ricevere maggiori informazioni, ordinare, acquistare, richiedere un preventivo, iscriversi, donare, registrarsi o altro. E in definitiva, come cioè prevedi di convertire la persona da un visitatore a lead o cliente.
Ci sono elementi imprescindibili da rispettare.
Un pulsante di invito all’azione è una raccolta di 4 elementi: posizionamento, forma, testo e colore.
Posizionamento: la CTA above the fold
È opportuno posizionare le informazioni più importanti above the fold, cioè nella parte della pagina visibile nella prima schermata. Questa pratica è molto comune ed è particolarmente utile per i prodotti o servizi che hanno bisogno di più dettagli e quindi di pagine lunghe. Il rischio di avere un invito all’azione nella parte finale di una pagina lunga è che non venga mai visto.
Forma: scegli tu, basta che sia coerente
Tradizionalmente i pulsanti CTA sono rettangoli orizzontali, poiché le persone si sono abituate a percepire questa forma come pulsanti cliccabili. Il moderno User Interface Design suggerisce di disegnare le CTA con angoli arrotondati, perché questo tipo di forma attira l’attenzione sul testo contenuto all’interno.
Anche le dimensioni sono importanti. Più un elemento è grande, più diventa evidente. Tuttavia un pulsante di invito all’azione ben fatto è in genere abbastanza grande per essere trovato rapidamente, ma non troppo grande da rovinare la composizione visiva e la gerarchia del layout. I leader di mercato spesso forniscono raccomandazioni sulle dimensioni effettive dei pulsanti nelle loro linee guida. Ad esempio, Apple afferma che i CTA nell’interfaccia utente mobile dovrebbero essere almeno 44 x 44 pixel, mentre Microsoft consiglia 34 x 26 pixel.
Le forme dei pulsanti possono anche variare e in questo caso è opportuna una riflessione sul messaggio che evocano:
- quadrati e rettangoli: disciplina, forza, coraggio, sicurezza, affidabilità;
- triangoli: eccitazione, rischio, pericolo, equilibrio, stabilità;
- cerchi, ovali ed ellissi: eternità, femmina, universo, magia, mistero;
- forme astratte: la dualità di significato, unicità, elaborata.
Testo: il messaggio deve essere leggibile
Gli ottici-optometristi sanno bene che due colori con un contrasto di valore basso sono di difficile lettura. Ciò è particolarmente vero sugli schermi mobili, con i quali è più probabile che gli utenti si trovino all’aperto e che presentino riflessi sullo schermo. E’ importante quindi scegliere un colore di testo in contrasto con il colore di sfondo del pulsante.
Le linee guida per l’accessibilità dei contenuti web di WC3 sono un buon punto di partenza per stabilire la grandezza e colore del testo.
Questi standard, usati normalmente dai web designer, stabiliscono standard minimi di contrasto in modo che gli utenti con visione moderatamente bassa possano leggere il tuo testo.
Secondo il WC3, il rapporto di contrasto tra un colore e il suo sfondo varia da 1 a 21 in base alla sua luminanza o intensità della luce emessa.
Il W3C raccomanda i seguenti rapporti di contrasto per il testo del corpo e del testo dell’immagine:
Il testo piccolo dovrebbe avere un rapporto di contrasto di almeno 4,5: 1 sullo sfondo.
Il testo grande (con 14 pt se font in grassetto / 18 pt se font regular) dovrebbe avere un rapporto di contrasto di almeno 3:1 sullo sfondo.
Esempio: nell’immagine seguente solo i testi a destra consentono una lettura agevole.
Colore: evidenza e contrasto
Nel processo di conversione, cioè di stimolo all’azione in un sito internet, in una landing page o anche in un volantino, la scelta dei colori è molto importante. Pensiamo, per esempio, all’importanza di una landing page realizzata ad hoc per una campagna di SMS con link i cui risultati sono particolarmente importanti.
Sappiamo che un invito all’azione più evidente e che risalti rispetto al resto del layout si traduce in più conversioni.
Se, ad esempio, il colore del pulsante è a basso contrasto rispetto al colore di sfondo, la visibilità sarà scarsa.
Qualunque colore scegliate per la vostra CTA, assicuratevi che il colore sia usato esclusivamente per essa.
Se è stato scelto il rosso, sarebbe bene non usarlo per dei testi su cui non è possibile fare clic. Il colore deve cioè dovrebbe essere utilizzato solo quando è anche selezionabile.
Un’altra questione da considerare è il significato che i nostri utenti associano a determinati colori.
Ad esempio, il blu è il colore più comunemente usato per i collegamenti ipertestuali. Pertanto, la maggior parte delle persone associa il colore blu ai collegamenti ipertestuali. Sanno che se il testo su una pagina è blu, probabilmente puoi fare clic su di esso. Il blu è però anche il colore maggiormente associato al settore dei servizi tecnologici e non idoneo a settori diversi, quali l’agroalimentare.
Nella cultura occidentale inoltre esistono alcune associazioni tra colori e messaggi:
- rosso: pericolo, attenzione, stop, è il colore per tradizione delle call to action;
- arancione: economia, valore, evoca messaggi di pace e non aggressivi;
- giallo: felicità, infanzia, estate, generalmente è il primo colore notato da chi guarda;
- verde: ambiente, calma, sicurezza, rassicura e richiama il concetto di riscontri positivi;
- blu: social network, dimensione professionale, suggerisce che esistano dei collegamenti link ad altre pagine.
Test test test
Fare dei test per chiarire quale versione di una pagina o landing page converte di più è una prassi importante.
Una volta che il risultato della versione preferita è chiaro, è opportuno mantenerlo nel tempo, perché cambiare spesso comunicazione potrebbe essere controproducente.
