Pulsanti

I pulsanti sono l'indicatore visivo principale delle azioni di un utente.

Principi

Orientati all'azione: i pulsanti devono comunicare chiaramente che attivano un'azione.

Feedback chiaro: l'aspetto del pulsante deve cambiare in modo distinto nei diversi stati di interazione (passaggio del mouse, clic, selezione) per fornire un feedback immediato.

Coerenza: tutti i pulsanti devono condividere un linguaggio visivo di base per essere immediatamente riconoscibili.

Flessibilità: il componente pulsante deve adattarsi alle varianti comuni, ad esempio l'inclusione di icone e dimensioni diverse, senza sacrificare la coerenza.

Utilizzo e posizionamento

Un pulsante deve essere posizionato vicino ai contenuti pertinenti. Può essere posizionato da solo o con altri componenti, come schede ed elenchi.

check_circle

Cosa fare

Utilizza la divulgazione progressiva per mostrare le azioni meno pertinenti.

cancel

Cosa non fare

Sovraccaricare la visualizzazione dell'utente con troppi pulsanti. Utilizza invece un gruppo di pulsanti.

check_circle

Cosa fare

Utilizza i pulsanti per richiedere un'azione. In alternativa, utilizza un chip del titolo per un elemento statico.

cancel

Cosa non fare

Utilizzare un pulsante come elemento decorativo statico.

Pulsanti con icone

Sono disponibili pulsanti con icone per ridurre la densità dei contenuti. Utilizza i pulsanti con icone quando l'icona illustra chiaramente un'azione, altrimenti includi un'etichetta del pulsante.

check_circle

Cosa fare

Utilizza un pulsante con icona per le azioni comuni e facilmente riconoscibili.

cancel

Cosa non fare

Utilizza un pulsante con icona per le azioni molto oscure.

Toggable

Per le azioni con stati booleani, come i preferiti, è disponibile una variante di attivazione/disattivazione per ogni tipo di pulsante. Lo scambio di icone tra gli stati di attivazione/disattivazione rende l'interazione rapida e reattiva.

check_circle

Cosa fare

Utilizza un pulsante di attivazione/disattivazione se sono presenti opzioni booleane per un'azione. Come Avvia/Interrompi.

cancel

Cosa non fare

Utilizza un pulsante di attivazione/disattivazione per le azioni non binarie.

Anatomia

I pulsanti sono composti da un'etichetta e da un'icona iniziale o finale facoltativa.

I pulsanti con icone sono composti solo da un'icona riconoscibile.

Entrambi hanno una variante attivabile/disattivabile.

Personalizzazione

I pulsanti contengono uno stile predefinito e uno grande. Le dimensioni grandi possono contribuire a enfatizzare l'importanza.

Le icone possono essere utilizzate per dare maggiore enfasi, chiarezza e riconoscimento al pulsante in una posizione iniziale o finale.