Avatares, estados y presencia

1) El papel del avatar y el estado en UX

• proporcionar reconocimiento (en listas, chats, tablas);
• proporcionan retroalimentación instantánea sobre la presencia (online/offline);
• crean una sensación de vivacidad de la interfaz (especialmente en juegos en tiempo real, PvP, chats);
• aumentar la confianza y el compromiso en las interacciones entre los jugadores.

2) Tipología

3) Dimensiones y forma

32 px es el tamaño mínimo (listas, tablas, chats).
40-48 px - perfiles, tarjetas, barra de navegación.
64-96 px - grandes bloques de perfil, salas de streaming.
Forma: redondo - estándar, cuadrado - para marcas/operadores.
Radio: '50%' para un círculo o '8-12 px' para un cuadrado blando.

4) Descarga y fallback

Formatos compatibles: JPEG, PNG, WebP, SVG (hasta 2-3 MB).
Recuperación y optimización en el servidor (por ejemplo, 128, 256, 512 px).
En ausencia - el avatar inicial: las primeras letras del nombre, el fondo de la paleta.
Error de descarga → placeholder subyacente con el icono del usuario.

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

5) Paletas de color y fondo

Autogeneración de fondo por nombre hash: color estable pero único.
Contraste ≥ AA entre el fondo y las iniciales.
Para un tema oscuro - 15-20% de oscurecimiento.
Evite las combinaciones accidentales «venenosas»; limite la paleta (6-10 tonos).

6) Presence-indicación

6. 1 Estados básicos

6. 2 Activity-level presence

• «Juega»
• «Apuesta»
• «En el torneo»
• «En el descanso»

6. 3 Implementación técnica

Enviar 'heartbeat' cada 30 segundos a través de WebSocket.
Si no hay señal> 60 segundos → 'offline'.
Con la actividad (scroll, clic, bet) → actualizando el estado 'online'.
En almacenamiento: TTL 120 segundos (API Redis/Realtime).

7) Patrones de visualización

7. 1 En listas de usuarios

Avatar + estado con un punto en la esquina inferior derecha (8-10 px).
Tooltip: «Online »/« Última entrada 5 min atrás».

7. 2 En chat

Avatar + nick + mini-presence ('online/offline').
Último mensaje y hora.
Sincronización a través de socket event 'user _ presence'.

7. 3 En la tabla de clasificación

Avatar + nombre + nivel/rango.
Hover → mini-perfil (última actividad, país, victorias).

7. 4 En la tarjeta del jugador (PvP/Live)

Avatar grande (64-80 px).
Estado vivo: «En el juego», «En pausa», «Espera un oponente».
Color de trazo = estado ('border-color' var).

8) Accesibilidad (A11y)

'alt' con nombre y estatus: «El avatar del jugador Alex está en la red».
Para los estados - duplicados de texto, no sólo el color.
'aria-live =' polite 'cuando cambia de estado.
El contraste ≥ AA para el estado al fondo.
No utilice indicadores parpadeantes.

9) Estados de descarga y errores

Carga: círculo gris/esqueleto sin marco.
Error: icono fallback + pista «Avatar no cargado».
Empty: inicio o placeholder del sistema.

10) Privacidad

El usuario debe controlar la visibilidad presence (on/off).
Ajustes: «Mostrar estado en línea »/« Mostrar la última actividad».
Para las cuentas de invitados, la presence está oculta.
En PvP - sólo se puede mostrar «disponible/ocupado», sin tiempo exacto.

11) Implementación de la API presence

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

• Suscripción al canal '/presence/{ userId} '.
• Ping/pong periódico a través del socket.
• Actualización automática del estado por TTL.

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

12) Especificidad de iGaming

Juegos en vivo: estado «En la habitación número 12», «Espera un distribuidor», «La distribución está en marcha».
Torneos: etiqueta «Participa», temporizador final.
PvP cooperativo: actividad «Rival encontrado/inactivo».
Cintas sociales: avatar con un torneo mini-badge o nivel VIP.
Apuestas: «En el proceso de apuesta» (busy) → «Listo» (online).

13) Métricas y performance

Presence latency: ≤ 1 segundo desde el evento hasta la actualización de IU.
Heartbeat success rate: ≥ 99%.
Carga de CPU en el cliente: ≤ 5% con 1000 actualizaciones/min.
TTL accuracy: los usuarios no «cuelgan» en línea después de su lanzamiento.
Memory leak tests: depuración de oyentes dados de baja.

14) Antipattern

Un avatar sin 'alt' o sin fondo es un «agujero» en IU.
Sólo color para el estado (sin texto/tooltip).
Puntos intermitentes/anillos pulsantes - irritantes.
No hay límite para las actualizaciones → la sobrecarga de WebSocket.
Muestra «last seen» con una precisión de un segundo (violación de privacidad).
Diferentes formatos/proporciones de avatares en la misma cuadrícula.

15) Tokens del sistema de diseño (ejemplo)

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-check-list

UI

• Las dimensiones y los radios son consistentes; el avatar está centrado.
• Contraste ≥ AA; no hay estados puramente de color.
• Folback inicial ve y lee.
• El estado de herramienta o texto está presente.

Presence

• El estado se actualiza ≤ 1 segundo después del evento.
• Offline → Online es correcto cuando se reconnecta.
• No hay picos (deduplicación de eventos).
• Se tendrá en cuenta la inacción (idle> 5 min).

Privacidad

• Los ajustes de visibilidad de presence funcionan.
• El último punto se redondea a minutos/horas.
• No hay divulgación de actividad adicional (por ejemplo, apuestas).

Performance

• Heartbeat es estable, WebSocket auto-reconnect con backoff.
• Sin fugas de memoria en 1000 actualizaciones.
• TTFF ≤ 100 ms cuando se muestra.

17) Documentación en el sistema de diseño

Компоненты: `Avatar`, `PresenceDot`, `UserCard`, `ActivityBadge`, `LiveStatus`.
Patrones: «Avatar con fallback», «Status Point», «Real Time Update Presence», «Modo Privado».
Tokens: dimensiones, colores, radios, actualizaciones TTL, contraste.
Do/Don 't: color sin texto (don' t), formas redondas y cuadradas en la misma lista (don 't), dimensiones estables y trazos (do).

Resumen breve

Avatares y estados no son sólo elementos decorativos, sino un lenguaje de comunicación entre los usuarios y el sistema. Los colores consistentes, las firmas legibles, la correcta sincronización y el respeto por la privacidad forman una sensación de espacio «en vivo», especialmente importante en iGaming: en la arena, en el torneo, en el chat en vivo o cuando se apuesta con amigos. Presence hace que la interfaz sea dinámica y humana, pero sólo con un equilibrio de información y silencio.