Avatares, estatais e presence

1) Papel de avatar e status em UX

• fornecem reconhecimento (em listas, bate-papos, tabelas);
• fornecem feedback instantâneo sobre a presença (online/offline);
• criam uma sensação de vitalidade da interface (especialmente nos jogos real-time, PvP, bate-papos);
• aumentam a confiança e o envolvimento nas interações entre os jogadores.

2) Tipologia

3) Tamanhos e formas

32 px - tamanho mínimo (listas, tabelas, bate-papos).
40-48 px - perfis, cartões, barra de navegação.
64-96 px - grandes blocos de perfil, salas estrim.
Forma: circular - padrão, quadrado - para marcas/operadoras.
Raio: '50%' para um círculo ou '8-12 px' para um quadrado macio.

4) Download e fallback

Formatos suportados: JPEG, PNG, WebP, SVG (até 2-3 MB).
Resaiz e otimização no servidor (por exemplo, 128, 256, 512 px).
Quando não existe, o avatar inicial é a primeira letra do nome, o fundo do painel.
Erro ao carregar → placeholder de fachada com ícone do usuário.

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

5) Painéis de cores e fundo

A geração automática do fundo com o nome hash é estável, mas uma cor única.
Contraste ≥ AA entre o fundo e as iniciais.
Para o tema escuro, escurece entre 15% e 20%.
Evite combinações aleatórias «venenosas»; Limite o painel (6 a 10 tons).

6) Indicador presence

6. 1 Estatais de base

6. 2 Activity-level presence

• «A jogar»
• «Apostando»
• «No torneio»
• «No intervalo»

6. 3 Implementação técnica

Envia 'heartbeat' a cada 30 segundos através de WebSocket.
Sem sinal> 60 segundos 'offline'.
Quando você está ativo (scroll, clique, bet), → a atualização do status 'online'.
Em armazenamento: TTL 120 segundos (Redis/Realtime API).

7) Pattern de exibição

7. 1 Nas listas de usuários

Avatar + status de ponto no canto inferior direito (8-10 px).
Tooltip: «Online »/« Última entrada há 5 minutos».

7. 2 No bate-papo

Avatar + nic + mini-presence ('online/offline').
Última mensagem e hora.
Sincronizar através do socket event 'user _ presence'.

7. 3 Na tabela de líderes

Avatar + nome + nível/classificação.
Hover → mini-perfil (última atividade, país, vitórias).

7. 4 no cartão do jogador (PvP/Live)

Avatar grande (64-80 px).
«Em jogo», «Em pausa», «À espera de um oponente».
Cor do traçado = estado ('border-cor' var).

8) Disponibilidade (A11y)

'alt' com o nome e status de' avatar jogador Alex 'online.
Para estatais, duplica texto, não apenas cor.
'aria-live =' polite 'quando o status é alterado.
Contraste AA para status de fundo.
Não usar indicadores piscantes.

9) Estados de download e erros

Loading: círculo cinzento/skeleton sem molduras.
Erro: ícone fallback + dica «Avatar não carregado».
Empty: inicial ou placeholder do sistema.

10) Privacidade

O usuário deve controlar a visibilidade do presence (on/off).
Configurações: «Exibir status online »/« Mostrar última atividade».
Para contas de hóspedes presence oculta.
No PvP, você só pode exibir «disponível/ocupado», sem hora exata.

11) Implementação da API presence

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

• Subscrição para o canal '/presence/se-á '
• Ping/pong periódico através do socket.
• Atualização automática de status por TTL.

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

12) Especificidades iGaming

Jogos ao vivo: Status «Sala 12», «À espera de um distribuidor», «A distribuição está a chegar».
Torneios, crachá participante, horário final.
PvP cooperativas: Atividade Rival Encontrado/Inativo.
Fitas sociais: avatar com mini-badge torneio ou nível VIP.
As apostas são «Durante a aposta» (busy) → «Pronto» (online).

13) Métricas e performance

Presence latency: ≤ 1 segundo desde o evento até a atualização UI.
Heartbeat success rate: ≥ 99%.

CPU load no cliente: ≤ 5% com 1.000 atualizações/min

TTL accuracy: Os usuários não estão «pendurados» online após o lançamento.
Memory leak testes: Limpar ouvintes escritos.

14) Antipattern

Avatar sem 'alt' ou sem fundo é um «buraco» na UI.
Somente cor para status (sem texto/tooltip).
Os pontos piscantes/os anéis de pulso são irritantes.
Não há limite de atualização → sobrecarga de WebSocket.
Exibição «last seen» com precisão de segundo (violação de privacidade).
Formatos/proporções diferentes de avatares na mesma grade.

15) Sistema de design de tokens (exemplo)

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-folha de cheque

UI

• Os tamanhos e os raios são consistentes; O avatar está centralizado.
• Contraste ≥ AA; não há estados de cor limpos.
• Falback inicial vemos e lemos.
• Tooltip ou status de texto está presente.

Presence

• O status é atualizado ≤ 1 segundo após o evento.
• Offline → Online correto no recall.
• Não há picos (dedução de eventos).
• A inatividade é levada em conta (idle> 5 min).

Privacidade

• As configurações de visibilidade do presence funcionam.
• Last seen é arredondado para minutos/horas.
• Não há nenhuma divulgação de atividade (por exemplo, apostas).

Performance

• Heartbeat está estável, WebSocket auto-reconnect com backoff.
• Sem vazamentos de memória ao 1000 atualizações.
• TTFF ≤ 100 ms quando exibido.

17) Documentação em design

Компоненты: `Avatar`, `PresenceDot`, `UserCard`, `ActivityBadge`, `LiveStatus`.
Pattern: «Avatar com fallback», «Status de ponto», «Real time atualização presence», «Modo privado».
Tokens: tamanhos, cores, raio, atualizações TTL, contraste.
Do/Don 't: cor sem texto (don' t), formas redondas e quadradas em uma única lista (don 't), tamanho estável e traçado (do).

Resumo breve

Os avatares e estatais não são apenas elementos decorativos, mas uma linguagem de comunicação entre os usuários e o sistema. Cores consistentes, assinaturas legíveis, sincronização correta e respeito pela privacidade geram uma sensação de espaço «vivo», especialmente importante no iGaming, na arena, no torneio, no live chat ou em apostas com amigos. O presence torna a interface dinâmica e humana - mas apenas com equilíbrio de informação e silêncio.