# language: fr @ui @moderation @badges @gamification Fonctionnalité: Badges et statistiques de modération communautaire (Mobile) En tant qu'utilisateur contributeur Je veux voir mes badges et statistiques de modération Afin d'être motivé à continuer à signaler du contenu pertinent # 19.1.4 - Affichage badges et statistiques Contexte: Étant donné que je suis connecté à l'application mobile Et que j'ai envoyé des signalements # Affichage des statistiques personnelles Scénario: Accéder aux statistiques de modération Étant donné que je suis dans mon profil Quand je clique sur "Mes signalements" Alors je vois en haut de page une carte "📊 Vos statistiques de modération" Et la carte affiche: | élément | valeur | couleur | | Signalements envoyés | 27 | Bleu | | Validés | 23 ✅ | Vert | | Rejetés | 4 ❌ | Rouge | | Taux de pertinence | 85% | Vert/Orange | | Badge actuel | 🥈 Contributeur Argent | Argent | | Prochain palier | 🥇 Contributeur Or | Or | | Progression vers prochain | 27 signalements restants| Bleu | Et les données sont mises à jour en temps réel Scénario: Design de la carte statistiques Étant donné que j'affiche mes statistiques Quand je vérifie le design Alors la carte a un fond dégradé subtil (blanc → gris clair) Et les icônes sont colorées et expressives Et les nombres sont en gras et mis en évidence Et le taux de pertinence a une jauge visuelle (progress bar) Et l'ensemble est visuellement attrayant et motivant Plan du Scénario: Couleur du taux de pertinence selon performance Étant donné que mon taux de pertinence est de % Quand j'affiche mes statistiques Alors la jauge de pertinence est de couleur "" Et le message associé est "" Exemples: | taux | couleur | message | | 95 | Vert | Excellent ! | | 82 | Vert clair | Très bon | | 72 | Orange | Bon, continuez vos efforts | | 55 | Rouge | Améliorez la qualité de vos signalements | # Affichage du badge actuel Scénario: Badge Bronze visible Étant donné que j'ai le badge 🥉 Contributeur Bronze Quand j'affiche mon profil public Alors le badge 🥉 s'affiche à côté de mon pseudo Et un tooltip s'affiche au survol/appui long: """ 🥉 Contributeur Bronze Signale du contenu inapproprié pour améliorer la communauté """ Et le badge est discret mais visible Scénario: Badge Argent visible avec priorité Étant donné que j'ai le badge 🥈 Contributeur Argent Quand j'affiche mon profil Alors le badge 🥈 s'affiche de manière plus proéminente Et le badge est affiché avec une animation subtile (brille légèrement) Et le tooltip indique: """ 🥈 Contributeur Argent Utilisateur de confiance - Signalements traités en priorité """ Et le badge inspire confiance aux autres utilisateurs Scénario: Badge Or visible avec effet premium Étant donné que j'ai le badge 🥇 Contributeur Or Quand j'affiche mon profil Alors le badge 🥇 s'affiche avec un effet brillant/doré Et une animation subtile attire l'attention Et le tooltip indique: """ 🥇 Contributeur Or Top contributeur - Aide précieuse à la communauté """ Et le badge est prestigieux et reconnu # Toast après validation/rejet de signalement Scénario: Toast après validation avec progression vers badge Étant donné que j'ai 3 signalements validés sur 5 pour le badge Bronze Et que j'envoie un nouveau signalement Quand le modérateur valide mon signalement Alors je reçois un toast: """ ✅ Bravo ! Votre signalement a aidé la communauté. Progression : 4/5 pour badge Bronze 🥉 """ Et une mini progress bar s'affiche dans le toast (80%) Et le toast s'affiche pendant 6 secondes Et je me sens motivé à continuer Scénario: Toast célébration obtention badge Bronze Étant donné que j'ai 4 signalements validés Quand mon 5ème signalement est validé Alors je reçois un toast spécial avec animation: """ 🎉 Félicitations ! Vous êtes désormais Contributeur Bronze 🥉 Merci de rendre RoadWave meilleur ! """ Et le toast a une animation de confettis Et un son de célébration est joué (vibration haptique) Et le toast reste affiché 8 secondes Et je peux cliquer pour voir mes nouveaux avantages Scénario: Toast célébration obtention badge Argent Étant donné que j'obtiens le badge 🥈 Contributeur Argent Quand la notification est affichée Alors je reçois un toast premium: """ 🎉 Impressionnant ! Badge Contributeur Argent obtenu 🥈 Votre engagement fait la différence ! """ Et l'animation est plus spectaculaire (confettis argentés) Et un son de réussite est joué Et le badge est ajouté à mon profil instantanément Scénario: Toast célébration obtention badge Or avec offre Premium Étant donné que j'obtiens le badge 🥇 Contributeur Or Quand la notification est affichée Alors je reçois un toast VIP: """ 🎉 Exceptionnel ! Badge Contributeur Or obtenu 🥇 + Offre Premium -50% pendant 3 mois ! [Voir l'offre] """ Et l'animation est spectaculaire (confettis dorés) Et un son de victoire est joué Et le toast reste affiché 10 secondes Et je peux cliquer pour accéder à l'offre Premium Scénario: Toast après rejet avec encouragement Étant donné que mon taux de pertinence est de 65% Quand un signalement est rejeté Alors je reçois un toast constructif: """ ❌ Signalement non retenu. Taux de pertinence : 60% Continuez vos efforts ! """ Et le ton est encourageant, pas décourageant Et un lien "Améliorer mes signalements" est affiché Et je peux consulter les bonnes pratiques # Progression visuelle vers le prochain badge Scénario: Barre de progression vers badge Argent Étant donné que j'ai le badge Bronze Et que j'ai 12 signalements validés (sur 20 requis pour Argent) Quand j'affiche mes statistiques Alors je vois une barre de progression: """ Prochain palier : 🥈 Contributeur Argent [████████░░░░░░░░] 60% (12/20) 8 signalements validés restants """ Et la barre est animée progressivement Et je vois clairement combien il me reste à faire Scénario: Progression avec délai minimum Étant donné que j'ai obtenu le badge Bronze il y a 15 jours Et que j'ai déjà 20 signalements validés Quand j'affiche ma progression vers Argent Alors je vois un message: """ ✓ Critères atteints (20 signalements validés) ⏰ Délai minimum : encore 15 jours Les badges nécessitent une contribution régulière sur la durée. """ Et je comprends que le délai minimum est anti-farming # Page dédiée "En savoir plus" sur les badges Scénario: Accéder à la page d'explication des badges Étant donné que je vois mes statistiques Quand je clique sur "En savoir plus" sur les badges Alors une page dédiée s'affiche avec: | section | contenu | | Introduction | Pourquoi nous récompensons les contributeurs | | Les 3 badges | Bronze, Argent, Or avec critères détaillés | | Calcul taux de pertinence | Formule et exemples | | Avantages de chaque badge | Priorisation, visibilité, réduction Premium | | Délais entre badges | 30j Bronze→Argent, 60j Argent→Or | | Règles anti-abus | Limite 10/24h, audit trimestriel | | FAQ | Questions fréquentes | Et la page est bien structurée et facile à lire Scénario: Design de la page badges Étant donné que j'affiche la page "En savoir plus" Quand je vérifie le design Alors chaque badge a une illustration attrayante Et les critères sont affichés en tableaux clairs Et des exemples concrets sont fournis Et le ton est motivant et positif Et je peux facilement comprendre le système # Affichage sur profil public Scénario: Badge visible sur mon profil public Étant donné que j'ai le badge 🥈 Contributeur Argent Quand un autre utilisateur consulte mon profil Alors il voit le badge 🥈 à côté de mon pseudo Et il peut cliquer sur le badge pour voir la description Et cela renforce ma crédibilité Et les autres utilisateurs me font davantage confiance Scénario: Badge visible sur mes commentaires/interactions Étant donné que j'ai le badge 🥇 Contributeur Or Quand je laisse un commentaire sur un contenu Alors le badge 🥇 s'affiche à côté de mon pseudo Et cela montre que je suis un membre actif de la communauté Et mes interactions ont plus de poids # Notification email pour badges Scénario: Email de félicitations pour badge Bronze Étant donné que j'obtiens le badge 🥉 Contributeur Bronze Quand le badge est attribué Alors je reçois un email de félicitations: """ Objet: 🎉 Vous êtes maintenant Contributeur Bronze ! Bravo [Pseudo] ! Vous avez obtenu le badge Contributeur Bronze grâce à vos 5 signalements validés et votre taux de pertinence de 72%. Vos avantages: - Signalements traités en priorité (+10 points) - Badge visible sur votre profil Continuez à nous aider à maintenir une communauté saine ! 🙏 L'équipe RoadWave """ Et l'email contient un lien vers mes statistiques Scénario: Email de félicitations pour badge Or avec offre Premium Étant donné que j'obtiens le badge 🥇 Contributeur Or Quand le badge est attribué Alors je reçois un email VIP: """ Objet: 🎉 Badge Or obtenu ! Offre Premium -50% offerte Exceptionnel [Pseudo] ! Vous faites partie des meilleurs contributeurs de RoadWave. Grâce à vos 50 signalements validés (90% pertinence), vous aidez des milliers d'utilisateurs. 🎁 En reconnaissance, vous bénéficiez de: ✨ 3 mois d'abonnement Premium à -50% → 2.49€/mois au lieu de 4.99€ [Profiter de l'offre] Cette offre est valable pendant 30 jours. Merci de contribuer à rendre RoadWave meilleur ! 🏆 L'équipe RoadWave """ Et l'email contient un CTA mis en évidence # Rappels expiration offre Premium Scénario: Rappel J-7 expiration offre Premium Étant donné que j'ai obtenu le badge Or il y a 23 jours Et que je n'ai pas activé l'offre Premium -50% Quand le système envoie les rappels Alors je reçois un email + push: """ ⏰ Il vous reste 7 jours ! Votre offre Premium -50% expire bientôt. Profitez de 3 mois à 2.49€/mois au lieu de 4.99€. [Activer maintenant] """ Et le CTA est mis en évidence en orange Scénario: Rappel J-1 expiration offre Premium Étant donné que j'ai obtenu le badge Or il y a 29 jours Et que je n'ai pas activé l'offre Quand le dernier rappel est envoyé Alors je reçois un email + push urgent: """ ⚠️ Dernière chance ! Votre offre Premium -50% expire DEMAIN. Ne manquez pas cette opportunité ! [Activer avant expiration] """ Et le CTA est en rouge pour l'urgence # Affichage après expiration offre Scénario: Message d'expiration de l'offre Premium Étant donné que l'offre Premium a expiré (31 jours) Quand j'accède à mes statistiques Alors je vois un message: """ Votre offre Premium -50% a expiré. Votre badge Or est conservé. """ Et le message est informatif, sans regret excessif # Animation et gamification Scénario: Animation lors de la montée de niveau Étant donné que je passe de Bronze à Argent Quand le changement est effectué Alors une animation "level up" s'affiche à l'écran Et mon nouveau badge apparaît avec un effet de brillance Et un son de réussite est joué Et l'UX est gratifiante et mémorable Scénario: Confettis pour badge Or Étant donné que j'obtiens le badge Or Quand la notification s'affiche Alors des confettis dorés tombent sur l'écran Et l'animation dure 3 secondes Et le badge Or apparaît avec un effet "shine" Et je me sens valorisé et reconnu # Dark mode et accessibilité Scénario: Support du dark mode pour les badges Étant donné que j'ai activé le dark mode Quand j'affiche mes statistiques et badges Alors les couleurs s'adaptent: | élément | couleur light | couleur dark | | Badge Bronze | #CD7F32 | #D4A574 | | Badge Argent | #C0C0C0 | #E8E8E8 | | Badge Or | #FFD700 | #FFC700 | | Fond carte stats | Blanc | Gris foncé | | Jauge pertinence verte | #28A745 | #34D058 | | Jauge pertinence orange | #FF8C00 | #FFA500 | Et le contraste reste optimal Scénario: Accessibilité lecteur d'écran pour badges Étant donné que j'utilise un lecteur d'écran Quand je navigue dans mes statistiques Alors le lecteur annonce clairement: """ Vos statistiques de modération. Signalements envoyés: 27. Validés: 23. Rejetés: 4. Taux de pertinence: 85%. Badge actuel: Contributeur Argent. Prochain palier: Contributeur Or, 27 signalements validés restants. """ Et tous les éléments visuels ont des équivalents textuels # Coût et performance Scénario: Performance de l'affichage des statistiques Étant donné que j'affiche mes statistiques Quand je mesure les performances Alors les données se chargent en <300ms Et les animations sont fluides (60 FPS) Et la mémoire utilisée est <50 MB Et l'UX est instantanée Scénario: Coût de la fonctionnalité Étant donné que le système de badges est en place Quand on évalue le coût Alors le développement est 100% interne (Flutter) Et les calculs sont effectués côté backend (0€ côté app) Et les notifications sont gratuites (Firebase) Et le coût opérationnel est de 0€ (MVP)