Skip to main content
Tips & tricks

Call to action: l’anatomia perfetta

By 3 Novembre 2020Dicembre 24th, 2020No Comments

La Call to action (CTA), nota meno figamente anche come “pulsante”, è uno tra gli elementi interattivi più potenti che potete (dovete!) utilizzare nella vostra interfaccia.
Una CTA ben fatta ha il fondamenta compito di spingere l’utente, come dice appunto il suo nome, a compiere una determinata azione volta a convertire.
Non cercate di reinventare la ruota, “adattarsi” alle convenzioni nel nostro ambiente è molto importante!
Esagerando con fantasia e customizzazioni rischiereste solo di depistare il vostro utente, ottenendo il risultato opposto a quello sperato.
Facendo attenzione ad alcune piccole regole, sarete in grado di creare delle Call to action a prova di bomba.

Anatomia generale
Le Call to action sono composte da diversi elementi:

  • label: il “nome” del pulsante, ciò che indica l’azione che si compie cliccando
  • icona: accompagna la label in maniera opzionale e ne sottolinea il significato
  • padding: gli spazi attorno alla label. Come i famosi spazi bianchi, sono molto importanti
  • background: lo sfondo, il colore del pulsante
  • border radius: il raggio degli angoli, per un aspetto più “friendly” e riconoscibile
  • ombra: anche questa opzionale, prende più esplicita l’interattività dell’elemento

Forma
Lasciate che una CTA ricordi una CTA. Come ho detto prima, non cercate di reinventare la ruota.
Va bene la creatività, ma se vi scappa la mano, un pulsante può arrivare a non sembrarlo più.
Il rettangolo è la forma che generalmente viene utilizzata per le CTA (o anche la sua versione arrotondata), facile da distinguere e pratica da cliccare (il cerchio per i Floating button, ma quello è un altro discorso).

Labeling
Attenzione sempre a creare label che siano chiare e concise (es. “Clicca per creare il tuo nuovo account” diventa “Crea account”).
La scelta delle parole è molto importante per far comprendere semplicemente all’utente la strada da prendere.
Fate in modo che la label scelta non dia spazio a dubbi e perplessità, piuttosto “imboccate” chi naviga la vostra interfaccia.

Prediligete parole che vadano a rafforzare l’azione: per una richiesta come “Vuoi continuare?”, piuttosto che proporre label come “No” e “”, ad esempio, potreste optare per “No” e “Continua”.
Attenzione anche al come scrivete. Basta davvero poco per creare un senso di urgenza volto a spingere l’utente a cliccare. Un “Compra ora” ha una forza differente rispetto al più blando “Compra”, così come “Promozione” attirerà di meno rispetto a “Promozione speciale”.

Dimensioni
Le dimensioni contano. Fatevene una ragione.
Non troppo grosso, non troppo piccolo. Un perfetto pulsante di Call to action deve essere “il giusto”.
Ci sono alcune convenzioni utili per creare la proporzione perfetta, sono poche, ma decisamente funzionali.
In generale, un pulsante dovrebbe essere pensato in modo da dare al nostro dito lo spazio sufficiente per cliccare in libertà. La dimensione consigliata, di solito, è di 45px di altezza totale.

(Le dimensioni consigliate qui sotto sono esemplificative per un pulsante “standard”. Ovviamente, in base alle esigenze della vostra interfaccia, possono variare.)

Evitate pulsanti senza respiro o eccessivamente larghi: 32px di padding ai lati rappresentano una misura ottimale (in caso di mobile, invece, potete decidere di estendere a larghezza a tutto schermo).
Stesso discorso per l’altezza, non esagerate! 18px circa, sopra e sotto la label, sono più che sufficienti.
Idem come sopra anche per la dimensione del testo, non meno di 16px per garantire leggibilità.

Considerate sempre che, per una CTA sensata ed armoniosa, il padding laterale dovrebbe essere maggiore di quello verticale che, a sua volta, dovrebbe essere maggiore del font-size.

Gerarchia
Più Call to action possono avere rilevanza differente all’interno di una stessa interfaccia, soprattutto in base a quale vogliamo che sia l’azione principale da far svolgere all’utente.
Come per gli stati, è importante sottolineare le varie differenze.
Le CTA possono essere, ad esempio, primarie (pulsante pieno), secondarie (colore meno impattante / outline), terziarie (outline / solo testo).
Mi raccomando, giocate con colori e bordi! Il vostro pulsante deve attirare l’attenzione e spiccare all’interno della pagina.
Dopotutto, è lì che volete che finisca l’utente (pulsanti smorti su fondi altrettanto smorti non verranno mai calcolati nemmeno per errore).

Posizione
Un occhio di riguardo, in particolare, va dato al posizionamento di un pulsante.
Un utente è più probabile che clicchi una CTA dopo avere letto tutte le informazioni necessarie. La posizione più “logica”, di conseguenza, sarà alla fine della sezione informativa di cui fa parte il pulsante.
Posizionare come ultima la CTA più primaria, dà la possibilità all’utente di scegliere in maniera razionale dopo avere vagliato tutte le opzioni proposte, seguendo la logica classica di lettura.
Attenzione anche all’allineamento del pulsante. Convenzionalmente è quasi sempre a sinistra, in modo da seguire l’allineamento a bandiera del testo.

Stati
Ultimi, ma non meno importanti, gli stati.
Un pulsante può presentare differenti stati: prima, durante o dopo l’interazione.
Nella creazione di un design system, in particolare se dovrete poi passarlo ad uno sviluppatore, è importante esplicitarli sempre.
Tra questi: focus, hover, attivo, loading, disabilitato.