Un’utile “Bibbia del Bottone” scritta da Gabriele Maffoni e Pietro Anastasi con molti riferimenti teorici e pratici.

Dopo i diversi articoli di in cui ci siamo concentrati sugli aspetti cognitivi, oggi ci vogliamo concentrare sull’importanza degli aspetti di interfaccia e in particolare su come costruire una call to action visibile e chiara, capace di dare una direzione precisa alla navigazione dell’utente. 

La call to action (CTA) è il metodo più comune per invitare all’azione un utente su una pagina web e, molto spesso, prende la forma di un pulsante con un copy al suo interno. Nei nostri progetti abbiamo visto che questo elemento è determinante per l’aumento dei tassi di conversione, poiché gli utenti oltre a vedere il vantaggio del prodotto, hanno immediatamente il controllo di quello che succederà successivamente.

Nel mondo fisico, gli utenti interagiscono costantemente con dei pulsanti, come quelli della luce. Nel mondo digitale, l’utente capisce se un elemento è interattivo o meno basandosi sulla sua esperienza passata e sulle proprietà visive del bottone (dimensione, forma, colore, ombra, etc,), che suggeriscono che su quell’area è possibile cliccare o tappare. 
In gergo, il bottone diventa un signifier (un segnale) che rende visibile un’affordance (la relazione funzionale che ha con l’utente).

Il copy contenuto nel bottone sarà utile per invitare all’azione e far capire all’utente il risultato di tale azione.

Per attirare l’attenzione di un utente e spingerlo effettivamente all’azione è, quindi, fondamentale ottimizzare al massimo questi pulsanti. 

In questo articolo vedremo alcune best practice da seguire durante la fase di progettazione e posizionamento delle CTA.

1. Le dimensioni contano, ma non come pensate

Nella maggior parte dei casi la CTA principale è quella con le dimensioni maggiori rispetto a tutte le altre azioni presenti in pagina.

Secondo la legge di Fitts infatti, maggiore è la dimensione e più vicino è il bottone, minore sarà il tempo che l’utente impiegherà a cliccare.

Prendiamo d’esempio una pagina che abbiamo recentemente disegnato per un nostro cliente.


Le due perception map della stessa pagina mostrano come aumentare l’altezza del pulsante abbia cambiato notevolmente cosa vede l’utente nei primi tre secondi. Nella prima opzione, nonostante tutti i vantaggi dell’offerta siano ben visibili, la CTA è difficile da notare. L’opzione vincente mostra come, con l’aggiunta di 20 pixel di altezza, la CTA diventa immediatamente visibile. In questa maniera l’utente vede non soltanto il contenuto dell’offerta, ma anche un invito ad abbonarsi e l’anticipazione di quello che succederà cliccando su tale invito.

Tuttavia, aumentare le dimensioni di un pulsante può non essere sempre così positivo. Capiamo insieme perché guardando un test effettuato da Netflix.
Netflix ha testato sulla propria home page 3 diverse grandezze della CTA di iscrizione.

Come si può vedere, la CTA vincente è più piccola mentre nelle altre due opzioni è più grande. A quanto pare, le performance della prima opzione erano già buone ed è stato notato che, invece, l’aumento delle dimensioni del bottone non ha portato a risultati più significativi.
Possiamo ipotizzare che questo aumento di dimensione del rettangolo non suggeriva più all’utente che fosse un bottone, ma un semplice elemento decorativo. Per questo, per ottimizzare l’efficacia delle CTA, bisogna costantemente lavorare sulle dimensioni.

Tips usabilità
Quando disegni un pulsante, tieni sempre a mente gli utenti che navigano da mobile. Come riportato da Smashing Magazine, uno studio del Mit Touch Lab ha individuato che la larghezza media del pollice umano è tra i 16-20mm (45-57 pixel). Vuol dire che un’area tappabile usabile dovrebbe avere almeno una dimensione minima di 10mm x 10mm (tradotto: 44px x 44px dovrebbero bastare) per essere fat-finger friendly.

2. Fai un uso sapiente del colore

Quando si sceglie il colore di un pulsante, bisogna tenere in considerazione più fattori. Un colore non deve essere scelto solo sulla base del significato che veicola o per rispecchiare le guidelines e il design system del brand. Tra gli obiettivi deve esserci anche quello di farlo risaltare.

In neuroscienza è stato utilizzato il termine “salienza visiva” per descrivere 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 da una determinata scena. Tutto ciò non dipende da un fattore psicologico, culturale o demografico, bensì è il modo con cui il nostro cervello ragiona in natura, come un animale che deve individuare rapidamente una preda o un predatore.

Esistono alcune proprietà, come la tonalità del colore, la luminosità e il contrasto (sia di luminosità che di forma) che, se vengono dosate al punto giusto, consentono al nostro cervello di guidare i nostri occhi in una determinata posizione. La scelta migliore però dipende dal contesto e dal contenuto che circonda il bottone.

Ma vediamo più da vicino di cosa si tratta:

  • Aumenta il contrasto luminoso tra il pulsante e il background di pagina

Di base, usare bottoni neri su fondo bianco e bottoni bianchi su fondo nero funziona sempre.

Quando si utilizza il colore invece, bisogna considerare il contrasto con il background. Nell’immagine si può vedere come l’opzione 1 riesce a staccarsi dallo sfondo molto meglio rispetto all’opzione 2, nonostante le dimensioni siano esattamente le stesse. Come si può notare nell’esempio, lavorando bene sul contrasto tra i colori, è possibile ottenere un risultato migliore.

Anche Skyscanner fa un ottimo uso del colore nelle sue mascherine di ricerca e, nonostante l’uso di un’immagine di background, sono riusciti a concentrare l’attenzione dell’utente su tutti gli elementi fondamentali per la ricerca. L’utilizzo di un fondo blu scuro, infatti, ha permesso di far risaltare benissimo i campi bianchi di input, senza sacrificare la CTA “Cerca voli”. Solitamente, posizionare un elemento sulla destra di una pagina può compromettere la sua visualizzazione (per le regole basate sull’F-Shaped Pattern) ma, dedicando una riga intera al box di ricerca, si riesce a far notare all’utente subito il pulsante verde, oltre a rendere più leggibili i campi.

  • Aumenta il contrasto luminoso tra il testo e il background del pulsante 

Durante la fase di analisi della UI per un nostro cliente, abbiamo notato come la percezione della landing mobile sia cambiata completamente, attraverso il semplice cambio del colore del testo della CTA. 

  • Cambia la tonalità del tuo pulsante rispetto agli altri colori della pagina

Quando ci sono diversi elementi dello stesso colore, diventa sempre più duro per il nostro occhio determinare quali sono le aree più importanti. In alcuni casi, cambiare il colore di un elemento può aiutare ad evidenziarlo rispetto agli altri.

Spesso, su una stessa pagina, possono essere presenti diversi oggetti ad alto contrasto luminoso, come per esempio background bianco e testi neri. In questo caso utilizzare una CTA bianca o nera significa correre il rischio di non metterla in evidenza.

Tips accessibilità
Il rapporto di contrasto è il rapporto tra la luminosità del colore del testo e il colore di sfondo.

Secondo il World Wide Web Consortium (W3C), il rapporto di contrasto suggerito è di almeno 4,5:1, ad eccezione di quanto segue:

  • La dimensione del testo è 18pt, oppure 14pt se è in grassetto. Il rapporto di contrasto è almeno 3:1.
  • Per i pulsanti inattivi, non è richiesto alcun contrasto

3. Tieni sempre in considerazione il contesto visivo

La CTA è l’elemento chiave per la conversione ma, dal momento che non è così facile riuscire ad attirare il click dell’utente, è fondamentale inserirla strategicamente all’interno di una pagina

Vediamo alcuni esempi:

  • Dai aria agli elementi

Insieme all’uso del colore e a tutte le altre proprietà visive, più spazio riuscirai a dare intorno ad un elemento chiave, più quest’ultimo sarà chiaro all’utente. È importante cercare di rimuovere le informazioni meno importanti (o almeno spostarle), in particolare quando si progetta una landing page, dove le informazioni da dare all’utente sono molte e in uno spazio ristretto.

  • Posiziona strategicamente le tue CTA

In generale è buona pratica posizionare i pulsanti dove l’utente si aspetta di trovarli e dove è in grado di raggiungerli facilmente. Considera che l’utente impiegherà meno tempo a cliccare su un pulsante, quanto minore sarà la distanza che dovrà percorrere per raggiungerlo (in base al principio della legge di Fitts).

Nell’esempio qui sotto (preso tra i primi design di progetto) si può vedere come la CTA, che inizialmente avevamo posizionato in basso a destra, venisse completamente ignorata.

Siccome siamo abituati a leggere un sito esattamente come leggiamo un libro, cioè partendo dall’angolo in alto a sinistra, l’attenzione dell’utente è molto presente nell’angolo in alto a sinistra della pagina ma tenderà a fermarsi da qualche parte nel centro-destra della schermata (effetto noto come Z-Pattern).

Tips accessibilità
Quando stai posizionando un pulsante tieni in considerazione che su mobile ci sono aree più facili da tappare (es: nell’area bassa dell’interfaccia), perché sono più facili da raggiungere dal pollice degli utenti.

4. Tieni sempre in considerazione il contesto visivo

Ogni pulsante deve avere sempre lo stesso aspetto in base alla funzione che ricopre. È fondamentale differenziare le azioni principali da quelle secondarie.

Gli stili dei pulsanti possono essere utilizzati anche per confondere gli utenti. Nel caso qui sotto, Audible non vuole che i propri utenti disattivino la loro membership. Per fare ciò non hanno dato priorità ai pulsanti. Usando solo CTA di primo livello, l’utente è costretto a “studiarsi” tutte le sezioni e a leggersi tutti i pulsanti per essere consapevole di quello che sta per fare.

Per  concludere

Come abbiamo dimostrato, le persone impiegano pochi secondi a crearsi un’opinione di un prodotto e a decidere se sia in grado di risolvere i loro problemi. Sfruttare questo poco tempo a disposizione è di vitale importanza per aumentare le conversioni e spesso è questione di piccoli dettagli.

Ecco perché in GreatPixel consigliamo sempre di misurare l’efficacia di tutti gli elementi facendo dei test (A/B test) e delle analisi di eyetracking per ottimizzare gli elementi che funzionano meno.