Avatare, statusuri și prezență

1) Rolul avatarului și statutul în UX

• asigurarea recunoașterii (în liste, chat-uri, mese);
• oferă feedback de prezență instantanee (online/offline);
• creați un sentiment de liveliness a interfeței (în special în jocuri în timp real, PvP, chat-uri);
• creșterea încrederii și implicării în interacțiunile dintre jucători.

2) Tipologie

3) Dimensiuni și formă

32 px - dimensiune minimă (liste, mese, chat-uri).
40-48 px - profile, carduri, panou de navigare.
64-96 px - blocuri mari de profil, camere de curent.
Forma: rotunda - standard, patrata - pentru marci/operatori.
Rază: „50%” pentru cerc sau „8-12 px” pentru pătrat moale.

4) Încărcare și rezervă

Formate acceptate: JPEG, PNG, WebP, SVG (până la 2-3 MB).
Resurse și optimizare pe server (de exemplu, 128, 256, 512 px).
În absența - avatarul inițial: primele litere ale numelui, fundalul din paletă.
Eroare la încărcarea → înlocuitor fals cu pictograma utilizatorului.

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

5) Palete de culori și fundal

Generarea automată a fundalului după numele hash: culoare stabilă, dar unică.
Contrast ≥ AA între fundal și inițiale.
Pentru o temă întunecată - diminuarea 15-20%.
Evitați combinațiile aleatorii „otrăvitoare”; limitează paleta la 6-10 tone.

6) Indicarea prezenței

6. 1 Statusuri de bază

6. 2 Prezența la nivel de activitate

• „Joacă”
• „Face un pariu”
• „În turneu”
• „În pauză”

6. 3 Implementarea tehnică

Trimiterea „bătăilor inimii” la fiecare 30 de secunde prin WebSocket.
Dacă nu există semnal> 60 secunde → „offline”.
Când este activă (derulați, faceți clic, pariați), starea 'online' → actualizată.
În stocare: TTL 120 sec (Redis/Realtime API).

7) Afișează modele

7. 1 În listele de utilizatori

Starea Avatar + cu un punct în colțul din dreapta jos (8-10 px).
Tooltip: „Online „/” Ultima autentificare 5 min în urmă ”.

7. 2 în chat

Avatar + poreclă + mini-prezență ('online/offline').
Ultimul mesaj şi timpul.
Sincronizarea prin intermediul evenimentului socket 'user _ presence'.

7. 3 În clasament

Avatar + nume + nivel/rang.
Hover → mini-profil (ultima activitate, țară, victorii).

7. 4 Pe player card (PvP/Live)

Avatar mare (64-80 px).
Starea live: „În joc”, „Pe pauză”, „În așteptare pentru adversar”.
Culoare contur = stare ('border-color' var).

8) Disponibilitate (A11y)

'alt' with name and status: „Alex Player Avatar - Online”.
Pentru statusuri - duplicate de text, nu numai de culoare.
'aria-live = „politicos”' atunci când statutul se schimbă.
Contrast ≥ AA pentru status to background.
Nu utilizați lumini intermitente.

9) Descărcați stările și erorile

Încărcare: cerc gri/schelet fără cadru.
Eroare: pictograma de rezervă + „Avatar nu este încărcat” prompt.
Gol: înlocuitor inițial sau de sistem.

10) Confidențialitate

Utilizatorul trebuie să controleze prezența (on/off).
Setări: „Arată starea online „/” Arată ultima activitate ”.
Prezența este ascunsă pentru conturile oaspeților.
În PvP - puteți afișa doar „disponibil/ocupat”, fără o oră exactă.

11) Implementarea API de prezență

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

• Abonează-te la canalul '/presence/{ userId} '.
• Ping/pong periodic prin priză.
• Actualizare automată a stării prin TTL.

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

12) Specificul iGaming

Jocuri live: starea „În camera nr. 12”, „În așteptare pentru dealer”, „Distribuția este în curs de desfășurare”.
Turnee: Insignă participantă, cronometru final.
Cooperative PvP: Oponent găsit/activitate inactivă.
Social feed-uri: avatar cu mini-insigna turneu sau nivel VIP.
Pariurile sunt ocupate → online.

13) Măsurători și performanță

Latența prezenței: ≤ 1 secundă de la eveniment la actualizarea UI.
Rata de succes a bătăilor inimii: ≥ 99%.
Încărcare procesor pe client: ≤ 5% la 1000 actualizări/min.
Precizia TTL: utilizatorii nu „atârnă” online după lansare.
Teste de scurgere a memoriei: compensarea ascultătorilor nesemnați.

14) Antipattern

Avatar fără „alt” sau fără fundal - „gaură” în UI.
Numai culoare pentru stare (fără text/tooltip).
Puncte intermitente/inele pulsatoare - enervant.
Nu există limite pentru actualizări → supraîncărcarea WebSocket.
Afișarea „ultima văzut” la cea mai apropiată secundă (încălcarea confidențialității).
Diferite formate/proporții de avatare în aceeași grilă.

15) Proiectarea tokenurilor sistemului (exemplu)

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 de verificare QA

UI

• Dimensiunile și razele sunt consecvente; avatar centrat.
• Contrast ≥ AA; nu există stări de culoare pură.
• Folback inițial a se vedea și citi.
• Tooltip sau starea textului este prezentă.

Prezența

• Starea este actualizată ≤ 1 secundă după eveniment.
• Offline → Online este corect în timpul reconectării.
• Fără vârfuri (deduplicarea evenimentelor).
• Idle (inactiv> 5 min) este considerat.

Confidențialitate

• Setările prezenței funcționează.
• Văzut ultima dată rotunjit la minute/ore.
• Nu există nici o dezvăluire inutilă a activității (de exemplu, pariuri).

Performanță

• Heartbeat este stabil, WebSocket auto-reconecta cu backoff.
• Nu există scurgeri de memorie cu actualizări 1000.
• TTFF ≤ 100 ms atunci când este afișat.

17) Documentația în sistemul de proiectare

Компоненты: 'Avatar', 'PresenceDot',' UserCard', 'ActivityBadge', 'LiveStatus'.
Modele: „Avatar cu rezervă”, „Punct de stare”, „Prezența actualizării în timp real”, „Mod privat”.
Jetoane: dimensiuni, culori, raze, actualizări TTL, contrast.
Do/Don' t: culoare fără text (don' t), forme rotunde şi pătrate într-o singură listă (don' t), dimensiuni stabile şi contururi (do).

Scurt rezumat

Avatarele și statusurile nu sunt doar elemente decorative, ci limbajul de comunicare între utilizatori și sistem. Culorile consistente, subtitrările lizibile, sincronizarea corectă și respectarea vieții private creează un sentiment de spațiu „viu”, deosebit de important în iGaming: în arenă, într-un turneu, într-un chat live sau atunci când pariați cu prietenii. Prezența face interfața dinamică și umană - dar numai cu un echilibru de conținut informațional și tăcere.