Avatare, Status und Präsenz

1) Die Rolle von Avatar und Status in UX

• Erkennbarkeit (in Listen, Chats, Tabellen);
• sofortige Rückmeldung über die Anwesenheit geben (online/offline);
• schaffen ein Gefühl der Lebendigkeit der Schnittstelle (vor allem in Echtzeit-Spielen, PvP, Chats);
• erhöhen Vertrauen und Engagement bei Interaktionen zwischen Spielern.

2) Typologie

3) Größen und Form

32 px ist die Mindestgröße (Listen, Tabellen, Chats).
40-48 px - Profile, Karten, Navigationsleiste.
64-96 px - große Profilblöcke, Stream-Räume.
Form: rund - Standard, quadratisch - für Marken/Betreiber.
Radius: '50%' für den Kreis oder '8-12 px' für das weiche Quadrat.

4) Download und Fallback

Unterstützte Formate: JPEG, PNG, WebP, SVG (bis zu 2-3 MB).
Neugestaltung und Optimierung auf dem Server (z.B. 128, 256, 512 px).
In Abwesenheit - Initialavatar: die ersten Buchstaben des Namens, der Hintergrund aus der Palette.
Fehler beim Laden → Dummy-Platzhalters mit dem Benutzersymbol.

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

5) Farbpaletten und Hintergrund

Auto-Generierung des Hintergrunds durch den Namen Hash: eine stabile, aber einzigartige Farbe.
Der Kontrast ≥ AA zwischen dem Hintergrund und den Initialen.
Für ein dunkles Thema - Verdunkelung 15-20%.
Vermeiden Sie zufällige „giftige“ Kombinationen; Begrenzen Sie die Palette (6-10 Töne).

6) Präsenz-Anzeige

6. 1 Basisstatus

6. 2 Activity-level presence

• „Spielt“
• „Macht eine Wette“
• „Im Turnier“
• „In der Pause“

6. 3 Technische Umsetzung

Senden Sie' heartbeat 'alle 30 Sekunden über WebSocket.
Wenn kein Signal> 60 Sekunden → „offline“.
Bei Aktivität (Scroll, Click, Bet) → der Status „online“ aktualisiert.
Im Speicher: TTL 120 sec (Redis/Realtime API).

7) Anzeigemuster

7. 1 In Benutzerlisten

Avatar + Status durch einen Punkt in der unteren rechten Ecke (8-10 px).
Tooltip: „Online “/„ Letzter Login vor 5 min“.

7. 2 Im Chat

Avatar + Nick + Mini-Präsenz („online/offline“).
Letzte Nachricht und Zeit.
Synchronisation über Socket Event 'user _ presence'.

7. 3 In der Bestenliste

Avatar + Name + Level/Rang.
Hover → Mini-Profil (letzte Aktivität, Land, Siege).

7. 4 In der Spielerkarte (PvP/Live)

Großer Avatar (64-80 px).
Live-Status: „Im Spiel“, „Pause“, „Erwartet den Gegner“.
Strichfarbe = Zustand ('border-color' var).

8) Verfügbarkeit (A11y)

'alt' mit Name und Status: „Alex Spieler Avatar - online“.
Für Status - Text Duplikate, nicht nur Farbe.
'aria-live =' polite', wenn sich der Status ändert.
Kontrast ≥ AA für Status zu Hintergrund.
Verwenden Sie keine blinkenden Lichter.

9) Ladezustände und Fehler

Belastung: grauer Kreis/Skeleton ohne Rahmen.
Fehler: Fallback-Symbol + Hinweis „Avatar nicht geladen“.
Leer: Initial oder Systemplatzhalter.

10) Privatsphäre

Der Benutzer muss die Sichtbarkeit der Präsenz (on/off) kontrollieren.
Einstellungen: „Online-Status anzeigen “/„ Letzte Aktivität anzeigen“.
Für Gastkonten wird die Präsenz ausgeblendet.
In PvP - Sie können nur „verfügbar/beschäftigt“ anzeigen, ohne genaue Zeit.

11) Presence API Implementierung

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

• Kanalabonnement '/presence/{ userId}'.
• Periodischer Ping/Pong über Sockel.
• Automatische Statusaktualisierung über TTL.

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

12) Besonderheiten von iGaming

Live-Spiele: Status „In Raum Nr. 12“, „Wartet auf den Dealer“, „Die Verteilung geht“.
Turniere: Teilnahmebescheinigung, Endzeitgeber.
Kooperative PvP: Aktivität „Gegner gefunden/inaktiv“.
Soziale Feeds: Avatar mit Mini-Badge-Turnier oder VIP-Level.
Wetten: „Im Wettprozess“ (busy) → „Bereit“ (online).

13) Metriken und Performance

Latenzzeit: ≤ 1 Sekunden vom Ereignis bis zum UI-Update.
Heartbeat success rate: ≥ 99%.
CPU-Last auf dem Client: ≤ 5% bei 1000 Updates/min.
TTL-Genauigkeit: Benutzer „hängen“ nach dem Verlassen nicht online.
Memory-Leak-Tests: Bereinigen von abgemeldeten Zuhörern.

14) Antipatterns

Ein Avatar ohne' alt 'oder ohne Hintergrund ist ein' Loch 'in der Benutzeroberfläche.
Nur Farbe für Status (kein Text/Tooltip).
Blinkende Punkte/pulsierende Ringe - ärgerlich.
Kein Limit für Updates → WebSocket-Überlastung.
Anzeige „last seen“ sekundengenau (Verletzung der Privatsphäre).
Verschiedene Formate/Proportionen von Avataren in einem Raster.

15) Design-System-Token (Beispiel)

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) QS-Checkliste

UI

• Abmessungen und Radien sind konsistent; Der Avatar ist zentriert.
• Kontrast ≥ AA; Es gibt keinen reinen Farbstatus.
• Folback Initiale sehen und lesen.
• Tooltip oder Textstatus vorhanden.

Presence

• Der Status wird ≤ 1 Sekunde nach dem Ereignis aktualisiert.
• Offline → Online ist bei der Wiederherstellung korrekt.
• Es treten keine Spitzen auf (Ereignisdeduplizierung).
• Inaktivität wird berücksichtigt (idle> 5 min).

Privatsphäre

• Die Sichtbarkeitseinstellungen von presence funktionieren.
• Last seen wird auf Minuten/Stunden gerundet.
• Keine unnötige Offenlegung von Aktivitäten (z. B. Wetten).

Performance

• Heartbeat ist stabil, WebSocket auto-reconnect mit Backoff.
• Keine Speicherlecks bei 1000 Updates.
• TTFF ≤ 100 ms bei Anzeige.

17) Dokumentation im Konstruktionssystem

Компоненты: `Avatar`, `PresenceDot`, `UserCard`, `ActivityBadge`, `LiveStatus`.
Muster: „Avatar mit Fallback“, „Status-Punkt“, „Real-Time-Update-Präsenz“, „Privatmodus“.
Token: Größen, Farben, Radien, TTL-Updates, Kontrast.
Do/Don't: Farbe ohne Text (don't), runde und quadratische Formen in einer Liste (don't), stabile Größen und Striche (do).

Kurze Zusammenfassung

Avatare und Status sind nicht nur dekorative Elemente, sondern eine Sprache der Kommunikation zwischen Benutzern und System. Konsistente Farben, lesbare Signaturen, korrekte Synchronisation und Respekt für die Privatsphäre bilden ein Gefühl für den „Live“ -Raum, der beim iGaming besonders wichtig ist: in der Arena, im Turnier, im Live-Chat oder beim Wetten mit Freunden. Präsenz macht die Schnittstelle dynamisch und menschlich - aber nur mit einer Balance aus Informativität und Stille.