Avatar, states e presence

1) Ruolo avatar e stato in UX

• forniscono riconoscibilità (elenchi, chat, tabelle)
• forniscono un feedback immediato della presenza (online/offline);
• fanno sentire l'interfaccia vivace (soprattutto nei giochi real-time, nelle PvP, nelle chat);
• aumentano la fiducia e il coinvolgimento nelle interazioni tra i giocatori.

2) Tipologia

3) Dimensioni e forma

32 px è la dimensione minima (elenchi, tabelle, chat).
40-48 px - profili, schede, barra di navigazione.
64-96 px - grandi blocchi di profilo, strim room.
Forma: rotonda - standard, quadrata - per marchi/operatori.
Raggio: «50%» per il cerchio o «8-12 px» per il quadrato morbido.

4) Caricamento e fallback

I formati supportati sono JPEG, PNG, WebP, SVG (fino a 2-3 MB).
Resource e ottimizzazione sul server (ad esempio 128, 256, 512 px).
In assenza, l'avatar iniziale è la prima lettera del nome, lo sfondo della tavolozza.
Errore durante il caricamento di placeholder finto con l'icona utente.

html
<img class="avatar" src="/u/123/avatar.jpg" alt="Аватар игрока Alex" onerror="this.src='/assets/avatar-fallback.png'">

5) Tavolozza colore e sfondo

La generazione automatica dello sfondo per hash è un colore stabile, ma unico.
Il contrasto dell'AA tra sfondo e iniziali.
Per il tema oscuro, l'oscuramento è 15-20%.
Evitare combinazioni casuali «velenose»; limitare la tavolozza (6-10 toni).

6) Indicazione presence

6. 1 States di base

6. 2 Activity-level presence

• «Gioca»
• «Scommette»
• «Nel torneo»
• «In pausa»

6. 3 Implementazione tecnica

Invia «heartbeat» ogni 30 secondi in un WebSocket.
Senza segnale> 60 secondi «offline».
In caso di attività (scroll, click, bet), aggiorna lo statò online ".
In archivio: TTL 120 secondi (Redis/Realtime API).

7) Cartelli di visualizzazione

7. 1 Nelle liste degli utenti

Avatar + stato punto in basso a destra (8-10 px).
Tooltip: «Online »/« Ultimo ingresso 5 minuti fa».

7. 2 In chat

Avatar + nick + mini-presence ('online/offline').
Ultimo messaggio e ora.
Sincronizza tramite socket event'user _ presence '.

7. 3 Nella tabella dei leader

Avatar + nome + livello/grado.
Hover → il profilo mini (ultima attività, paese, vittorie).

7. 4 Nella scheda del giocatore (PvP/Live)

Avatar di grandi dimensioni (64-80 px).
«In gioco», «In pausa», «In attesa di un avversario».
Colore traccia = stato ('border-color'var).

8) Disponibilità (A11y)

«alt», con nome e stato, «L'avatar del giocatore Alex è online».
Per gli stati sono duplicati di testo, non solo il colore.
"aria-live =" polite "quando cambia lo stato.
Contrasto dell'AA per lo stato del fondo.
Non usare indicatori lampeggianti.

9) Stati di avvio e errori

Loading: cerchio grigio/skeleton senza cornici.
Errore: icona fallback + suggerimento «Avatar non caricato».
Empty: placeholder iniziale o di sistema.

10) Privacy

L'utente deve controllare la visibilità della presence (on/off).
Impostazioni: Mostra stato online/Mostra ultima attività.
Per gli account degli ospiti, presence è nascosta.
Nel PvP - è possibile visualizzare solo «disponibile/occupato», senza tempi precisi.

11) Implementazione dell'API presence

json
{
"userId": "u123",
"presence": "online",
"activity": "playing",
"lastSeen": "2025-11-03T18:52:00Z"
}

• Abbonamento al canale «/presence/{ userId} ».
• Ping/pong periodico tramite socket.
• Aggiornamento automatico dello stato per TTL.

js socket.on('presence:update', data => {
document.querySelector(`#u${data.userId}.status`).dataset.state = data.presence;
});

12) Specificità del iGaming

Giochi live: Stato Numero 12, Spacciatore in attesa, Distribuzione in arrivo.
Tornei, badge «Partecipa», timer finale.
PvP cooperative: attività «Rivale trovato/inattivo».
Nastri sociali: avatar con mini-badge torneo o VIP di livello.
Scommesse: «In fase di puntata» (busy) «Pronto» (online).

13) Metriche e performance

Presence latency: 1 secondo dall'evento all'aggiornamento UI.
Heartbeat success rate: ≥ 99%.

CPU load su client: 5% con 1000 aggiornamenti/min

TTL accuracy: gli utenti non sono «appesi» online dopo l'uscita.
Memory leak test - Pulisce gli ascoltatori scritti.

14) Antipattern

Avatar senza alt o senza sfondo è un buco in UI.
Solo il colore per lo stato (senza testo/tooltip).
I punti lampeggianti/gli anelli pulsanti sono fastidiosi.
Nessun limite per l'aggiornamento del sovraccarico.
Visualizza «last seen» con precisione di secondo (violazione della privacy).
Formati e proporzioni diversi degli avatar nella stessa griglia.

15) Token di progettazione (esempio)

json
{
"avatar": {
"sizes": { "xs": 24, "sm": 32, "md": 40, "lg": 64 },
"radius": { "circle": "50%", "square": 8 },
"border": { "width": 2, "color": "var(--bg-elevated)" }
},
"presence": {
"dotSize": 10,
"gap": 2,
"colors": {
"online": "#00C853",
"idle": "#FFD600",
"busy": "#D32F2F",
"offline": "#9E9E9E"
}
},
"motion": {
"updateMs": 150,
"fadeMs": 120
},
"a11y": {
"contrastAA": true,
"textLabel": true
}
}

16) Lista assegni QA

UI

• Le dimensioni e i raggi sono consistenti; avatar centrato.
• Contrasto dell'AA; non ci sono stati di colore puri.
• Falback iniziale vediamo e leggiamo.
• Tooltip o stato di testo è presente.

Presence

• Lo stato viene aggiornato in 1 secondo dopo l'evento.
• Offline → Online è corretto durante il recupero.
• Non si verificano picchi (deduplicazione degli eventi).
• Si tiene conto dell'inattività (idle> 5 min).

Privacy

• Le impostazioni di visibilità presence funzionano.
• Last seen viene arrotondato a minuti/ore.
• Non ci sono attività di divulgazione eccessiva (ad esempio, scommesse).

Performance

• Heartbeat è stabile, WebSocket auto-riconnect con backoff.
• Nessuna perdita di memoria con 1000 aggiornamenti.
• TTFF ≤ 100 ms quando viene visualizzato.

17) Documentazione in progettazione

Компоненты: `Avatar`, `PresenceDot`, `UserCard`, `ActivityBadge`, `LiveStatus`.
Pattern: Avatar con fallback, Stato punto, Real Time aggiornamento presence, Modalità privata.
Token: dimensioni, colori, raggi, aggiornamenti TTL, contrasto.
Do/Don't: colore senza testo (don't), forme rotonde e quadrate in un unico elenco (don't), dimensioni e tratti stabili (do).

Breve riepilogo

Gli avatar e gli stati non sono solo elementi decorativi, ma un linguaggio di comunicazione tra gli utenti e il sistema. I colori consistenti, le firme leggibili, la sincronizzazione corretta e il rispetto per la privacy generano una sensazione di spazio vivente, particolarmente importante nell'arena, nel torneo, nella chat live o nelle scommesse con gli amici. Presence rende l'interfaccia dinamica e umana - ma solo con un equilibrio di informazione e silenzio.