5 Tecniche di progettazione per pulsanti CTA migliori
Quando visitiamo la maggior parte dei siti web, spesso abbiamo un obiettivo in mente. Per raggiungere questo obiettivo, di solito c'è una serie di passaggi che dobbiamo compiere e il primo passo inizia con il clic su un pulsante CTA (call to action). Pensa all'ultima volta che ti sei registrato a un servizio o hai scaricato un'applicazione, probabilmente il processo includeva un'interazione con un pulsante di invito all'azione.
I pulsanti CTA sono i pulsanti che utilizzi nel tuo sito web per guidare gli utenti verso la conversione dell'obiettivo. L'intero punto di un CTA è quello di indirizzare i visitatori del tuo sito a una linea d'azione desiderata. Alcuni esempi comuni di CTA includono:
- "Inizia una prova"
- "Scarica l'app / libro / guida"
- "Iscriviti per aggiornamenti"
- "Richiedi una consulenza"
Oggi parleremo delle 5 migliori pratiche per la progettazione di pulsanti CTA insieme ai migliori esempi del mondo reale per aiutarti a ottenere il maggior numero di clic dalla tua pagina di destinazione.
1. Pulsante visivamente notevole
Il tuo colore pulsante è importante. Infatti, se hai intenzione di prendere solo un singolo consiglio da questo articolo, dovrebbe essere questo: "Considera il colore del tuo pulsante CTA". Usando il colore puoi rendere certi pulsanti risaltare più di altri dando loro più risalto visivo.
Usa colori contrastanti
I colori contrastanti funzionano meglio per i pulsanti CTA, utilizzando colori contrastanti è possibile creare pulsanti sorprendenti che si distinguono. Dovresti selezionare un colore contrastante dalla combinazione di colori della pagina web, pur continuando a integrarlo con il design generale. Si consideri l'esempio di Firefox di seguito. Il colore verde del pulsante CTA sulla pagina di Firefox sta saltando fuori dalla pagina e attira immediatamente l'attenzione dell'utente.
Il pulsante CTA di Firefox è di colore verde brillante e si staglia bene su uno sfondo blu scuro
Un altro pulsante CTA accattivante può essere trovato sulla homepage di Hipmunk. Un pulsante arancione brillante cattura l'attenzione dell'utente e definisce la prossima azione possibile.
Spazio negativo
Non solo il colore è importante per un CTA, ma anche la quantità di spazio attorno ad esso. Spazio bianco (o spazio negativo) crea il respiro essenziale e separa i pulsanti CTA da altri elementi nell'interfaccia utente. La vecchia home page di Dropbox era un buon esempio di utilizzo dello spazio negativo per rendere il loro CTA primario pop. Il blu "Iscriviti gratis" CTA si distingue dal blues leggero dello sfondo.
2. Testo orientato all'azione
Scrivere un testo per il tuo pulsante di invito all'azione che costringerà i tuoi visitatori a intraprendere l'azione giusta non è un compito facile. Fortunatamente, ci sono alcune cose che possono aiutarti a farlo:
Inizia con un verbo
Dovresti evitare parole vaghe e noiose come "Invio per ulteriori informazioni" per i tuoi pulsanti CTA e sostituirli con parole più orientate all'azione come "Inizia la tua prova gratuita" o "Ottieni subito sconto." Evernote ha uno dei più comuni, ma funzionano ancora testi orientati all'azione per il loro pulsante CTA.
Inizia con un verbo come "Start", "Get" o "Join"
Un esempio più interessante può essere trovato sulla homepage di Treehouse. Il CTA sul sito Web di Treehouse non dice solo "Inizia una prova gratuita"; dice "Richiedi la tua prova gratuita". La differenza nella formulazione può sembrare sottile, ma "Richiedi la tua prova gratuita" suona molto più personale.
Usa breve e facile da capire Testo per i pulsanti
Assicurati di specificare esattamente cosa otterrà il visitatore se fa clic sul CTA. Idealmente, si desidera mantenere il testo del pulsante tra due e cinque parole.
Aggiungi una proposta di valore
Molto probabilmente hai notato che molti pulsanti hanno le parole come "gratis" nella loro copia e non è una coincidenza, utilizzando tali parole in copia pulsante sottolinea la proposta di valore della vostra offerta. Quindi, quando scrivi il tuo CTA, prova a trovare un modo per integrare una (o tutte) 3 parole persuasive:
- Gratuito
- indennità
- Immediatamente
Lasciatemi fare un esempio: una grande paura che gli utenti hanno prima di impegnarsi a iscriversi a qualcosa, è che sarà doloroso cancellare la loro iscrizione se non gli piacerà il servizio. Netflix allevia quella paura usando la promessa "Annulla in qualsiasi momento" proprio accanto al CTA "Iscriviti gratis per un mese".
Crea un senso di urgenza
Costruire un senso di urgenza nei tuoi pulsanti CTA può produrre delle impressionanti percentuali di click-through. Ad esempio, è possibile utilizzare il testo del pulsante come "Iscriviti e ricevi uno sconto del 25% solo oggi!" Limitando il tempo che qualcuno deve prendere la decisione, le persone vogliono reclamare la propria offerta finché possono.
Testo utile
A volte potresti voler considerare l'aggiunta di una linea aggiuntiva di informazioni all'interno del testo del tuo pulsante. Questa pratica è comune con i pulsanti di prova gratuiti. Ad esempio, un pulsante di prova gratuito potrebbe dire "prova di 30 giorni, nessuna carta di credito" in testo più piccolo sotto il pulsante CTA con il testo "Inizia la prova gratuita". Questo testo aggiuntivo dovrebbe facilitare il processo decisionale.
3. Rendilo visibile senza scorrere
Il posizionamento dei pulsanti di invito all'azione è importante quanto il colore e il messaggio. Un pulsante CTA dovrebbe trovarsi in un punto facile da trovare che segue organicamente dal flusso della pagina web. Dovresti cercare di mantenere il tuo pulsante CTA above the fold in modo che gli utenti non lo perdano mai. Idealmente, il tuo pulsante CTA dovrebbe essere tra le prime cose che un utente vede sulla pagina quando lo raggiungono. Le informazioni aggiuntive dovrebbero rimanere sotto la piega, dove rimane accessibile ma non distrarre.
4. Pulsante grande con angoli arrotondati
Pensa a come il design comunica l'accessibilità. In che modo gli utenti comprendono l'elemento come un pulsante? Usa forma e dimensioni per rendere l'elemento simile a un pulsante.
Rendilo abbastanza grande
Il CTA dovrebbe essere abbastanza grande da poter essere visto a distanza, ma non così grande da sminuire l'attenzione dal contenuto principale della pagina
Pulsanti utente con angoli arrotondati
La forma del bottone può giocare un ruolo importante. È un fatto provato che gli angoli arrotondati sono più facili per gli occhi. Nel test di ContentVerve, un pulsante verde arrotondato ha fatto meglio di un rettangolo blu.
5. Meno è più quando si tratta di scelte
Tieni presente che se vuoi che i tuoi clienti agiscano, devi aiutarli, rimuovendo tutti i possibili ostacoli dalla loro strada. Quando gli utenti hanno troppe scelte, tendono a confondersi. Quindi, è meglio offrire ai potenziali clienti un'unica opzione.
Se desideri ancora includere più scelte di pulsanti, attribuisci peso a una scelta rispetto ad altre per aiutare gli utenti a canalizzare verso un percorso specifico. Un buon esempio è Evernote: non appena si raggiunge una parte inferiore della home page di Evernote, è abbastanza chiaro che una scelta preferibile è "Iscriviti gratuitamente", mentre il CTA per gli utenti per confrontare i piani è molto secondario.
Conclusione
Per ottenere un design CTA efficace, è necessario considerare più del semplice pulsante. È anche importante pensare al colore dello sfondo, alle immagini circostanti, al testo circostante e a molti altri elementi. Il team di Basecamp comprende l'importanza di questi elementi e ha progettato un layout perfetto per la loro pagina di destinazione. Anche la microcopia che usano sotto il pulsante CTA ("4.714 aziende iscritte questa settimana!") Aumenta la fiducia dei potenziali clienti.
Spero che i suggerimenti menzionati in questo articolo ti aiutino a creare un pulsante di invito all'azione migliore per il tuo sito web. L'ultimo momento è l'importanza dei test: se decidi di ricreare un CTA sul tuo sito, ricorda di testare per vedere se funziona per il tuo pubblico.