Аватары, статусы и 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 делает интерфейс динамичным и человечным — но только при балансе информативности и тишины.