Avatars, statuts et presences

1) Rôle de l'avatar et statut dans l'UX

• assurer la reconnaissance (dans les listes, les chats, les tables) ;
• Donner une rétroaction instantanée sur la présence (en ligne/hors ligne) ;
• créer un sentiment de vivacité de l'interface (en particulier dans les jeux real-time, PvP, chats) ;
• renforcer la confiance et l'engagement dans les interactions entre les joueurs.

2) Typologie

3) Dimensions et forme

32 px est la taille minimale (listes, tables, chats).
40-48 px - profils, cartes, barre de navigation.
64-96 px - grands blocs de profil, chambres de stream.
Forme : ronde - standard, carrée - pour les marques/opérateurs.
Rayon : '50 %' pour un cercle ou '8-12 px' pour un carré mou.

4) Téléchargement et fallback

Formats pris en charge : JPEG, PNG, WebP, SVG (jusqu'à 2-3 Mo).
Récupération et optimisation sur le serveur (par exemple 128, 256, 512 px).
En l'absence, l'avatar a commencé : les premières lettres du nom, l'arrière-plan de la palette.
Erreur de chargement → placeholder fictif avec icône utilisateur.

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

5) Palettes de couleurs et arrière-plan

Auto-génération d'arrière-plan par nom hash : une couleur stable mais unique.
Contraste ≥ AA entre le fond et les initiales.
Pour un sujet sombre, l'obscurité est de 15 à 20 %.
Évitez les combinaisons « toxiques » aléatoires ; limitez la palette (6-10 tons).

6) Indication de la présence

6. 1 Statuts de base

6. 2 Activity-level presence

• « Joue »
• « Parie »
• « Dans le tournoi »
• « En pause »

6. 3 Réalisation technique

Envoie 'heartbeat' toutes les 30 secondes via WebSocket.
En l'absence de signal> 60 secondes → 'offline'.
Lorsque vous êtes actif (scroll, clic, bet), vous → mettre à jour le statut 'online'.
Stockage : TTL 120 secondes (API Redis/Realtime).

7) Modèles d'affichage

7. 1 Dans les listes d'utilisateurs

Avatar + statut par point dans le coin inférieur droit (8-10 px).
Tooltip : « En ligne »/« Dernière entrée 5 min en arrière ».

7. 2 Dans le chat

Avatar + nick + mini-presence ('online/offline').
Dernier message et heure.
Synchronisation via socket event 'user _ presence'.

7. 3 Dans la table des leaders

Avatar + nom + niveau/rang.
Hover → mini-profil (dernière activité, pays, victoires).

7. 4 Dans la carte du joueur (PvP/Live)

Grand avatar (64-80 px).
Statut en direct : « Dans le jeu », « En pause », « Attend l'adversaire ».
Couleur de contour = état ('border-color' var).

8) Accessibilité (A11y)

'Alt 'avec le nom et le statut : « L'avatar du joueur Alex est en ligne ».
Pour les statuts, les doublons de texte, pas seulement la couleur.
« aria-live = » polite « » lorsque le statut change.
Contraste ≥ AA pour l'état au fond.
Ne pas utiliser d'indicateurs clignotants.

9) États de téléchargement et erreurs

Loading : cercle gris/squelette sans cadre.
Error : icône fallback + conseil « Avatar non chargé ».
Empty : Initial ou système placeholder.

10) La vie privée

L'utilisateur doit contrôler la visibilité de la presence (on/off).
Paramètres : Afficher le statut en ligne/Afficher la dernière activité.
Pour les comptes invités, la presence est masquée.
Dans PvP, vous ne pouvez afficher que « disponible/occupé », sans heure précise.

11) Implémentation de l'API presence

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

• Abonnement à la chaîne '/presence/{ userId} '.
• Ping/pong périodique via socket.
• Mise à jour automatique du statut par TTL.

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

12) Spécificités iGaming

Jeux en direct : statut « Dans la salle n ° 12 », « Attend le dealer », « La distribution est en cours ».
Tournois : Badge « Participe », minuteur de fin.
PvP coopératif : activité « Rival trouvé/inactif ».
Rubans sociaux : avatar avec mini-badge tournoi ou niveau VIP.
Paris : « En cours de mise » (busy) → « Prêt » (en ligne).

13) Métriques et performances

Latency Presence : ≤ 1 seconde de l'événement à la mise à jour de l'interface utilisateur.
Heartbeat success rate: ≥ 99%.

Charge CPU sur le client : ≤ 5 % avec 1000 mises à jour/min

TTL accuracy : les utilisateurs ne « pendent » pas en ligne après la sortie.
Memory leak tests : nettoyer les auditeurs désinscrits.

14) Anti-modèles

L'avatar sans 'alt' ou sans fond est un « trou » dans l'IU.
Couleur uniquement pour le statut (sans texte/tooltip).
Points clignotants/anneaux pulsés - irritant.
Aucune limite pour les mises à jour → surcharge WebSocket.
Afficher « last seen » avec une précision d'une seconde (violation de la vie privée).
Différents formats/proportions d'avatars dans la même grille.

15) Tokens de système de conception (exemple)

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) Liste de vérification QA

UI

• Les dimensions et les rayons sont constants ; l'avatar est centré.
• Contraste ≥ AA ; il n'y a pas de statuts purement colorimétriques.
• Folback initial est vu et lu.
• Le statut Tooltip ou texte est présent.

Presence

• L'état est mis à jour ≤ 1 seconde après l'événement.
• Offline → Online est correct lors de la reconfiguration.
• Il n'y a pas de surtension (déduplication des événements).
• L'inaction (idle> 5 min) est prise en compte.

La vie privée

• Les paramètres de visibilité de presence fonctionnent.
• Last seen est arrondi à minutes/heures.
• Il n'y a pas de divulgation superflue de l'activité (par exemple, les taux).

Performance

• Heartbeat est stable, WebSocket auto-reconnect avec backoff.
• Aucune fuite de mémoire pour 1000 mises à jour.
• TTFF ≤ 100 ms à l'affichage.

17) Documentation dans le système de conception

Компоненты: `Avatar`, `PresenceDot`, `UserCard`, `ActivityBadge`, `LiveStatus`.
Patterns : « Avatar avec fallback », « Status Point », « Real Time Presence Update », « Mode privé ».
Tokens : dimensions, couleurs, rayons, mise à jour TTL, contraste.
Do/Don't : couleur sans texte (don't), formes rondes et carrées dans la même liste (don't), dimensions et contours stables (do).

Résumé succinct

Les avatars et les statuts ne sont pas seulement des éléments décoratifs, mais un langage de communication entre les utilisateurs et le système. Les couleurs successives, les signatures lisibles, la synchronisation correcte et le respect de la vie privée forment un sentiment d'espace « vivant », particulièrement important dans iGaming : dans l'arène, dans le tournoi, dans le chat en direct ou dans les paris entre amis. Presence rend l'interface dynamique et humaine - mais seulement dans un équilibre d'information et de silence.