Orientarsi in un mondo di bottoni
Come fare felice l’utente scegliendo i pulsanti giusti per le azioni giuste
La cosa che dobbiamo sempre tenere a mente quando disegniamo una pagina web o un app (e quando dico sempre intendo come un mantra che dovete ripetervi quasi ossessivamente) è l’obiettivo che l’utente vuole raggiungere interagendo con il vostro prodotto perché successivamente dovete declinare il suo obiettivo in azioni da fargli fare e che, a loro volta, dovete tradurre in bottoni.
Giusto per parlare la stessa lingua, per bottone (o pulsante) intendiamo un elemento dell’interfaccia che richiama una specifica azione dell’utente.
Nel tradurre azioni in bottoni è importante tenere a mente i seguenti aspetti principali:
- Priorità
- Dimensione
- Aspetto e Colore
- Posizione
- Comportamento
- Testo della Call To Action (CTA)
- Tipologia
1. PRIORITÀ
Un buon punto di partenza consiste nell’elencare gli obiettivi e le azioni dando loro un ordine di priorità, perché più un’azione è prioritaria, maggiore deve essere la rilevanza del relativo bottone all’interno del vostro prodotto.
Questo esercizio andrebbe poi ripetuto per tutte le schermate, momenti di interazione, step… insomma ogni qualvolta è necessario che l’utente effettui un’azione persino, ad esempio, per un troppo spesso sottovalutato popup (o finestra modale) di conferma.
Dare maggiore rilevanza ad un bottone rispetto ad un altro non è una scienza esatta e dipende molto da come è realizzato il vostro prodotto, ma nei paragrafi seguenti vi aiuterò a identificare gli aspetti di dimensione, colore e posizione sui quali possiamo lavorare per dare la corretta priorità a tutte le azioni da presentare al vostro utente.
In generale parlando di priorità possiamo identificare 3 macro categorie:
- azione principale dell’utente nella schermata -> bottone primario
- azione importante, ma con priorità 2 rispetto a quella principale -> bottone secondario
- azione contraria a quella principale -> bottone complementare
2. DIMENSIONE
La dimensione del bottone è un elemento molto importante soprattutto se rapportata agli altri elementi di pagina. Non si tratta di fare un bottone grande abbastanza da renderlo evidente, ma di connotarlo all’interno del contesto d’uso soprattutto in relazione alla tipologia di device che il vostro utente sta usando e se utilizza uno schermo touch o meno. Ad esempio secondo il MIT Touch Lab la dimensione minima di un elemento tappabile con un dito è 10x10 mm (38x38 pixel).
Il bottone primario deve essere ben connotato e verosimilmente è quello caratterizzato dalla dimensione maggiore rispetto agli altri bottoni. Inoltre seguendo la Legge di Fitts il tempo che il vostro utente impiega a cliccare un bottone è inversamente proporzionale alla sua dimensione (impiega cioè meno tempo, maggiore è la dimensione del bottone).
3. ASPETTO E COLORE
Un bottone deve apparire come un… (rullo di tamburi…) bottone. Sì, avete letto bene. Troppo spesso troviamo ancora esempi di azioni nascoste dietro ad elementi grafici che non sembrano bottoni ed in generale che non sembrano cliccabili/tappabili.
Provate a trovare il modo di accedere al sito del Comune di Roma… ve do na settimana!
Inoltre è importante che l’aspetto di un bottone sia sempre lo stesso per le medesime funzionalità e che ogni funzionalità abbia un aspetto differente (es. utilizzate sempre la stessa “i” informativa per consentire all’utente di vedere maggiori informazioni).
Definite in maniera univoca un colore diverso per ciascuna tipologia di bottone (primario, secondario, complementare).
Per la scelta del colore di un bottone dovete considerare i diversi principi della psicologia del colore (online potete trovare ogni tipologia di contenuto sull’argomento, un esempio per capirci: usate il rosso per le azioni di eliminazione o negative in generale — a meno che non stiate lavorando ad una landing page per San Valentino in cui il rosso diventerebbe con molta probabilità il colore del bottone principale… — ). In generale questo vale per tutto il vostro prodotto ed è molto utile che i bottoni riprendano i colori del brand per facilitare la riconoscibilità delle diverse azioni fornite all’utente. Con molta probabilità il colore del bottone primario sarà quello predominante del vostro brand.
Infine dovete fare in modo che il colore dei bottoni, in particolare quelli primari, risalti molto rispetto allo sfondo sopra al quale sono posizionati.
4. POSIZIONE
Posizionate i bottoni dove l’utente può facilmente trovarli e dove verosimilmente si aspetta di trovarli. Anche in questo caso ci viene incontro la Legge di Fitts secondo la quale il tempo che il vostro utente impiega a cliccare un bottone è direttamente proporzionale alla distanza che deve “percorrere” (impiega cioè più tempo, maggiore è la distanza del bottone).
Anche in questo caso dovete essere il più possibile coerenti nel posizionare gli stessi bottoni nelle stesse posizioni.
Particolare attenzione va applicata al mobile in cui sono presenti aree facilmente tappabili dall’utente ed altre meno all’interno delle quali possiamo inoltre identificare un differente livello di precisione del tap.
È importante posizionare i bottoni nelle aree in cui la facilità di raggiungimento e la precisione del tap risultano più semplici rispetto alle altre aree dello schermo dove devono invece essere concentrati i contenuti da leggere.
All’interno di un contesto in cui è presente una doppia scelta per l’utente tra primaria e secondaria (come ad esempio INDIETRO-AVANTI o ANNULLA-CONFERMA), è importante posizionare l’azione primaria sulla destra e quella complementare sulla sinistra (come nella schermata seguente, anche se introduce un po’ di confusione per come gestisce la tripla scelta «annulla-indietro-fine»).
Ragionamento simile si può applicare in caso di doppia scelta per il vostro utente che comprenda un’azione primaria ed una secondaria all’interno del quale l’azione primaria va posizionata sopra a quella secondaria.
5. COMPORTAMENTO
Applicare un comportamento ad un bottone facilita l’interazione tra il vostro utente ed il bottone stesso restituendo un feedback che consente all’utente una maggiore comprensione dell’efficacia della sua azione.
È importante quindi prevedere, rispetto al normale aspetto del bottone, un effetto differente al mouse over e al click o tap.
Successivamente al click possiamo inoltre mostrare al posto del testo all’interno del bottone o al posto del bottone stesso un “loading” (in quel momento il bottone quindi non è più cliccabile) dando all’utente la percezione di caricamento dell’esito dell’azione richiesta.
Infine oltre alla variazione dell’aspetto di un bottone al click possiamo prevedere anche un feedback uditivo attraverso l’emissione di un suono che conferisce maggiore risalto all’azione dell’utente.
6. TESTO DELLA CALL TO ACTION (CTA)
Pronti ad un altra banalità? Utilizzate il verbo che identifica in maniera il più possibile univoca l’azione che il vostro utente sta per fare cliccando su quel bottone. È importante che l’utente non si chieda mai “Cosa succede se spingo questo bottone?”. Fate attenzione in particolare modo ad essere coerenti con eventuali frasi che introducono una scelta tra diverse azioni.
All’interno di un bottone pochissime parole risultano sicuramente più efficaci rispetto ad una frase più lunga anche se completa. Particolarmente importante quindi è ridurre al minimo il numero di parole (una massimo due). In rari casi possiamo fare qualche eccezione se il concetto risulta complessivamente più chiaro come nell’esempio dell’Home Page di eDreams.
7. TIPOLOGIA
Di seguito potete trovare le principali tipologie di bottoni e le relative buone pratiche sul loro utilizzo e comportamento.
Bottoni in rilievo
- Aspetto: riempiti di colore e caratterizzati da un ombreggiatura che rende evidente la possibilità di cliccare
- Forma: rettangolari o con angoli arrotondati
- Priorità: alta, da utilizzare per azioni primarie
- Utilizzo: per lo più in linea con altri contenuti in contesti in cui sono presenti molti contenuti, a volte li possiamo trovare anche “fluttuanti” al di sopra di altri contenuti di pagina
- Comportamento: prevedono un effetto differente al mouse over, al click e quando non sono abilitati. Successivamente al click possiamo mostrare un’icona di “loading”.
Bottoni fantasmi (ghost button)
- Aspetto: bianchi o trasparenti con bordo bianco o colorato
- Forma: rettangolari o con angoli arrotondati
- Priorità: media, da utilizzare per azioni secondarie o complementari
- Utilizzo: in linea con altri contenuti o vicini ai bottoni primari
- Comportamento: prevedono un effetto differente al mouse over, al click e quando non sono abilitati. Successivamente al click possiamo mostrare un’icona di “loading”.
Bottoni testuali
- Aspetto: caratterizzati dalla sola componente testuale, in questi casi più che in altre tipologie di bottoni il testo deve essere di 1 sola parola, massimo 2
- Forma: la stessa del testo che deve essere tutto in maiuscolo
- Priorità: bassa, da utilizzare per azioni secondarie
- Utilizzo: minimizzano la distrazione rispetto al contenuto che resta l’elemento centrale, si possono utilizzare anche vicini ai bottoni primari come bottoni complementari
- Comportamento: prevedono un effetto differente al mouse over, al click e quando non sono abilitati. Successivamente al click possiamo mostrare un’icona di “loading”.
Interruttori
- Aspetto: li possiamo trovare sotto forma di icone o come veri e propri interruttori
- Forma: la stessa delle icone, all’interno di una barra che aggrega più icone alla volta (con un minimo di 3) o come interruttori per lo più rappresentati da una pallina che si muove su una direttrice orizzontale
- Priorità: da utilizzare per azioni accessorie
- Utilizzo: quando è necessario impostare un opzione tra 2 stati diversi (es. ON/OFF)
- Comportamento: i 2 stati devono essere caratterizzati in maniera evidente sfruttando principalmente la componente di colore per lo stato “attivo” e quella in bianco e nero per lo stato “disattivo”
Se siete arrivati fin quaggiù vuol dire che per voi i dettagli fanno la differenza e che è importante offrire ai vostri utenti un’esperienza fluida, semplice e comprensibile. Per fare ciò non dovete mai perdere di vista l’obiettivo finale, quello intermedio, quello di ogni singolo step… un bottone alla volta.
Sharing is caring:
L’articolo era interessante? Lasciaci qualche applauso 👏👏👏👏 e condividilo con qualcuno!
UX Tales è una pubblicazione aperta: ✍️ proponi qui il tuo articolo, oppure scrivici su Twitter o su Facebook
