L’icon button è un bottone in cui la label è sostituita da un’icona che rappresenta l’azione. Viene principalmente utilizzato all’interno di toolbar dove è necessario risparmiare spazio per visualizzare un gran numero di funzionalità.
Come aiuta l’utente
Data la loro posizione fissa e sempre visibile, gli icon button risultano elementi facili da ricordare e utilizzare, soprattutto in caso di azioni ovvie.
Una delle maggiori difficoltà nell’uso di questo pattern è la riconoscibilità dell’icona stessa, soprattutto per gli utenti meno esperti che usano applicativi con una sovereign posture. La soluzione che risolve in parte questo problema è l’utilizzo di tooltip che esplicitano l’azione ma, al tempo stesso, rendono meno fluida l’interazione.
Nel caso in cui ci siano tanti icon button, raggrupparli semanticamente aiuta a creare un ordine visivo, aumentare la comprensione e la facilità con cui vengono trovati.
Anatomia
- Icona
- Container
Stati
- Active: L’elemento è attivo e disponibile
- Disabled: L’elemento non è attivo, quindi inutilizzabile
- Hover: Il cursore è sopra l’elemento ma non è stata compiuta nessuna azione
- Pressed: Nel momento in cui l’elemento viene premuto
- Focused: L’elemento è stato selezionato tramite un input come la tastiera o un comando vocale
Accessibilità e usabilità
- Una buona icona riconoscibile eviterà che l’utente richiami spesso il tooltip ma, quando l’azione ha davvero necessità di essere descritta attraverso le parole, meglio utilizzare un altro pattern o icone con il testo.
- Mantenere la resa grafica il più semplice possibile in modo da non creare confusione visiva quando vengono accostati gli uni agli altri.
