Crypto-casino
Torrent Gear
TOP-10 techniques visuelles pour l'interface des missions
Trois choses sont importantes dans l'interface des missions : la clarté du but, le sentiment de progrès et le rythme des petites victoires. Ci-dessous - dix techniques qui augmentent la participation/complétion et réduisent les plaintes sans surcharger l'écran.
1) Marche-escalier au lieu de la bande « infinie »
Ce que c'est : une échelle segmentée T1→T2→Final avec des seuils et des points de récompense explicites.
Pourquoi : il est plus facile pour le cerveau de comprendre les étapes discrètes que le « progrès continu 63 % ».
Comment dessiner
3-5 divisions, signer chacun : « T1 100 points », « T2 300 », « Final 600 ».
Afficher les récompenses reçues directement sur les divisions (icônes FS/cache/badge).
Un clic sur la division → un pop-up « qu'a donné/quand va brûler ».
A/B-idée : échelle avec icônes vs échelle sèche. Attente : + 3-5 pp au complet T1.
2) « Combien il reste » en unités compréhensibles
Ce que c'est : à côté du progrès, nous montrons l'équivalent de l'effort : points → tours → minutes.
Formule sous le capot (approximativement)
« Il reste 120 points ≈ 8 rounds à 0,5 € ≈ 6-8 minutes ».
Règles
D'abord le temps, puis les rounds et l'argent.
Compter par la médiane des 10 à 20 dernières actions de l'utilisateur (conseils adaptatifs).
Mettre à jour toutes les 2 à 3 secondes, sans sauts.
A/B-idée : « laissé dans les lunettes » vs « est resté dans les minutes ». Attente : − 10-15 % des sorties précoces.
3) Step Cards avec « un but par écran »
Qu'est-ce que c'est : chaque étape de la mission est une carte séparée avec un objectif majeur et un bouton "Comment comptez-vous ? ».
Composition de la carte
Titre : « Étape 2 sur 3 ».
Objectif : 1 ligne (« Collectez 300 points ou 150 spins »).
Progrès : Mini-escalier/puce « 180/300 ».
Le bouton « ? » → la liste des jeux activés/exclus, des kaps, des exemples.
Do : grande police, contraste hiérarchique visuel.
Don 't : surcharger avec de petites conditions et des astérisques.
4) Objectifs OR : « fourchette » visuelle de trois voies
Ce que c'est : au lieu du texte « ou/ou » - trois boutons-chemins égaux (Compétition rapide avec l'intrigue).
Règles
Les trois voies sont visibles simultanément ; en surbrillance active.
Sous chaque bouton, il y a un mini-ETA : « ~ 8-10 min », « 1 fois × 20 », « 100 spins ».
Micro-texte
Sélectionnez un chemin pratique. Vous pouvez changer à tout moment - les progrès seront maintenus".
A/B-idée : talons boutons-tuiles. Attente : + 4-7 p.p. participation_net.
5) Zones de récompense sur le leader et dans les missions
Ce que c'est : nous divisons la table/grille en zones (Top-3 / 4-10 / 11-50 / 51 +), nous montrons la récompense minimale garantie de chaque zone.
Visuel
Les couleurs des zones ; près de la position du joueur - « Il reste 2400 points à la zone 4-10 ».
« Garantie : FS × 10 » juste dans la zone, sans « chercher dans les règles ».
Avantage : nettoie le « plafond de verre », forme un objectif réaliste.
6) Module Tymbox avec « fenêtre de respiration »
Qu'est-ce que c'est : minuterie visuelle de phase active (15-20 min) + carte « pause sans pénalité ».
Écran
Minuterie annulaire signée « Fenêtre 20:00 ».
A la fin : animation douce + sélection « Je reviens plus tard »/« Renouveler » (si possible).
Message : « La pause n'interrompra pas la bande ».
Effet : grandit Sessions/DAU, réduit la fatigue.
7) Micro-animations « étincelles » et squelettes de chargement
Ce que c'est : flashs légers/confettis avec progrès et récompenses ; squelettes + shimer dans des endroits avec des données.
Hydes par mouvements
Durée 200-350 ms, courbes ease-out/ease-in-out.
Ne pas chevaucher le contenu principal, mais « mettre en surbrillance ».
Les squelettes répètent la géométrie des cartes ; shimer 1. 2–1. 6 secondes.
Idée A/B : avec animation vs sans. Attente : − 8-12 % des sorties précoces, + CTR sur « continuer ».
8) Tules contextuelles : « Comment comptez-vous ? » et « Pourquoi ne va-t-il pas ? »
Qu'est-ce que c'est : l'icône « ? » à côté de la cible ouvre un mini-hyde avec des formules, des exemples et des erreurs fréquentes.
Modèle de bloc
« Comme nous le pensons » : formule + 1 exemple.
« Kaps » : par mise/min/jour (nombre).
« Pas de progrès ? » 3 raisons + références aux jeux/modes exclus.
Le plus : réduit considérablement les tiquets dans le sapport.
9) Couleur, contraste et iconographie (WCAG + thème sombre)
Règles de base
Contraste de texte minimum WCAG AA (4. 5:1), grand - 3:1.
La couleur ≠ le seul porteur de sens : ajouter des icônes/motifs.
Icônes : 2-3 formes de base (étoile - récompenses, objectif - étape/mission, éclair - « étincelles »).
Thème sombre : fond # 0F/12, « étincelles » brillent sans RVB toxique.
Micro-copirate
« La récompense va brûler dans 12 heures » - toujours à côté du bouton « Obtenir ».
10) États vides, erreurs, labels « brûlés »
Ce que c'est : des écrans réfléchis quand il n'y a pas de données/missions, et quand quelque chose s'est mal passé.
Est vide
Illustration + "Aujourd'hui est libre. Tu veux essayer le Menu du Jour ? "
Bouton Sélectionner une mission → (mène à la sélection).
Erreurs
"Il n'a pas été possible de mettre à jour les progrès. Nous répétons"... + spinner ≤3 s → "Essayer plus "/" En chat".
Le statut « Brûlé via X » est affiché sur la carte de récompense et dans la liste des récompenses.
Éléments d'interface supplémentaires
Puce "cap atteint" : "200/200 points/heure - limite. Réinitialisation à 00:00".
Badge « presque atteint » : indicateur jaune à ≤150 points jusqu'au seuil.
Transitions de jeu : « Changer de jeu - le progrès sera maintenu » (anti-grind).
Localisation : nombres avec espaces indissociables « 1 000 € », format horaire de 24 heures, noms de jours en local.
Micro-textes (peut être inséré tel quel)
« Il reste 120 points ≈ 8 tours à 0,5 € (6-8 min) ».
"Tu es dans la zone 11-50. Garantie : FS × 10. Jusqu'à 4-10 - 2400 points"
"Cap atteint : 200 points/heure. Réinitialisation à 00:00 (Europe/Kyiv)"
« Choisissez le chemin : Rapide/Compétition/Avec l'intrigue - vous pouvez changer à tout moment ».
Métriques pour les expériences d'IU
Effet UI sur l'entonnoir : CTR « Start », participation_net, T1/T2 complétion.
Comportemental : Early-exit (≤5 min), time-to-T1/T2, switch-rate, vue des torses « ? ».
Qualité : plaintes/1k, erreurs de mise à jour de progrès, latency p95.
Valeur : Δ ARPPU (net), Prix & Bonus/Active, Net Uplift.
Cadre A/B (bref)
Unité : utilisateur ; sticky-assignment; stratification (platform/geo/payer-flag).
Hypothèses : échelle vs bande ; « minutes » vs « lunettes » ; boutons-chemins vs taba ; avec animation « étincelles » vs sans.
CUPED : pré-session-time comme covariable ; Fenêtre de ≥2 semaine avec phases de D0-D2/D3-D7.
Chèque du concepteur de mission
- L'escalier T1→T2→Final avec les icônes des prix.
- Bloc « Combien il reste » en minutes/tours.
- Cartes d'étapes, une cible par écran.
- Voies OR - trois boutons visibles avec ETA.
- Les zones de récompense et de plâtre sont « garanties ».
- Timebox-timer + « fenêtre de respiration ».
- Micro-animations « étincelles », squelettes/shimer.
- Tula « Comment compte-t-on ? » + les raisons « pourquoi ne va pas ».
- Contraste/icônes/thème sombre ; « brûlé par X ».
- États vides et erreurs bienveillantes.
Mini case (synthétique)
Avant : bande de progression sans seuils, texte « il reste 120 points », caps cachés, pas d'états chauds et vides.
Après : escalier avec récompenses, « 8 rounds/6-8 min », OU-chemin-boutons, module tymbox, tules « ? », « cap atteint », étincelles + squelettes, zones de récompenses.
Résultat 4 semaines vs contrôle : participation_net + 6. 4 pp, complétion + 10. 8 pp, Early-exit − 18 %, plaintes/1k − 31 %, Δ ARPPU (net) + 1 €. 7 при Prize&Bonus/Active +€0. 5.
Une bonne interface de mission est une discipline visuelle : étapes au lieu de « marais d'intérêt », indices d'effort spécifiques, récompenses visibles et dynamique douce. Ajoutez à cela la disponibilité, les tules claires, les tymboxes et les animations soignées - et les missions commenceront à fonctionner comme un « rythme de petites victoires », plutôt que comme une longue et ennuyeuse bande de progrès.