Una call to action (CTA) è il momento in cui la pagina smette di comunicare e inizia a chiedere all'utente di fare qualcosa. È l'ultima frazione di secondo prima di una conversione — iscrizione, acquisto, download, contatto. Tutto quello che viene prima serve a preparare questo momento, e il design della CTA può aumentare o dimezzare il tasso di conversione di una pagina a parità di traffico e contenuto.
Questo articolo è una guida pratica a progettare call to action che funzionano davvero: i principi di design visivo, il copy, il comportamento, gli errori comuni, e come testare se la tua CTA sta facendo il suo lavoro.
Cosa imparerai leggendo:
- Cosa è una CTA e perché è più di un bottone
- I 10 principi di design di una CTA efficace
- Come scrivere il copy di una CTA (UX writing per bottoni)
- Psicologia del colore e posizionamento nella pagina
- 7 esempi reali di CTA ottime (e perché funzionano)
- Come misurare l'efficacia di una CTA
Cosa è una CTA
Una call to action è qualsiasi elemento dell'interfaccia che invita esplicitamente l'utente a compiere un'azione specifica. Nella pratica è quasi sempre un bottone, ma può anche essere un link testuale, una card cliccabile, un'intera sezione.
Il suo valore si misura in tasso di conversione: di 100 persone che la vedono, quante ci cliccano. Quel numero determina la sostenibilità economica di un intero business nel caso dei prodotti digitali che dipendono dalla conversione (e-commerce, SaaS, lead generation, newsletter).
La CTA non è un elemento grafico: è un micro-momento di design, copywriting e comportamento messi insieme.
I 10 principi di una CTA efficace
1. Una CTA primaria per schermata (massimo due)
Il peccato capitale delle landing page: 5 bottoni diversi, ciascuno che chiede qualcosa di diverso. L'utente non sa dove andare, e il risultato è che non va da nessuna parte. Una pagina, una CTA primaria, eventualmente una secondaria con priorità visiva chiaramente minore.
2. Contrasto visivo massimo
La CTA deve essere visivamente dominante. Colore di brand forte (non grigio anonimo), contrasto elevato con lo sfondo, dimensione generosa. La regola pratica: se tolgo tutto dalla pagina e lascio solo la CTA, deve ancora essere subito riconoscibile come "il posto da cliccare".
3. Posizionamento prevedibile
Le CTA primarie su una landing page funzionano bene quando:
- Sopra la piega ("above the fold"), visibili senza scrollare
- A fine sezione dopo una promessa chiara
- In fondo alla pagina per chi è arrivato alla fine
Il grafico dello scroll heatmap di ogni pagina suggerisce dove mettere CTA ulteriori: dove gli utenti si fermano naturalmente, metti un prompt.
4. Copy che descrive il beneficio, non l'azione
"Clicca qui" è la CTA peggiore possibile. "Scarica il PDF" è meglio. "Scarica la guida gratuita per principianti" è anche meglio. Il copy deve dire cosa succede dopo il click, non cosa fa l'utente.
Esempio cattivo: "Invia" Esempio buono: "Inizia gratis" Esempio migliore: "Inizia gratis — nessuna carta richiesta"
5. Rimozione del frictional copy
Le parole che creano ansia nell'utente riducono la conversione: "acquista", "iscriviti", "compra ora" hanno un peso emotivo maggiore di "prova gratis", "scopri", "inizia". Dove il business lo permette, preferisci copy a bassa pressione.
6. Stato hover e feedback del click
Il bottone deve reagire visivamente al passaggio del mouse (hover) e al click (active). Senza feedback visivo, una percentuale di utenti pensa che il sistema non abbia registrato il click e clicca di nuovo.
7. Dimensione touch-friendly
Su mobile, il touch target minimo consigliato è 44×44 pt (linee guida Apple) o 48×48 dp (Material Design). Bottoni più piccoli producono misclick frequenti e frustrazione.
8. Icona complementare, non sostitutiva
Un'icona a fianco del testo accelera il riconoscimento (una freccia → significa "avanza"). Un'icona da sola senza testo è un enigma per l'utente nuovo.
9. Visibilità su tutti i dispositivi e stati
La CTA deve restare visibile e cliccabile in modalità dark, in mobile landscape, con tastiera on-screen aperta, con browser mobile barra URL visibile. Test su queste configurazioni sono spesso saltati.
10. Tempo di caricamento istantaneo della prossima azione
Cliccare una CTA e aspettare 5 secondi prima di vedere una risposta è un moltiplicatore di abbandono. Aggiungi un loading state immediato dopo il click (vedi animazioni UI).
L'UX writing di una CTA
Il testo del bottone è spesso l'elemento con il maggiore ROI di tutto il tuo prodotto. Una singola parola cambiata può muovere la conversione del 5-20%.
I verbi che funzionano
I verbi all'imperativo diretto funzionano meglio di quelli al futuro o condizionale:
- Forti: Scarica, Prova, Inizia, Prenota, Unisciti, Richiedi
- Deboli: Ottieni, Vai, Visita, Esplora, Conosci
La struttura "verbo + beneficio"
Formula classica che performa bene:
[Verbo imperativo] + [beneficio specifico per l'utente]
- "Scarica la guida SEO 2026"
- "Inizia gratis per 14 giorni"
- "Prenota la tua chiamata con un mentor"
Prima persona vs seconda persona
La letteratura è divisa. Alcuni test mostrano che i bottoni in prima persona ("Inizia il mio percorso") convertono meglio di quelli in seconda ("Inizia il tuo percorso") o in imperativo ("Inizia il percorso"). Il risultato è context-dipendente: testa prima di decidere.
Copy con rassicurazione
Aggiungere rassicurazione accanto al bottone abbassa l'ansia:
- "Inizia gratis" + microcopy: "Nessuna carta di credito richiesta"
- "Prenota una demo" + "30 minuti, senza impegno"
Questa microcopy di supporto può aumentare la conversione del 10-30% su CTA ad alta friction.
Psicologia del colore nelle CTA
Il colore di un bottone primario non segue una regola universale ("il rosso converte di più") ma un principio: deve essere in alto contrasto con il resto del design e coerente con la palette di brand.
In generale:
- Colori caldi (rosso, arancione, magenta): catturano attenzione, associati a urgenza e azione
- Colori freddi (blu, verde): comunicano fiducia e calma, associati a professionalitÃ
- Colori neutri o troppo tenui: la CTA si perde, il design appare indeciso
Il punto non è scegliere "il colore magico". È distinguersi dal resto della pagina. Un bottone verde su un sito con palette tutta verde ha meno contrasto di un bottone blu su un sito con palette nera e bianca.
7 esempi reali di CTA efficaci
1. Duolingo — "Inizia a imparare"
Semplice, imperativo, orientato al beneficio. Bottone verde brillante che contrasta con il background bianco e la mascotte illustrata. Non chiede di registrarsi: promette di iniziare a imparare.
2. Stripe — "Avvia ora"
Due parole, colore viola del brand forte, posizionato in alto a destra della navbar (sempre visibile). L'assenza di fricocità copy ("sign up", "register") riflette il target tecnico di Stripe: sviluppatori che vogliono andare dritti al codice.
3. Notion — "Usa Notion gratis"
Copy che cancella immediatamente la barriera ("gratis") e specifica l'azione ("usa"), non "registrati". Il bottone nero scontato è pieno di contrasto sulla home page bianca.
4. Airbnb — "Inizia la ricerca"
Un singolo campo di ricerca grande con bottone circolare evidente. La CTA è parte di un form, non un bottone isolato. L'utente non decide "se" usare il prodotto, decide "cosa" cercare.
5. Spotify — "Ottieni Spotify Free"
Il doppio CTA ("Free" e "Premium") è gestito gerarchizzando visivamente: il "Free" è in un bottone standard, il "Premium" in un bottone primario di brand. L'utente a bassa intenzione ha una via; quello ad alta intenzione ne ha un'altra più valorizzata.
6. Basecamp — "Give Basecamp a try"
Copy lungo, conversazionale, in stile Basecamp. Il bottone comunica un'invito personale, non un imperativo commerciale. Il tono riflette perfettamente il brand.
7. Linear — "Start building"
Due parole. Nessuna promessa di "gratis" o "demo". È una CTA per un target preciso (sviluppatori, team tech) che sa già cosa aspettarsi. Semplicità da manuale.
Errori comuni che uccidono le conversioni
Cinque sbagli che vediamo ripetutamente:
1. CTA "Clicca qui"
L'unico motivo per cui esiste ancora questo copy è l'inerzia. Non spiega cosa fa, non comunica beneficio, contribuisce a zero SEO. Da bandire.
2. Troppe CTA competitive
"Iscriviti / Scopri / Scarica / Contattaci / Acquista" tutto insieme nella stessa vista. L'utente non sa dove andare e non va da nessuna parte.
3. CTA nascosta sotto la piega
Se la tua CTA principale richiede uno scroll per essere vista, stai perdendo il 30-50% dei visitatori che non scrollano mai oltre il primo schermo.
4. Copy generico
"Scopri di più" è generico. "Scopri come ridurre il tuo costo di acquisizione del 40%" è specifico. Il secondo converte significativamente di più.
5. Assenza di test
La CTA è l'elemento con il più alto ROI da testare. Se non fai A/B test sulle tue CTA, stai lasciando conversioni sul tavolo.
Come misurare l'efficacia di una CTA
Tre metriche chiave:
1. Click-through rate (CTR)
La percentuale di utenti che cliccano la CTA rispetto a quelli che la vedono. Dipende da quanto è visibile, dal copy, dal contesto. Un CTR sopra il 3-5% su una landing page B2B è buono; sopra il 10% è eccellente.
2. Conversion rate
La percentuale di chi arriva sulla pagina e completa l'azione finale (acquisto, iscrizione, download). Include l'effetto combinato di CTA + pagina intera.
3. Bounce rate della pagina di atterraggio post-click
Se la CTA porta gli utenti a una pagina che poi viene abbandonata, il problema non è più la CTA ma il gap tra aspettativa e realtà . Misura sempre cosa succede dopo il click.
Domande frequenti
Qual è il colore migliore per una CTA?
Non esiste un colore universale migliore. Conta il contrasto con il resto della pagina e la coerenza con la palette di brand. Un bottone arancione su sito blu funziona. Un bottone blu su sito blu no.
Quante CTA devo avere per pagina?
Una primaria, eventualmente una secondaria chiaramente differenziata. Sopra le 2 CTA contemporanee inizi a vedere un calo del tasso di conversione generale. Le landing page con molte CTA diverse convertono peggio di quelle focalizzate.
È meglio "Acquista ora" o "Prova gratis"?
"Prova gratis" funziona quasi sempre meglio nelle fasi iniziali del funnel, perché ha meno friction. "Acquista ora" ha senso quando l'utente è vicino alla decisione e vuoi creare urgenza. Dipende dal momento del customer journey.
Le CTA devono essere sempre bottoni?
No. Possono essere link testuali per azioni secondarie, card cliccabili, intere sezioni. Il bottone è la forma più esplicita, adatta alle azioni primarie.
Quanto testo dovrebbe avere una CTA?
Da 2 a 5 parole tipicamente. Sotto le 2 il messaggio è troppo generico. Sopra le 5 diventa difficile da leggere rapidamente. Microcopy di supporto sotto il bottone possono estendere il messaggio senza sovraccaricare il bottone stesso.
Prossimi passi
La call to action è uno dei punti più testabili e ad alto impatto di qualsiasi pagina web. Per continuare:
- Approfondisci l'A/B test per misurare l'effetto dei tuoi cambiamenti
- Leggi la guida al UX writing per scrivere copy di bottoni migliori
- Studia i principi di psicologia Gestalt applicabili al design di CTA
Nel Corso di Interaction Design e nel Corso di UX Writing di CorsoUX trovi esercitazioni pratiche per progettare e testare CTA reali, con feedback dei mentor su progetti che sviluppi tu.
