Аватари, статуси і presence

1) Роль аватара і статусу в UX

• забезпечують впізнаваність (у списках, чатах, таблицях);
• дають миттєвий зворотний зв'язок про присутність (online/offline);
• створюють відчуття жвавості інтерфейсу (особливо в real-time іграх, PvP, чатах);
• підвищують довіру і залученість при взаємодіях між гравцями.

2) Типологія

3) Розміри і форма

32 px - мінімальний розмір (списки, таблиці, чати).
40-48 px - профілі, картки, панель навігації.
64-96 px - великі блоки профілю, стрім-кімнати.
Форма: кругла - стандарт, квадратна - для брендів/операторів.
Радіус: '50%'для кола або'8-12 px'для м'якого квадрата.

4) Завантаження і fallback

Підтримувані формати: JPEG, PNG, WebP, SVG (до 2–3 MB).
Ресайз і оптимізація на сервері (наприклад, 128, 256, 512 px).
При відсутності - ініціал аватар: перші літери імені, фон з палітри.
Помилка завантаження → підставної placeholder з іконкою користувача.

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

5) Колірні палітри і фон

Автогенерація фону по хешу імені: стабільний, але унікальний колір.
Контраст ≥ AA між тлом та ініціалами.
Для темної теми - затемнення 15-20%.
Уникайте випадкових «отруйних» поєднань; обмежте палітру (6-10 тонів).

6) Presence-індикація

6. 1 Базові статуси

6. 2 Activity-level presence

• «Грає»
• «Робить ставку»
• «У турнірі»
• «На перерві»

6. 3 Технічна реалізація

Відправка'heartbeat'кожні 30 сек через WebSocket.
При відсутності сигналу> 60 сек →'offline'.
При активності (scroll, клік, bet) → оновлення статусу «online».
У сховищі: TTL 120 сек (Redis/Realtime API).

7) Патерни відображення

7. 1 У списках користувачів

Аватар + статус крапкою в правому нижньому кутку (8-10 px).
Tooltip: «Онлайн »/« Останній вхід 5 хв тому».

7. 2 В чаті

Аватар + нік + mini-presence ('online/offline').
Останнє повідомлення і час.
Синхронізація через socket event'user _ presence'.

7. 3 У таблиці лідерів

Аватар + ім'я + рівень/ранг.
Hover → міні-профіль (остання активність, країна, перемоги).

7. 4 У картці гравця (PvP/Live)

Великий аватар (64-80 px).
Живий статус: «У грі», «На паузі», «Очікує опонента».
Колір обведення = стан ('border-color'var).

8) Доступність (A11y)

'alt'з ім'ям і статусом: «Аватар гравця Alex - в мережі».
Для статусів - текстові дублікати, не тільки колір.
'aria-live = «polite»'при зміні статусу.
Контраст ≥ AA для статусу до фону.
Не використовувати миготливі індикатори.

9) Стану завантаження та помилки

Loading: сірий круг/скелетон без рамки.
Error: fallback-іконка + підказка «Аватар не завантажений».
Empty: ініціал або системний placeholder.

10) Приватність

Користувач повинен контролювати видимість presence (on/off).
Налаштування: «Показувати онлайн-статус »/« Показувати останню активність».
Для гостьових акаунтів presence прихований.
У PvP - можна показувати тільки «доступний/зайнятий», без точного часу.

11) Реалізація presence API

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

• Підписка на канал '/presence/{ userId}'.
• Періодичний ping/pong через socket.
• Автоматичне оновлення статусу за TTL.

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

12) Специфіка iGaming

Live-ігри: статус «У кімнаті № 12», «Очікує дилера», «Роздача йде».
Турніри: бейдж «Бере участь», таймер закінчення.
Кооперативні PvP: активність «Суперник знайдений/неактивний».
Соціальні стрічки: аватар з mini-badge турніру або VIP-рівня.
Ставки: «У процесі ставки» (busy) → «Готовий» (online).

13) Метрики та перформанс

Presence latency: ≤ 1 сек від події до оновлення UI.
Heartbeat success rate: ≥ 99%.
CPU load на клієнті: ≤ 5% при 1000 оновлень/хв.
TTL accuracy: користувачі не «висять» онлайн після виходу.
Memory leak tests: очищення відписаних слухачів.

14) Антипатерни

Аватар без'alt'або без фону - «дірка» в UI.
Тільки колір для статусу (без тексту/tooltip).
Миготливі точки/пульсуючі кільця - дратують.
Відсутність ліміту на оновлення → перевантаження WebSocket.
Відображення «last seen» з точністю до секунди (порушення приватності).
Різні формати/пропорції аватарів в одній сітці.

15) Токени дизайн-системи (приклад)

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-чек-лист

UI

• Розміри і радіуси консистентні; аватар центрований.
• Контраст ≥ AA; немає чисто колірних статусів.
• Фолбек ініціал бачимо і читаємо.
• Tooltip або текстовий статус присутній.

Presence

• Статус оновлюється ≤ 1 сек після події.
• Offline → Online коректно при реконнекті.
• Не відбувається сплесків (дедуплікація подій).
• Враховується бездіяльність (idle> 5 хв).

Приватність

• Налаштування видимості presence працюють.
• Last seen округлюється до хвилин/годин.
• Немає зайвого розкриття активності (наприклад, ставок).

Перформанс

• Heartbeat стабільний, WebSocket auto-reconnect з backoff.
• Без витоків пам'яті при 1000 оновлень.
• TTFF ≤ 100 мс при відображенні.

17) Документація в дизайн-системі

Компоненти: `Avatar`, `PresenceDot`, `UserCard`, `ActivityBadge`, `LiveStatus`.
Патерни: «Аватар з fallback», «Статус крапкою», «Реал-тайм оновлення presence», «Приватний режим».
Токени: розміри, кольори, радіуси, TTL оновлення, контраст.
Do/Don’t: колір без тексту (don't), круглі та квадратні форми в одному списку (don't), стабільні розміри та обведення (do).

Коротке резюме

Аватари і статуси - це не просто декоративні елементи, а мова спілкування між користувачами і системою. Послідовні кольори, читані підписи, коректна синхронізація і повага до приватності формують відчуття «живого» простору, особливо важливого в iGaming: на арені, в турнірі, в live-чаті або при ставках з друзями. Presence робить інтерфейс динамічним і людяним - але тільки при балансі інформативності і тиші.