UI leaders et cartes de mission : meilleures pratiques

1) Pourquoi tout cela : les objectifs de l'IU

Liderbord : expliquer instantanément « qui est où » et pourquoi jouer ensuite ; afficher la cible la plus proche (+ N points jusqu'à apa).

Cartes de mission : transformer les règles longues en une « unité d'action » compréhensible pendant 10 à 30 minutes.

2) Hiérarchie de l'information du leader

Jeu minimal de colonnes :

1. L'endroit (#) avec une largeur constante et un chiffre important.

2. Joueur (avatar/cadre/titre, pseudo court) - profil cliquable →.

3. Points/métrique de notation (SP/MMR/points d'évent) - aligner sur le bord droit.

4. Prix/zone de classement (icône de rareté/gamme de récompense).

5. Temps/étape (live/qualificateur/finals), minuterie de fin.

Modèles :

Mise en surbrillance de sa ligne (sticky row + « revenez à moi »).
« Seuil jusqu'à la cible » : petit placard « − 48 SP jusqu'au TOP 100 ».
La pente de personne (« T-10 » pour les mêmes lunettes).

3) Contrôle et navigation

Filtres : ligue/division, région, amis, « seulement mon fournisseur ».

Tri : Par endroit (par pb.) , par lunettes, par heure d'entrée, par zone de prix.

Pagination vs scroll infini :

desktop est pagination + « vers soi-même », mobile est un scroll infini, mais avec « vers le début/vers soi-même ».
Jump-to Rank : champ de saisie de rang pour une transition instantanée (important pour les planches à grande échelle).

4) Mises à jour en temps réel (pas de « durganya »)

Mises à jour diff : nous ne changeons que les lignes qui ont vraiment bougé.

Animation de déplacement de ligne : 120-200 ms, easing-out ; pas de saut.

Anti-flash : mises à jour toutes les 1 à 2 secondes (pas plus souvent).

Mises à jour optimistes : on ajoute localement des points et du metim « synchronisation »....

5) Honnêteté et sécurité dans le leader UI

Explication des règles : « Comment comptent les lunettes ? » à côté du titre.

Anti-bulling : masquer une partie du pseudo (option), plainte contre un nom toxique - 1 clic.

Marqueur de compte suspect : caché aux autres ; au joueur - « vos points sont vérifiés ».

Division divisée : ligues de badge visuellement différentes, de sorte que les forts ne se mélangent pas avec les lanceurs.

6) Anatomie de la carte de mission (one-glance design)

Titre (≤ 40-50 caractères), icône de type mission.

Description courte (que faire, où, pour combien).

Barre de progression avec nombre/pourcentage + estimation du temps (≈ 20-25 min).

Difficulté (1-3 points) et rareté de la récompense (couleur/facette).

Récompenses : tokens/cosmétiques (petites vignettes), sans sous-texte « argent ».

Délai : minuterie avant expiration avec couleur douce (orange/rouge dans les 10 derniers %).

CTA : « Commencer »/« Continuer »/« Récupérer » est un bouton principal.

Secondaire : « Changer de mission » (si autorisé), « Lire la suite » (modération des règles).

7) État des cartes de mission

Locked : gris, avec l'indice « s'ouvrira après le niveau 7 « ; CTA = "De quoi as-tu besoin ? ».

Disponible : couleur par type ; CTA = « Commencer ».

In-progress : la barre de progression est active, CTA = « Continuer ».

Complété : chèque vert ; CTA = « Ramasser » (effet ≤ 1 seconde).

Expired : pâle ; CTA = "Masquer "/" Répéter dans la saison N'.

On hold (test d'honnêteté) : Le placard jaune « vérifie le résultat 1-3 min ».

8) Langage visuel et accessibilité

Les couleurs sont rares : Common (neutre), Rare (bleu), Epic (fiolet), Legendary (or), Mythic (accent arc-en-ciel).

Couleurs sémantiques : succès/progrès - vert, avertissements - ambre, deadline - rouge.

Contraste ≥ 4. 5:1, polices ≥ 14-16 px par mobile.

Tout est important - pas seulement la couleur (icônes/modèles).

VFX économique : 0. 6–1. 2 c, sans chevauchement du contrôle.

Adaptabilité : tableau → carte (2 colonnes tablet, 1 colonne phone) ; les gros titres.

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

Squelettes pour tables et cartes (3-5 lignes/tyles).

Empty state : texte utile + « Obtenir une mission de départ ».

Erreurs de réseau : compréhensibles, avec « Refaire » ; hors ligne - montrer le cache et marquer « dernière mise à jour : 14:02 ».

10) Performance

Virtualisation des listes (300 + lignes).

Les icônes sont comme des sprites/Lottie (pas un zoo SVG inutile).

Debounce filtres/recherche (300-500 ms).

Caches clients et ETag pour les planches/missions.

11) Contenu honnête et anti-abus dans les missions UI

Bref « Comment ça marche » : chance de drop, pity-logic, caps, pas de nébuleuses marketing.

Le modèle anti-pharma : nous notons la « diversité » - les progrès sont plus rapides lors du changement de fournisseur/de pari.

Couldowns sur le bouton « Changer de mission » et un indice quand vous pouvez à nouveau.

12) Les métriques qui sont vraiment importantes

CTR Cartes de mission, Taux de départ, Taux de réussite, TTC médian.

Equip Taux/Durée pour les cosmétiques obtenus par des missions.

Engagement de leadership : clics sur « to you », « go to profile », temps de visibilité.

Taux complet/Mute sur VFX/notifications.

Stick....( DAU/MAU) et D7/D30 uplift chez les participants aux missions/tournois.

Gini par SP : uniformité des progrès à des temps de jeu similaires.

13) Idées A/B

1. Format de barre de progression : numérique + visuel vs seulement visuel.

2. Estimation du temps : afficher/ne pas afficher ; impact sur le départ.

3. CTA : un grand vs deux boutons égaux.

4. Trier par défaut : par place vs par zone de prix.

5. Seuil de rétroéclairage de la date limite : T-10 % vs T-20 % du temps.

6. « À vous » dans le leader : le bouton vs est toujours une ligne ancrée.

14) Exemples de schémas JSON (Contenu → UI)

Carte de mission

json
{
"id": "m. s4. provider. diversité « , » titre « : » ouvre les trois fournisseurs « , » résumé « : » joue avec 3 fournisseurs différents en 30 minutes « , » difficile « : » medium « , » est_time_min" : 25, « progress » : {« current » : 2, « target » : 3, « rewards » : {« tokens » « : 10, » cosmetic_drop" : {« rarity » : « Rare », « p » : 0. 1}}, "expires_at" : "2025-10-26T18 : 00Z", "état" : "in_progress", "cta" : {"label" : "Continuer", "deeplink" : "app ://open/lobby ? tab=providers"}
}

Ligne de leader

json
{
"rank": 124,  "user": {"id": "u_59211", "name": "SeaFox", "avatar_frame": "legendary. wave"},  "score": 18420,  "league": "Gold I",  "prize_band": "Top 100",  "delta_to_next": 47,  "is_me": false,  "stage": "qualifier",  "ends_at": "2025-10-24T21:00:00Z"
}

15) Microcopie (courte et claire)

La mission a commencé - "Allons-y ! Il reste ≈ 20 min".

Подстёгивание du progrès - "Encore 1 provider jusqu'à la récompense".

Deadline - « 10 % du temps, vous aurez le temps en une seule fois ».

Vérification de l'honnêteté - « Nous vérifions le résultat (jusqu'à 3 min) - la récompense est maintenue ».

16) Chèque-liste avant la sortie

Tables lisibles à 320 px ; il y a le « to you » et le sticky header.
Les cartes de mission sont compréhensibles « d'un seul coup d'oeil » : objectif, temps, récompense, CTA.
Mise à jour en temps réel sans flic ; patchs diff et fréquence batch.
Écran « Comment ça marche » : formules lunettes/cap/rares.
Contrôle du bruit : limites VFX/min, « mode silencieux » de nuit.
Accessibilité : contraste, pas seulement couleur, navigation clavier.
Anti-abyse : Couldaunes « Changer de mission », illumination de la variabilité.
Métriques et plan A/B établis ; logs de clics et de synchronisations.

L'UI robuste du leader et des cartes de mission est une lisibilité instantanée, une dynamique douce, une transparence honnête et un bruit contrôlé. Donnez au joueur un objectif immédiat, un progrès compréhensible et un VFX soigné, gardez les mises à jour stables et les règles claires. Alors la planche devient le moteur de la compétition, et les cartes de mission sont une « unité d'action » pratique qui augmente systématiquement l'implication et la rétention.