Avatar
Rappresentazione grafica di un utente per identificare visivamente la persona online
ComponentiMetadati e link per approfondire
Quando usarlo
Il componente Avatar permette di rappresentare una persona, il suo stato e le sue azioni in contesti di interazione. Può essere utile ad esempio per indicare l'autore di un testo, il proprio profilo in un'area riservata, le persone che hanno interagito con un contenuto.
Come usarlo
- Per rappresentare una persona durante l'esperienza.
- Per rappresentare lo stato e le azioni disponibili per l'utente nelle aree riservate.
- Nella variante lista (gruppi), per rappresentare chi ha interagito con il contenuto mostrato nel contesto.
Attenzione a
- Indicare una sola persona con ogni avatar.
- Valutare di usare solo icone per indicare gruppi o "oggetti".
- Prevedere sempre un modo di indicare il nome della persona. Se scegli di non esplicitarlo, usa tooltip e/o testi alternativi per i lettori di schermo.
- Usare con parsimonia le liste (gruppi) di avatar.
Buone pratiche sui contenuti
- Dai la possibilità all'utente di caricare la propria immagine preferita.
- Implementa la possibilità per l'utente di tagliare (crop) l'immagine quadrata (o rotonda) durante o successivamente al caricamento, se possibile.
- Metti a disposizione un set di icone con simboli o testo predefiniti nel caso in cui l'utente non voglia caricare un'immagine.
Accessibilità
Lo stato delle verifiche di accessibilità effettuate sul componente Bootstrap Italia
| Caratteristica | Stato | Descrizione |
|---|---|---|
Visivamente accessibile | Da rivedere | Uso e contrasto dei colori, leggibilità |
Amichevole con lettori di schermo | Pronto | Struttura titolazioni, etichette e testi alternativi |
Navigabile | Pronto | Focus, struttura, navigazione da tastiera o altri device |
Comprensibile | Pronto | Comprensibile, prevedibile, gestione semplice dell’errore |
Stato del componente
Lo stato del presente componente nelle diverse librerie di design e sviluppo del design system
| Libreria | Stato componente | Link |
|---|---|---|
UI Kit Italia (design) | Pronto | KitUI Kit Italia su Figma (si apre in una nuova finestra) |
Bootstrap Italia | Da rivedere | Scheda documentazione (si apre in una nuova finestra) |
React | Da rivedere | Scheda Storybook (si apre in una nuova finestra) |
Angular | Pronto | Scheda documentazione (si apre in una nuova finestra) |
Anatomia
Le varianti del componente avatar possono essere composte con i seguenti elementi:
- immagine dell'utente;
- forma di sfondo per le varianti con icona o testo;
- icona dell'utente;
- testo con iniziali dell'utente;
- indicatore colorato per indicare lo stato dell'utente;
- indicatore colorato per indicare la presenza dell'utente.
Le scelte tra immagine, icona o testo a rappresentare l'utente sono alternative tra loro.
Liste di avatar
Le varianti lista (o gruppo) del componente avatar possono essere composte con i seguenti elementi:
- spazio immagine, può ospitare immagine dell'utente, icona o iniziali;
- nome avatar;
- più avatar sovrapposti;
- indicatore ulteriori utenti, indica quanti altri profili utente sono disponibili, può agire come un pulsante di apertura dropdown;
- dropdown lista, mostra la lista di utenti in chiaro, opzionale.
Gli avatar nelle liste sovrapposte possono prevedere inoltre tooltip con il nome avatar.
Comportamento
Interazioni
Il componente prevede la possibilità di stati di hover e di focus, da implementare a seconda del contesto.
Se l'implementazione prevede un tooltip, questo appare all'attivazione del componente per click, tap o navigazione in focus da tastiera.
Nel caso della variante lista con avatar sovrapposti, attivando l'indicatore con il numero di avatar nascosti, si apre un menu dropdown che mostra tutti gli avatar disponibili.
Specifiche di design
Tutte le misure indicate sono espresse in px.
Varianti di dimensione
Varianti con stati
Liste di avatar
Come iniziare
Scopri come utilizzare tutti gli strumenti pensati per progettare interfacce ed esperienze dei servizi pubblici
Come iniziare
Scopri come utilizzare tutti gli strumenti pensati per progettare interfacce ed esperienze dei servizi pubblici
