Avatar

Rappresentazione grafica di un utente per identificare visivamente la persona online

Componenti

Metadati e link per approfondire

Utile per

Anteprima

Anteprima:
Inizio anteprima:Fine anteprima.

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

CaratteristicaStatoDescrizione

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

Anatomia

Gli elementi che possono comporre un avatar

Le varianti del componente avatar possono essere composte con i seguenti elementi:

  1. immagine dell'utente;
  2. forma di sfondo per le varianti con icona o testo;
  3. icona dell'utente;
  4. testo con iniziali dell'utente;
  5. indicatore colorato per indicare lo stato dell'utente;
  6. 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

Gli elementi che possono comporre una lista di avatar

Le varianti lista (o gruppo) del componente avatar possono essere composte con i seguenti elementi:

  1. spazio immagine, può ospitare immagine dell'utente, icona o iniziali;
  2. nome avatar;
  3. più avatar sovrapposti;
  4. indicatore ulteriori utenti, indica quanti altri profili utente sono disponibili, può agire come un pulsante di apertura dropdown;
  5. 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

Specifiche di design di avatar

Varianti con stati

Specifiche di design di avatar con stati

Liste di avatar

Specifiche di design delle liste di avatar

Come iniziare

Scopri come utilizzare tutti gli strumenti pensati per progettare interfacce ed esperienze dei servizi pubblici

Anteprima

Anteprima:
Inizio anteprima:Fine anteprima.

Come iniziare

Scopri come utilizzare tutti gli strumenti pensati per progettare interfacce ed esperienze dei servizi pubblici