Questo pattern è una variante degli icon button e hanno un comportamento mutuamente esclusivo in cui le opzioni disponibili vengono inserite all’interno di una lista dropdown.
La sua struttura prevede due icon button: il primo composto dall’icona che indica e attiva l’azione e il secondo, generalmente una freccia, che dà la possibilità di aprire un dropdown menù con le opzioni disponibili visualizzate come icone o icone e testo.
Ci sono casi in cui l’icona della voce selezionata va a sostituire quella precedente e, cliccandola, abilita il comando indicato, altri in cui viene direttamente applicata l’azione scelta dalla lista e l’icona rimane invariata.
Come aiuta l’utente
La struttura compatta dei combo icon button permette di inserire tante informazioni in pochissimo spazio, rendendolo un pattern indispensabile soprattutto in applicazioni che prevedono una sovereign-posture, con utenti esperti che ne fanno un uso frequente, principalmente con il mouse.
È un pattern molto versatile e non esiste un modo univoco per utilizzarlo: le opzioni disponibili potrebbero essere delle azioni o delle configurazioni dell’interfaccia, per esempio.
Anatomia
- Icon button per applicare il comando
- icon button per selezionare il comando
Stati
Ognuno dei due icon button presenta questi possibili stati in modo indipendente uno dall’altro.
- 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.
Affordance e usabilità
- Come per tutti i casi in cui sono presenti icone, è bene fare attenzione alla loro chiarezza e accompagnarle, eventualmente, da una label breve ma esplicativa
