Linee guida sui pulsanti Call to Action, best practice ed esempi

I pulsanti di chiamata ai pulsanti di azione sui siti Web vengono spesso trascurati. I progettisti a volte non capiscono esattamente ciò che rende un buon pulsante di chiamata all'azione oltre ad essere attraente e adatto al design generale. Ma i pulsanti di call to action sono troppo importanti per essere progettati senza una sorta di comprensione di ciò che li rende efficaci. Dopotutto, il punto principale di un pulsante di invito all'azione è quello di attirare visitatori fare qualcosa.

È importante acquisire almeno una conoscenza di base su come il colore, la scala, la lingua e altri fattori influenzano il tasso di conversione di un pulsante di chiamata all'azione. I concetti qui non sono complicati, ma prendono un po 'di accortezza e progettano di creare i pulsanti di call to action più efficaci possibili all'interno di un determinato progetto. Continua a leggere per ulteriori informazioni su ciascuno di questi punti e altro ancora.

Lo scopo dei pulsanti "Call to Action"

I pulsanti di invito all'azione possono servire a una varietà di funzioni. Dopotutto, “chiamare all'azione” è davvero un po 'vago. Tutto ciò significa che il suo scopo principale è quello di far visitare un visitatore al tuo sito fare qualcosa. Che qualcosa potrebbe aggiungere un prodotto al loro carrello, scaricare qualcosa, richiedere informazioni o qualsiasi altra cosa.

Poiché i pulsanti di invito all'azione hanno scopi così diversi, occorre prestare molta attenzione a ciò che il pulsante mira a raggiungere. Il tipo di sito, il mercato di destinazione e l'azione desiderata possono tutti svolgere un ruolo nel modo migliore per progettare un pulsante di invito all'azione.

Tipi di pulsanti "Call to Action"

Esistono alcuni tipi diversi di pulsanti di invito all'azione. Mentre ogni tipo mira a indurre i visitatori a compiere una certa azione, quell'azione può variare considerevolmente. Di seguito sono riportati i tipi più comuni di pulsanti di invito all'azione, in base all'azione che desiderano intraprendere.

1. Pulsanti Aggiungi al carrello

I siti di e-commerce generalmente utilizzano un certo numero di pulsanti di invito all'azione, ma quello più utilizzato è il “Aggiungi al carrello” pulsante. Questi pulsanti vengono generalmente visualizzati sulle singole pagine dei prodotti. Il loro scopo è quello di invogliare i clienti ad acquistare un oggetto. Elementi di design comuni nei pulsanti aggiungi al carrello includono una semplice formulazione (come ad esempio “Aggiungi al carrello” o “Aggiungi al carrello” o “Acquista ora“) e l'uso di icone (di solito una borsa o un carrello).

2. Pulsanti di download

I pulsanti di download sono simili ai pulsanti Aggiungi al carrello in cui cercano di invogliare un visitatore a impossessarsi di un oggetto. Nel caso di pulsanti di download, molti designer scelgono di includere più informazioni rispetto ad altri tipi di pulsanti (come informazioni sulla versione o dimensioni del download).

3. Pulsanti di prova

Alcuni siti cercano di invogliare i loro visitatori a provare le loro offerte, generalmente sotto forma di una prova gratuita. Questo potrebbe essere un download gratuito o un account gratuito, a seconda del sito particolare. Alcuni siti usano il “meno è meglio” filosofia e mantenere la lingua sui loro pulsanti al minimo, mentre altri vogliono offrire maggiori informazioni su ciò che contiene la prova.

4. Ulteriori pulsanti

Ulteriori informazioni vengono generalmente utilizzati alla fine di un blocco di informazioni sul teaser (spesso nella home page). Questi pulsanti sono solitamente semplici, ma sovradimensionati per attirare l'attenzione dei visitatori.

5. Pulsanti di registrazione

I pulsanti di registrazione appaiono più comunemente in due versioni diverse. Il primo tipo di solito è direttamente associato a un modulo di iscrizione. Il secondo tipo di solito è usato in modo simile a “Aggiungi al carrello” pulsanti, come modo per gli utenti di acquistare o registrarsi per un servizio o un account, prima che raggiungano effettivamente un modulo di registrazione.

Esistono altri tipi di pulsanti di invito all'azione, ma questi sono i più comuni. Le linee guida che si applicano a quelle sopra probabilmente si applicano anche a qualsiasi altro tipo di pulsante di invito all'azione che potresti progettare.

Utilizzo efficace dello spazio negativo

Desiderate che la vostra chiamata ai pulsanti di azione si distingua dal contenuto circostante e attiri davvero l'attenzione dei visitatori del sito. A tal fine, è necessario utilizzare lo spazio negativo attorno a quei pulsanti. Incorporare uno spazio vuoto tra il contenuto e il pulsante di chiamata al pulsante di azione. Mentre questo è meno importante (e meno comune) su alcuni pulsanti, come i pulsanti aggiungi al carrello, con altri, come quelli per saperne di più, funziona meglio con più spazio.

È importante bilanciare la quantità di spazio negativo che si ha intorno ai pulsanti con le dimensioni dei pulsanti stessi. È una questione di proporzione. Vuoi che il tuo pulsante, lo spazio intorno ad esso e il contenuto circostante sembrino tutti insieme, anche con disparità di dimensioni. Potrebbe essere necessario giocherellare un po 'con le cose per farle sembrare giuste.

Alcune linee guida:

Assicurati che ci sia abbastanza spazio intorno al tuo pulsante in modo che non si senta ingombra
Prendi in considerazione principi come la regola dei terzi o la sezione aurea quando determini quanto spazio includere
Lo spazio negativo assegna la chiamata alla stanza dei pulsanti di azione per distinguersi dagli altri contenuti e distinguerli

Dimensioni e colori

Quanto è grande la tua chiamata ai pulsanti di azione è molto importante. Un pulsante troppo grande può sopraffare tutto ciò che lo circonda. Un pulsante troppo piccolo si perde nella mescolanza di tutti gli altri contenuti di una pagina. Vuoi che il tuo pulsante sia abbastanza grande da risaltare senza travolgere il design.

Il colore può essere utilizzato con grande efficacia per aiutare a bilanciare le dimensioni dei pulsanti. Per i pulsanti più grandi, scegli un colore che è meno prominente nel tuo disegno (ma che spicca ancora sullo sfondo). Per un pulsante più piccolo, potresti voler scegliere un colore più luminoso e contrastante per fare in modo che il pulsante si apra. In entrambi i casi, assicurati che il colore che utilizzi imposta il pulsante separatamente senza interferire con il design generale del sito.

Alcune linee guida:

I pulsanti di chiamata ai pulsanti di azione dovrebbero idealmente essere i pulsanti più grandi su una determinata pagina
Usa colori contrastanti per far risaltare di più i pulsanti più piccoli
Usa colori meno nitidi per rendere i pulsanti più grandi più adatti
I pulsanti call to action richiedono di attirare l'attenzione senza sovraccaricare il design

linguaggio

Il testo esatto che scegli di utilizzare sui pulsanti di chiamata ai pulsanti di azione può avere un enorme effetto sulla conversione. Confrontare “Acquista ora” con “Aggiungi al carrello“. Uno è molto più urgente dell'altro. O che dire “Provalo gratuitamente” con “Prova gratuita“? Uno è molto più forte dell'altro e si distingue maggiormente.

La lingua che usi per i pulsanti di chiamata ai pulsanti di azione dovrebbe essere la più semplice e semplice possibile. Vuoi che i visitatori sappiano con un colpo d'occhio esattamente quello che otterranno quando clicchi su un pulsante. Se la mettono in dubbio, significa che si sono fermati, il che può portare a tassi di conversione più bassi.

Non dimenticare anche le dimensioni del tuo carattere. Il testo del pulsante di chiamata al pulsante di azione deve essere ampio e in grassetto, adatto alle dimensioni e al colore del pulsante stesso. Assicurati che ci sia contrasto sufficiente e che il testo sia facile da leggere.

Alcune linee guida:

Usa un linguaggio semplice e diretto
Utilizzare un carattere grande e grassetto sul pulsante per il testo principale
Assicurati che la lingua richieda chiaramente un'azione specifica

Crea Urgenza

Vuoi che i visitatori del tuo sito eseguano le azioni desiderate con il minimo pensiero possibile. Mentre non vuoi ingannare i tuoi visitatori, più opportunità dai loro di fermarsi e prendere in considerazione ciò che stanno facendo, più opportunità tu dai loro di dire “no”.

Vuoi che i tuoi pulsanti diano loro l'impressione di dover agire immediatamente. Vuoi incoraggiarli a prendere la loro decisione immediatamente, sul momento. Anche se questo non funzionerà per ogni pulsante di chiamata al pulsante di azione (in particolare quelli per l'acquisto di articoli di alta qualità), per azioni a basso costo o gratuite, è preferibile fare clic con poca attenzione ai visitatori.

Alcune linee guida:

Incoraggia i tuoi visitatori ad agire immediatamente
Non dare ai tuoi visitatori alcun motivo per mettere in pausa
Mentre l'urgenza è importante, non fuorviare i visitatori in alcun modo

Fornisci informazioni extra

Se necessario, utilizza i pulsanti call to action per dare ai visitatori informazioni aggiuntive su ciò che otterranno se fanno clic sul pulsante. Questo è più comunemente visto con pulsanti di prova o pulsanti di download. Esempi comuni di informazioni extra includono la durata del periodo di prova gratuito o la dimensione del download di un file. Le informazioni sulla versione sono anche comunemente viste.

Quando includi informazioni extra, ricorda che è necessario mantenere l'attenzione sull'attuale call to action. Assicurati che il testo della lingua che attira i visitatori ad agire sia il più importante, con altre informazioni molto meno visibili.

Alcune linee guida:

Includere solo informazioni extra quando si aggiunge all'esperienza dell'utente
Ulteriori informazioni sono appropriate solo su alcuni tipi di pulsanti di invito all'azione, in particolare i pulsanti di download o di prova
Assicurati che l'invito principale all'azione sia ancora il testo più importante sul tuo pulsante

Dare priorità

È importante assegnare la priorità ai pulsanti di invito all'azione sulla pagina, se ce ne sono più di uno. Questo può essere fatto in diversi modi, ma i più comuni sono attraverso l'uso del colore e delle dimensioni.

Usa il colore per evidenziare il pulsante più importante in una pagina o per rendere meno importanti i meno importanti. Oppure usa le dimensioni per far risaltare il pulsante più importante (ingrandendolo) e de-enfatizzando quelli meno importanti.

Icone e immagini

Anche l'inserimento di segnali visivi nei pulsanti di chiamata ai pulsanti di azione può contribuire ad aumentare i tassi di conversione. Un'icona di un carrello della spesa su un “Aggiungi al carrello” pulsante, ad esempio, o una freccia su un pulsante di download sono entrambi buoni esempi. Pensa a icone uniche da usare, ma assicurati che l'icona aggiunga all'esperienza utente chiarendo a cosa serve il pulsante e non aggiunga confusione.

Alcune linee guida:

Assicurati che le icone che usi aiutano a chiarire il significato del tuo pulsante, piuttosto che confonderlo
Le icone facilmente riconoscibili possono immediatamente indicare il significato per i tuoi visitatori
Non aver paura di usare icone meno comuni, purché il loro significato sia ancora chiaro

Esempi

Eccone alcuni esempi di fantastici pulsanti di invito all'azione. Anche se non sono tutti perfettamente conformi alle linee guida sopra, soddisfano abbastanza criteri per essere considerati grandi.

Trasmissione in diretta - Differenziare le opzioni "acquista ora" (per le opzioni a pagamento) e "iscriviti" (per le opzioni gratuite) è una buona strategia.

Windows 7 - Il grande pulsante verde "Scarica Windows7" è facile da individuare per i visitatori.

HQ di condivisione di file - Il pulsante verde brillante qui spicca davvero sullo sfondo bianco.

Diario di bordo - L'utilizzo di colori diversi per i pulsanti "Download" e "Acquista" li distingue e dà la priorità al pulsante "Acquista".

TasteBook - Questo pulsante fa grande uso di un'icona e utilizza un testo più grande e in grassetto per distinguersi.

GoodBarry - Un altro pulsante verde di chiamata all'azione.

Lifetree Creative - Continuare lo stesso tipo di carattere dalla copia del corpo al pulsante di chiamata all'azione crea un senso di coesione.

Il Resumator - Un pulsante rosso di chiamata all'azione con il grassetto spicca sullo sfondo blu.

Notepod - Un buon esempio di includere informazioni aggiuntive in un pulsante di chiamata all'azione.

Inkd - Un grande esempio di prioritizzazione dei pulsanti con le dimensioni.

Temi eleganti - Un altro eccellente esempio di utilizzo del colore per distinguersi senza scontrarsi con gli elementi di design circostanti.

Zendesk - Un altro grande esempio di come un pulsante si stia usando il colore.

Storenvy - Un pulsante rotondo è inaspettato e si distingue, specialmente quando è circondato da un bordo bianco.

Bara'Mail - A volte un pulsante che si integra funziona meglio nella progettazione generale del sito, specialmente quando l'azione è meno urgente.

Altre risorse

Pulsanti Call to Action: esempi e best practice: da Smashing Magazine
Buoni pulsanti di invito all'azione - Da UX Booth
Pulsanti Call to Action: la dimensione è importante? - Da Get Elastic
10 tecniche per un efficace “Chiamare all'azione” - Da Boagworld
5 suggerimenti per la creazione di un pulsante di invito all'azione efficace: da SitePoint