Rettangolare, sfumato, tridimensionale, brutto, bello: il bottone è uno degli elementi chiave del nostro sito, l’oggetto attraverso il quale induciamo l’utente a effettuare un’azione precisa.

Colore e contenuto non sempre determinano il successo. La cattiva gestione del flusso di informazioni, una UX frettolosa ed una struttura confusionaria del layout possono comprometterne l’utilizzo.

Ecco 3 semplici suggerimenti per assicurarti che il bottone abbia tutte le caratteristiche giuste.

1. Il colore esprime l’intenzione

Alla base degli obiettivi di una buona UX, c’è il tentativo di far compiere azioni all’utente senza sforzo cognitivo.
Quando progetti un bottone devi ricordare che ognuno di essi ha il proprio scopo e che ogni scopo può essere inscritto in delle macro-categorie:

  1. Azione positiva – cambia, invia o aggiunge informazioni;
  2. Azione neutrale – non comporta cambiamenti oppure riporta l’utente ad una schermata
  3. Azione negativa – cancella o resetta le informazioni

È importante determinare da subito a che categoria appartiene l’azione che il bottone andrà a scatenare.

La buona norma prevede che i bottoni di azione “positiva” abbiano un alto contrasto.
Quelli “negativi”, al contrario, a basso contrasto, soprattutto se affiancati da un bottone positivo.

Bisogna fare molta attenzione al peso e al colore da utilizzare. Colorare di grigio un bottone di conferma rischia di farlo sembrare disabilitato; utilizzare un bottone negativo con un contrasto molto denso potrebbe fuorviare l’utente.

Nel realizzare il bottone tieni conto della palette colori del sito. Se il background è troppo simile al colore del bottone, c’è il rischio che l’utente non clicchi perché l’elemento si mimetizza col resto.

 

2. Trovare la giusta posizione

La posizione è importante quanto colore e testo. L’andamento delle azioni dell’utente determina la posizione ideale del bottone.

Per permettere di rintracciare velocemente il bottone è importante che questo (come tutta la UI) segua l’andamento delle azioni dell’utente e sia una naturale conseguenza del contenuto che lo precede.
Es: dopo la descrizione di un prodotto in vendita l’utente si aspetterà un bottone di acquisto, non un bottone con uno scopo non inerente, come l’iscrizione ad una newsletter.

È fondamentale posizionare il bottone in maniera logica all’interno del layout. Cerca di prevedere dove l’utente andrà a guardare una volta ultimata la lettura del contenuto precedente.

Questo articolo di Oli Gardner parla in maniera molto approfondita dell’argomento

 

3. Rendi il bottone appetibile

Fai in modo che l’utente percepisca il bottone come “cliccabile“.

Usare un colore accattivante e ad alto contrasto, rispetto al resto del sito, ti aiuta a distinguere il bottone dagli altri elementi della pagina.
In aggiunta è fondamentale utilizzare una call to action di forte impatto. Se vogliamo che l’utente acquisti un prodotto è consigliabile utilizzare “Acquista subito” invece di “Clicca qui”.

Inoltre è importante il modo in cui il bottone si relaziona con gli elementi che lo circondano. Sbagliando le proporzioni o non lasciando abbastanza aria, si rischia di non dare all’utente la consapevolezza che ci sia un bottone e farlo passare inosservato.

La grandezza, infine, è una variabile fondamentale. Un bottone troppo piccolo può risultare invisibile o, in caso di dimensioni eccessive, infastidire l’utente.