Avatars, statuses and presence

1) Role of avatar and status in UX

• ensure recognition (in lists, chats, tables);
• provide instant presence feedback (online/offline);
• create a sense of liveliness of the interface (especially in real-time games, PvP, chats);
• increase trust and engagement in interactions between players.

2) Typology

3) Dimensions and shape

32 px - minimum size (lists, tables, chats).
40-48 px - profiles, cards, navigation panel.
64-96 px - large profile blocks, stream rooms.
Shape: round - standard, square - for brands/operators.
Radius: '50%' for circle or '8-12 px' for soft square.

4) Loading and fallback

Supported formats: JPEG, PNG, WebP, SVG (up to 2-3 MB).
Resource and optimization on the server (for example, 128, 256, 512 px).
In the absence - the initial avatar: the first letters of the name, the background from the palette.
Error loading → fake placeholder with user icon.

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

5) Color palettes and background

Auto-generation of the background by name hash: stable but unique color.
Contrast ≥ AA between background and initials.
For a dark theme - dimming 15-20%.
Avoid random "poisonous" combinations; limit the palette to 6-10 tones.

6) Presence indication

6. 1 Basic statuses

6. 2 Activity-level presence

• "Plays"
• "Makes a bet"
• "In the Tournament"
• "On hiatus"

6. 3 Technical implementation

Sending 'heartbeat' every 30 seconds via WebSocket.
If there is no signal> 60 seconds → 'offline '.
When active (scroll, click, bet), the'online 'status → updated.
In storage: TTL 120 sec (Redis/Realtime API).

7) Display patterns

7. 1 In user lists

Avatar + status with a dot in the lower right corner (8-10 px).

Tooltip: "Online "/" Last login 5 min ago."

7. 2 In chat

Avatar + nickname + mini-presence ('online/offline').
Last message and time.
Synchronization via socket event 'user _ presence'.

7. 3 On the leaderboard

Avatar + name + level/rank.
Hover → mini-profile (last activity, country, victories).

7. 4 On player card (PvP/Live)

Large avatar (64-80 px).

Live status: "In the game," "On pause," "Waiting for the opponent."

Stroke color = state ('border-color' var).

8) Availability (A11y)

'alt'with name and status: "Alex Player Avatar - Online."

For statuses - text duplicates, not only color.
'aria-live = "polite" 'when status changes.
Contrast ≥ AA for status to background.
Do not use flashing lights.

9) Download states and errors

Loading: grey circle/skeleton without frame.
Error: fallback icon + "Avatar not loaded" prompt.
Empty: initial or system placeholder.

10) Privacy

The user must control the presence (on/off).

Settings: "Show online status "/" Show last activity."

Presence is hidden for guest accounts.
In PvP - you can only show "available/busy," without an exact time.

11) Implementation of presence API

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

• Subscribe to channel '/presence/{ userId} '.
• Periodic ping/pong via socket.
• Automatic status update via TTL.

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

12) The specifics of iGaming

Live games: status "In room No. 12," "Waiting for the dealer," "Distribution is underway."

Tournaments: Participating badge, end timer.
Cooperative PvP: Opponent Found/Inactive Activity.
Social feeds: avatar with mini-badge tournament or VIP level.
Bets are busy → online.

13) Metrics and performance

Presence latency: ≤ 1 second from event to UI update.
Heartbeat success rate: ≥ 99%.
CPU load on client: ≤ 5% at 1000 updates/min.
TTL accuracy: users do not "hang" online after release.
Memory leak tests: clearing unsigned listeners.

14) Antipatterns

Avatar without 'alt' or without background - "hole" in UI.
Only color for status (no text/tooltip).
Flashing dots/pulsing rings - annoying.
No limit on updates → WebSocket overload.
Displaying "last seen" to the nearest second (privacy violation).
Different formats/proportions of avatars in the same grid.

15) Design system tokens (example)

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) QA checklist

UI

• Dimensions and radii are consistent; avatar centered.
• Contrast ≥ AA; there are no pure color statuses.
• Folback initial see and read.
• Tooltip or text status is present.

Presence

• The status is updated ≤ 1 second after the event.
• Offline → Online is correct during reconnection.
• No spikes (event deduplication).
• Idle (idle> 5 min) is considered.

Privacy

• Presence settings work.
• Last seen rounded to minutes/hours.
• There is no superfluous disclosure of activity (for example, bets).

Performance

• Heartbeat is stable, WebSocket auto-reconnect with backoff.
• No memory leaks with 1000 updates.
• TTFF ≤ 100 ms when displayed.

17) Documentation in the design system

Компоненты: `Avatar`, `PresenceDot`, `UserCard`, `ActivityBadge`, `LiveStatus`.

Patterns: "Avatar with fallback," "Status point," "Real-time update presence," "Private mode."

Tokens: sizes, colors, radii, TTL updates, contrast.
Do/Don't: color without text (don't), round and square shapes in one list (don't), stable dimensions and strokes (do).

Brief summary

Avatars and statuses are not just decorative elements, but the language of communication between users and the system. Consistent colors, readable captions, correct synchronization and respect for privacy create a sense of "living" space, especially important in iGaming: in the arena, in a tournament, in a live chat or when betting with friends. Presence makes the interface dynamic and human - but only with a balance of information content and silence.