Come progettare un’efficace Call To Action
UI e UX design dovrebbero mirare a far avere un’esperienza di navigazione facile, veloce ed intuitiva. Con un invito all’azione chiaro e ben identificabile sicuramente è più facile raggiungere questo obiettivo e aumentare i tassi di conversione.
La Call To Action è il metodo più comune per invitare all’azione un utente su una pagina web e, molto spesso, prende la forma di un pulsante.
Ma è così semplice creare una CTA?
Esistono diverse raccomandazioni da seguire per la progettazione di pulsanti identificabili, individuabili e chiari.
Colore
Quando si sceglie il colore di un pulsante, bisogna tenere in considerazione più fattori. In generale i pulsanti (almeno quelli più importanti) dovrebbero riprendere i colori del brand per facilitare la riconoscibilità e avere linearità e coerenza col marchio. Ma non solo, bisogna considerare anche il significato che vogliono veicolare e, soprattutto, devono risaltare rispetto allo sfondo sopra al quale sono posizionati.
Prendiamo ad esempio un nostro lavoro, la piattaforma online che abbiamo sviluppato per Movenzia. Abbiamo scelto di utilizzare il colore giallo perché coerente con la brand identity e a contrasto con il nero del background ne favorisce la leggibilità e la visibilità.
In neuroscienza, il termine “salienza visiva” descrive un oggetto che “spicca” rispetto allo sfondo (come, ad esempio, un oggetto illuminato in una stanza buia). L’attenzione dell’uomo è programmata proprio per visualizzare quegli oggetti che si distinguono rispetto al resto, un po’ come un animale che individua rapidamente una preda o un predatore.
Esistono alcune proprietà, come la tonalità del colore, la luminosità e il contrasto che spingono il nostro cervello a guidare gli occhi in una determinata posizione.
Durante la scelta dei colori, ovviamente bisogna sempre tenere a mente l’accessibilità. Esistono diversi strumenti per vedere se il nostro sito rispetta gli standard ed è accessibile a tutti. Uno di questi è Stark.
Ma il tema colori è davvero vasto e se volete approfondire un altro po’ vi rimandiamo ad un nostro articolo sull’uso dei colori nel web design.
Aspetto
Come vi abbiamo già accennato nei nostri devsign tips, i pulsanti devono essere riconoscibili come tali, in modo che l’utente possa essere in grado di capire quali azioni siano possibili.
Se la CTA viene nascosta in elementi grafici che non sembrano pulsanti o non sembrano comunque cliccabili, il visitatore avrà difficoltà a capire quale sia l’azione che può intraprendere e soprattutto come intraprenderla.
Torniamo sul sito Movenzia, vedrete che i pulsanti…beh, sembrano proprio dei pulsanti!
Dimensione
Secondo la legge di Fitts maggiore è la dimensione e più vicino è il bottone, minore sarà il tempo che l'utente impiegherà a cliccare. Questo non significa certo che bisogna fare pulsanti enormi ma bisogna connotarli all'interno del contesto in maniera che siano ben evidenti.
Particolare attenzione poi, va data agli utenti che navigano da mobile. Secondo la ricerca MIT Touch Lab, svolta all’università di Cambridge, la dimensione media dei polpastrelli delle dita è tra 10-14 mm e la punta delle dita è di 8-10 mm, quindi la dimensione minima per dei pulsanti comoda è 10 mm x 10 mm (circa 40x40 pixel).
Posizione
La posizione è un'altra caratteristica che può sembrare scontata ma non lo è. Bisogna posizionare i pulsanti dove l’utente può facilmente trovarli e dove verosimilmente si aspetta di trovarli. Esistono diversi design pattern che possono aiutarci sul posizionamento delle CTA di cui vi parleremo più avanti, ma se volete approfondire l’argomento vi consigliamo tra le varie risorse un ottimo sito: User Interface Design patterns.
E anche qui serve fare attenzione al mobile. È importante, infatti, posizionare le CTA nelle aree in cui la facilità di raggiungimento e la precisione del tap risultano più semplici rispetto alle altre aree dello schermo.
Comportamento
Il comportamento più semplice ed efficace è trasformare il puntatore in una manina al passaggio del mouse. In Movenzia è presente anche un effetto hover, cioè un’alterazione dell’aspetto di un componente dell’interfaccia grafica una volta posizionato il mouse su di esso, nei riquadri delle offerte. Al passaggio del puntatore il bordo diventa giallo.
Testo
Anche questo può sembrare banale ma è bene tenerlo a mente. Bisogna utilizzare verbi che incoraggiano le azioni e che identificano in maniera il più possibile univoca l’azione che l’utente sta per fare. Non deve infatti, chiedersi “chissà che succede se clicco questo bottone”, deve saperlo già.
Una parola risulta più efficace rispetto ad una frase più lunga anche se più completa ma in alcuni casi, ovviamente, anche due parole sono adatte. Per esempio in “scopri l’offerta” o "richiedi preventivo" una sola parola non avrebbe trasmesso un messaggio del tutto chiaro ed immediato.
Progettare una CTA: sembra facile ma non lo è
Forse progettare un pulsante sembrava più semplice, o, per lo meno, più veloce. Ma, come abbiamo visto, gli elementi di UI da tenere in considerazione sono tanti: colore, posizione, aspetto, testo, dimensione.
Ricordate: Se il Turbo Boost avesse avuto una forma a fiorellino molto probabilmente non avremmo mai visto KITT saltare. 😉
Ti interessano i nostri consigli di design? Ecco cosa ti sei perso nelle puntate precedenti:
Whitespace, fondamentale per un buon layout
Bat Branding - L’arma fondamentale di Batman
Un supereroe fa sempre la scelta giusta...con i font.
Contattaci.
Hai in mente un progetto e vorresti realizzarlo?
Anche se - semplicemente - vuoi prendere un caffè con noi o vedere la nostra collezione di Action Figures scrivici tramite questo form.
