Icone

A cosa servono

Possono rappresentare funzioni, categorie, opzioni e molto altro, migliorando l'interazione in termini di usabilità e accessibilità. Ciò permette agli utenti di navigare e interagire con l'applicazione o il sito web in modo più intuitivo.

Le icone devono essere facilmente riconoscibili e comprensibili, garantendo un design coerente nell'ambito della soluzione digitale. Ricorda che è buona pratica testare con gli utenti l'immediatezza e la riconoscibilità delle icone.

Come usarle

Usa le icone solo quando è strettamente necessario e per i seguenti casi d'uso:

• Rappresentazione di funzioni: puoi usare le icone per simboleggiare funzioni specifiche dell'interazione come "salva", "cancella" o "invia". È importante usarle in modo consistente nelle varie ricorrenze per evitare di confondere gli utenti.
• Navigazione: le icone possono segnalare percorsi di navigazione, come ad esempio l'icona del menu a hamburger. I simboli delle icone devono essere intuitivi per rendere la navigazione più semplice.
• Categorie di contenuto: le icone possono rappresentare categorie di contenuti, come "video", "immagini" o "documenti". I simboli devono essere facilmente riconoscibili e in linea con il contenuto rappresentato.
• Feedback visivo: puoi usare le icone per fornire feedback visivo, come ad esempio un'icona di caricamento o di successo. È fondamentale usarle nel modo corretto per comunicare chiaramente lo stato dell'azione dell'utente.
• Interazioni: le icone possono rappresentare interazioni quali "mi piace", "condividi" o "commenta". In questo caso i simboli devono essere facilmente comprensibili e azionabili per agevolare l'interazione desiderata dall'utente.

Ti consigliamo di abbinare un'icona a un'etichetta di testo che ne chiarisce la funzione.

Puoi usare l'icona da sola se il simbolo è chiaro e non ambiguo. In questo caso, l'etichetta di testo deve comunque essere leggibile da un lettore di schermo (screen reader).

Le icone disponibili

Le icone sono disponibili nella libreria Bootstrap Italia e in UI kit Italia (Figma).

I token per le icone

I design token delle icone appartengono al livello degli "specifici".