Design della perfetta Call to Action

Pensa all’ultima volta che hai acquistato qualcosa su Amazon o che hai scaricato un’app sul tuo cellulare, in entrambi i casi il percorso che hai seguito per raggiungere il tuo obiettivo ha compreso un passaggio fondamentale: il click sul cosiddetto CTA button (pulsante della call to action).

Con il termine call to action si fa riferimento ad una frase o ad una parola che invita il pubblico ad eseguire una precisa azione. Si tratta di un elemento che ha sempre avuto un'importanza fondamentale in ogni forma di comunicazione, importanza che è cresciuta con l'avvento dell'era digitale e del commercio online. In quest'ambito le parole che formano la call to action sono state presentate in varie forme, ma non c'è dubbio che la più efficacie sia quella del pulsante o bottone

Il CTA button ha il cruciale compito di attrarre il visitatore e guidarlo nel compimento dell'azione da noi desiderata, sia essa l'acquisto di un prodotto, la registrazione ad un servizio, il download di una app, l'iscrizione alla newsletter e molto altro.

Ma come fare per creare un CTA button dal design efficace (e cioè che porti click)?

In questo articolo condividiamo 5 best practices per realizzare il pulsante perfetto per la nostra call to action.

 

1) Pulsante a forte impatto visivo

 

Colore

Il colore è forse l’elemento più importante per un CTA button dal design d’effetto. Usando sapientemente la palette di colori a disposizione è possibile fare in modo che il pulsante CTA risalti maggiormente rispetto agli altri elementi della pagina. 

Scegliere colori tra loro contrastanti è il modo più efficace per creare CTA buttons in grado di attirare l’attenzione; fondamentale è anche cercare di non creare antiestetiche stonature cromatiche.

Guarda il pulsante CTA utilizzato da Firefox: il verde salta subito all’occhio, ma allo stesso tempo si fonde bene con il colore scelto per lo sfondo.

 

CTA button Firefox

 

Altro buon esempio di CTA button è quello di Hipmunk.

 

CTA button Hipmunk

 

Spazio bianco

Oltre al colore, ciò che è importante è calibrare bene lo spazio vuoto attorno al CTA button. Il giusto spazio tra il pulsante e gli altri elementi che compongono la pagina web, aiuta a rendere il design più arioso e pulito.

La vecchia homepage di Dropbox rappresenta un buon esempio di come usare lo spazio bianco per far risaltare la call to action.

 

CTA button Dropbox

 

2) Testo orientato all’azione

Come scrivere la perfetta call to action?

Indurre i visitatori del sito a fare qualche cosa non è facile, ma esistono delle accortezze in grado di aiutarti.

 

Inizia con un verbo

Usa verbi come “Comincia”, “Ottieni”, “Unisciti”, “Iscriviti”, in grado di definire in modo immediato un'azione da compiere; evita invece di usare parole che potrebbero risultare vaghe e noiose.

Il CTA button di Evernote contiene un testo semplice e comune, ma molto efficace ("Iscriviti gratuitamente") e in grado di:

  • descrivere in poche parole la funzione del pulsante;
  • invitare all'azione in modo diretto;
  • definire la caratteristica principale del servizio: è gratis.

Prova ad immaginare se il testo del pulsante si fosse limitato alla parola "Proseguire". In questo caso il testo:

  • non invita in modo diretto ad una azione, poiché il verbo coniugato all'infinito lo rende vago;
  • non chiarisce che cosa succederà esattamente dopo il click;
  • non comunica il fatto che il servizio è gratuito, ovvero la sua caratteristica essenziale in questa fase di registrazione.

 

CTA button Evernote

 

Treehouse fornisce un altro interessante esempio: il pulsante CTA non si limita a dire “Comincia un trial gratuito”, ma dice “Richiedi il tuo trial gratuito”: l'inserimento di un pronome possessivo conferisce al testo una nota personale e familiare.

 

CTA button Treehouse

 

Testo chiaro e semplice

Fa in modo che il CTA button comunichi esattamente all’utente ciò che egli otterrà cliccandoci sopra.

Il testo ideale da inserire all’interno del pulsante CTA va dalle due alle cinque parole.

 

Aggiungi valore alla tua proposta

Includendo nel testo della call to action parole come “gratis”, “bonus” e “immediato” l’offerta risulterà più accattivante, oltre a descriverla meglio.

L'esempio di Netflix mostra come sia possibile arricchire il pulsante con del testo a corredo posto in prossimità. In questo caso l'azione principale è la registrazione gratuita per 1 mese, ma il testo accompagnatorio tranquillizza gli utenti (che come tutti gli utenti sono restii ad iscriversi a qualsivoglia sito per paura di non poter poi eseguire la cancellazione in modo rapido e indolore) comunicando loro fin da subito che potranno eliminare il loro account in qualsiasi momento.

In questo caso nel trade-off tra il suggerire agli utenti l'idea di cancellazione del servizio (l'esatto contrario di ciò a cui Netflix punta) e la volontà di promuovere la trasparenza del servizio, ha prevalso la seconda.

 

CTA button Netflix

 

Creare senso di urgenza.

Dare all’utente un tempo limitato per decidere è una tecnica efficace perché fa in modo che egli richieda velocemente la sua offerta.

 

Testo che aiuta

Qualche volta è utile aggiungere al testo del CTA button qualche parola in più.

Ad esempio, il testo “30 giorni di prova, no carta di credito” risulta più efficace di “Inizia il tuo periodo di prova gratuito”. Se il servizio o prodotto che vogliamo promuovere ha caratteristiche che è importante conoscere, cerchiamo di comunicarle fin da subito.

 

3) No scroll needed

La posizione del pulsante CTA è molto importante: il CTA button dovrebbe essere la prima cosa che l’utente vede quando si collega al sito web.

Se la pagina è piuttosto lunga e ricca di contenuti è possibile ripetere più volte il pulsante oppure fare in modo che esso segua lo scroll della pagina stessa, così che possa rimanere sempre visibile. E' importante che questo effetto non crei però nessun fastidio al visitatore perché si rischia di ottenere un risultato opposto a quello cercato. 

 

4) Grande e senza spigoli

Che forma dare al pulsante CTA?

 

Grande quanto basta

Il CTA button dovrebbe essere grande abbastanza da essere visto a distanza, ma non così tanto da distrarre l’attenzione dal contenuto principale della pagina. Presente ma non fastidioso. 

 

Angoli tondeggianti

Dal punto di vista estetico, un pulsante con angoli rotondeggianti risulta più piacevole (e statisticamante più efficace) di uno con angoli squadrati.

rounded corners button

 

5) Less is more

L’utente ha bisogno di essere guidato all’interno del sito web che sta visitando e per questo è bene rimuovere eventuali intoppi che possano farlo allontanare.

Fornire al visitatore la possibilità di scegliere fra varie opzioni attraverso diversi CTA buttons non è una buona idea, perché ciò tende a creare confusione, meglio fornire una sola opzione di scelta in grado di guidarlo lungo un percorso sicuro.

Se è comunque necessario inserire più di un CTA button è di fondamentale importanza che uno predomini sugli altri.

L’esempio offerto dai pulsanti CTA nella homepage di Evernote è illuminante: la scelta da preferire è “Iscriviti gratis”, mentre il pulsante CTA per la comparazione dei piani è chiaramente di secondaria importanza.

 

CTA button Evernote

 

Conclusioni

Per creare un CTA button dal design efficace sono diversi gli elementi da tenere in considerazione. Oltre che alle caratteristiche del pulsante in sé, è necessario tenere conto anche del colore dello sfondo, delle immagini e dei testi circostanti e di molti altri elementi. A seconda dell'ambiente web in cui ci troviamo (sito, e-commerce, app, newsletter) sarà buona pratica testare diverse combinazioni di colori, forme, dimensioni e testi per trovare la ricetta vincente.

Basecamp ha capito l’importanza di tutti questi elementi e ha creato il layout perfetto per la sua landing page.

Basecamp landing page

Source: https://www.webdesignerdepot.com/2017/10/5-design-techniques-for-better-cta-buttons/

 


Se l'articolo ti è sembrato interessante, faccelo sapere!


 Il nostro sito utilizza i cookies per garantirti un'esperienza di navigazione ottimale. Continuando nella navigazione acconsenti al loro utilizzo.