chartbastan/_bmad-output/planning-artifacts/ux-design-specification.md

stepsCompleted	lastStep	inputDocuments	status	completedDate
1 2 3 4 5 6 7 8 9 10 11 12 13 14	14	prd.md project-context.md	complete	2026-01-17

UX Design Specification chartbastan

Author: Ramez Date: 2026-01-17

---

Executive Summary

Project Vision

Chartbastan est une plateforme de prédiction de résultats de football révolutionnaire qui analyse l'énergie collective des supporters sur les réseaux sociaux (Twitter, Reddit, RSS) pour fournir des prédictions avec une précision >60%. L'approche unique consiste à capturer le "vibe" et le sentiment des fans plutôt que de se fier uniquement aux statistiques traditionnelles.

L'application s'adresse à un public cible novice (priorité absolue en UX) avec une expérience mobile-first (mobile prioritaire, desktop secondaire), utilisée principalement entre les deux matchs (périodes calmes). Le modèle économique est freemium : version gratuite (1-2 prédictions/jour) pour engager les utilisateurs, version premium (19.99€/mois) pour des fonctionnalités avancées et illimitées.

Le moment "Aha !" clé se produit quand un utilisateur voit une prédiction avec un haut niveau de confiance (ex: 75%+) et cette prédiction se révèle CORRECTE, créant une confiance immédiate dans l'algorithme.

Target Users

Utilisateurs Primaires (Personas PRD) :

1. Thomas (28 ans) - Le Parieur Passionné Occasionnel

   • Parie 2-3 fois par mois sur des matchs importants
   • A perdu 400€ le mois dernier sans stratégie
   • Cherche des données objectives simples, pas des cotes opaques
   • Besoin UX : Interface ultra-simple, pas de jargon, résultats immédiats

2. Marie (34 ans) - La Parieuse Sérieuse

   • Parie régulièrement depuis 5 ans, investisseur financier
   • Cherche métriques détaillées et analyses avancées
   • Prête à payer pour de la valeur réelle
   • Besoin UX : Mode expert avec visualisations riches, données historiques

3. Utilisateur Novice (Priorité UX)

   • Peu ou pas d'expérience avec les paris
   • Mobile-first, smartphone principal
   • Critère UX principal : "Doit pouvoir utiliser l'app facilement sans frustration"
   • Besoin d'onboarding guidé et de terminologie simplifiée

Utilisateurs Secondaires (Support) :

4. Julien (24 ans) - Testeur Beta Technique : Documentation API, feedbacks
5. Sophie (29 ans) - Admin & Opérations : Monitoring, stabilité système
6. Lucas (26 ans) - Support Client : Aide utilisateurs, feedbacks structurés

Key Design Challenges

Challenge #1 : Simplifier la Complexité Algorithmique

• Transformer l'analyse de sentiment et l'énergie collective en concepts intuitifs
• Expliquer le "Confidence Meter" sans jargon technique pour un novice
• Rendre les visualisations de données immédiatement compréhensibles sur mobile

Challenge #2 : Établir la Crédibilité et la Transparence

• Surmonter le scepticisme des novices face aux nouvelles promesses de prédiction
• Prouver que l'algorithme fonctionne vraiment (backtesting visible, résultats transparents)
• Éviter l'impression de "scam" omniprésente dans l'industrie du betting

Challenge #3 : Mobile-First avec Données Complexes

• Afficher des visualisations riches (graphiques d'énergie, heatmap, historique) sur petits écrans
• Équilibrer richesse d'informations avec clarté et navigation intuitive
• Optimiser pour ergonomie doigts, gestes, navigation verticale mobile

Challenge #4 : Engagement Hors Match

• Engager les utilisateurs "entre les deux matchs" (périodes calmes)
• Fournir du contenu pertinent quand il n'y a pas de match en cours
• Créer des routines d'usage quotidiennes même sans événement sportif

Challenge #5 : Conversion Freemium Transparente

• Offrir assez de valeur gratuite pour tester et engager
• Limitations claires sans frustration ("pay-to-win")
• Convertir naturellement vers premium sans être agressif

Design Opportunities

Opportunité #1 : Visualisations Immersives "Storytelling"

• Transformer l'énergie collective en histoire visuelle (vague, progression)
• Créer des moments "Aha !" mémorables et partageables
• Différenciation par rapport aux sites de paris traditionnels (stats chiffres vs storytelling visuel)

Opportunité #2 : Gamification Communautaire Virale

• Classement social, défis entre amis, partage de réussites
• Créer une communauté vs sites de paris solitaires
• Taux de viralité : chaque utilisateur invite ≥ 2 amis (objectif PRD)

Opportunité #3 : Onboarding Progressif Intelligible

• Guidage étape par étape pour novices : "Commençons simple" → "Voyez les détails"
• Récupérer les utilisateurs overwhelmés par des sites concurrents
• Taux d'activation : 80%+ des beta utilisateurs trouvent l'interface "facile à utiliser"

Opportunité #4 : Personnalisation Dynamique Contextuelle

• Dashboard adaptatif : version simplifiée pour novices, mode expert pour avancés
• Une seule app pour différents niveaux d'expertise
• Rétention à long terme (l'app grandit avec l'utilisateur)

Opportunité #5 : Notifications Intelligentes Non-Intrusives

• Alertes pertinentes uniquement (match important + énergie inattendue)
• Contrebalance avec apps sportives spammeuses
• Engagement sans frustrer les utilisateurs

---

Core User Experience

Defining Experience

L'expérience cœur de Chartbastan est centrée sur une interaction unique : la consultation rapide et intuitive d'une prédiction de match. Pour l'utilisateur cible (novice, mobile-first), cette action doit être complètement sans effort et prendre moins de 3 secondes (ouvrir l'app → voir la prédiction → comprendre le niveau de confiance).

Le Flow Cœur Idéal :

Ouvrir l'app (PWA installée sur mobile) →
Match important s'affiche instantanément →
Confidence Meter visible en 0.5s →
Couleur intuitive (🟢🟡🔴) + Tooltip explicatif →
Décision prise en un coup d'œil

L'application n'est PAS un outil de paris en soi, mais un assistant de prédiction basé sur l'énergie collective des supporters. L'utilisateur ne "parie pas" dans l'app, il consulte une prédiction qu'il peut ensuite utiliser sur sa plateforme de paris préférée.

Platform Strategy

Plateforme Principale : Progressive Web App (PWA) Mobile-First

Choix : PWA (vs Native App) pour Phase 1 :

• Budget Phase 1 (10-20€/mois) : PWA = 0€ (inclus avec Next.js), Native = ~10,000€+ (iOS + Android)
• Performance : Instant load, fonctionne offline partiellement, cache local
• Distribution : Installable depuis le navigateur, PAS besoin d'App Store ni de review
• Mises à jour : Déploiement instantané (vs 3-7 jours de review App Store)
• SEO : Indexable par Google (bonus acquisition organique)

Transition à Native App : Phase 2+ (5,000+ utilisateurs actifs)

• Pour push notifications natives (iOS/Android)
• Pour accès aux capteurs (haptique, camera, biometrics)
• Pour intégration système (widgets, shortcuts)

Desktop Complémentaire :

• Responsive web app qui s'adapte automatiquement
• Priorité : Mobile UX → Desktop UX (non l'inverse)
• Utilisation secondaire (15-20% du trafic en Phase 1)

Capacités PWA Exploitées :

• Installation "Add to Home Screen" (expérience quasi-native)
• Offline partial (historique, prédictions sauvegardées)
• Background sync (notifications push via Service Workers)
• Responsive images + lazy loading (performance mobile)

Effortless Interactions

Basé sur les tendances UX 2025-2026 et l'analyse des sites de paris, voici les interactions qui doivent être complètement sans effort pour l'utilisateur :

#1 : Ouverture Instantanée + Vue Prédiction

• Actuel : Sur les sites de paris, ouvrir l'app → login → navigation → trouver le match = 10-20s
• Cible Chartbastan : Ouvrir l'app → prédiction visible = 2-3s maximum
• Comment : Pas de login obligatoire, match principal affiché automatiquement, navigation minime
• Micro-interaction : Animation légère lors du chargement (progress bar subtile)

#2 : Compréhension Intuitive du Confidence Meter

• Problème : "78% de confiance" est concept abstrait pour un novice
• Solution Chartbastan :
  • Couleur intuitive : 🟢 (>70%) / 🟡 (50-70%) / 🔴 (<50%)
  • Tooltip simple au tap : "Sur 100 matchs avec ce score, 78 ont été prédits correctement"
  • Contexte visuel : Mini-graphique montrant l'historique de confiance sur 24h
• Interaction : Tap pour voir les détails → 0 friction

#3 : Partage de Réussite en 2 Taps

• Scénario : Utilisateur gagne grâce à une prédiction → veut partager
• Expérience Chartbastan :
  • Écran de résultat : "Prédiction : PSG 78% → Résultat : 3-0 ✅ GAGNÉ !"
  • Bouton "Partager" visible (bas de l'écran, accessible au pouce)
  • Format pré-rempli : "J'ai gagné grâce à Chartbastan ! 🏆 [image générée]"
  • Destinations : WhatsApp, Twitter, Facebook (les 3 utilisés pour virale)
• Micro-interaction : Animation de succès + haptic feedback (vibration légère)

#4 : Navigation One-Thumb Zone

• Problème : Apps avec menu hamburger, navigation complexe = frustration mobile
• Solution Chartbastan : Barre de navigation en bas de l'écran
  • 4 onglets max : Accueil | Matchs | Historique | Profil
  • Chaque onglet atteignable en 1 tap depuis l'écran principal
  • Icônes compréhensibles (pas de texte abrégé)
• Gestes : Swipe gauche/droite entre onglets, pull-to-refresh sur écrans
• Design : Zone de clic min 44x44px (Apple HIG) / 48x48px (Material Design)

#5 : Onboarding Progressif Non-Intrusif

• Problème : Onboarding obligatoire de 5 écrans = taux d'abandon 60%+
• Solution Chartbastan : Onboarding optionnel en 3 étapes
  1. "Comment ça marche ?" → Animation visuelle de l'énergie collective (vague, progression)
  2. "Comprendre les prédictions" → Démonstration interactive du Confidence Meter
  3. "Votre premier match" → Guidage pour voir une prédiction
• UX : Bouton "Passer" visible sur chaque écran (peut être consulté plus tard dans Paramètres)
• Micro-interaction : Progress bar au haut de l'écran (1/3, 2/3, 3/3)

Critical Success Moments

Ces moments déterminent le succès ou l'échec de l'expérience utilisateur :

Moment #1 : Premier "Aha !" (Confiance Immédiate)

• Scénario : Utilisateur voit une prédiction → suit la prédiction → elle est CORRECTE
• Expérience requise :
  • Notification push : "🏆 Votre prédiction PSG 78% est CONFIRMÉE ! Score final : 3-0"
  • Badge de confiance dans l'app : "Précision personnelle : 1/1 (100%)"
  • Visualisation du succès : Comparaison Prédiction vs Réel (side-by-side)
• Échec critique : Si la prédiction est mauvaise, l'utilisateur peut ne jamais revenir
  • Mitigation : Montrer le taux de réussite global (ex: "Ce score a 67% de précision historique")
• Objectif PRD : 80%+ des utilisateurs retournent dans les 7 jours après première consultation réussie

Moment #2 : Onboarding Novice (Désamorcer la Frustration)

• Scénario : Premier utilisateur novice ouvre l'app, complètement perdu
• Expérience requise :
  • Écran d'accueil avec message : "Bienvenue ! Voici les prédictions pour ce soir"
  • Premier match visible avec Confidence Meter clair
  • Bouton "?" visible → Ouvre l'onboarding optionnel
  • Texte explicatif en bas : "Tap sur le match pour voir les détails"
• Échec critique : Utilisateur ferme l'app après 10s sans comprendre
• Objectif PRD : 80%+ des beta utilisateurs trouvent l'interface "facile à utiliser"

Moment #3 : Conversion Freemium (Sans Frustration)

• Scénario : Utilisateur gratuit atteint la limite (2 prédictions/jour)
• Expérience requise :
  • Upsell subtil, PAS agressif
  • Modal contextuel : "Voir plus de prédictions ? Passez Premium pour 19.99€/mois"
  • Montrez la valeur : "Vous avez 67% de réussite → Premium vous donne +50 prédictions/jour + métriques détaillées"
  • Bouton "Peut-être plus tard" (disparait temporairement)
• Échec critique : Utilisateur supprime l'app frustré par les limitations
• Objectif PRD : Taux de conversion gratuit → premium > 5% après 30 jours

Moment #4 : Échec Système (Gérer la Frustration)

• Scénario : API Twitter rate limit dépassé (incident Sophie dans PRD)
• Expérience requise :
  • Transparence totale : Bandière en haut : "⚠️ Données Twitter temporairement indisponibles"
  • Mode dégradé fonctionnel : Prédictions basées sur Reddit + RSS (confiance réduite : 58% vs 67%)
  • Estimation de durée : "Retour prévu dans ~15 minutes"
  • Bouton "En savoir plus" → Explique la cause technique simplement
• Échec critique : Utilisateur pense l'app est "cassée" ou "un scam"
• Objectif PRD : Uptime > 99.5%, incidents gérés avec transparence

Moment #5 : Première Réussite de Prédiction - Moment "Aha !"

• Scénario : Utilisateur voit une prédiction → suit la prédiction → elle est CORRECTE
• Expérience requise :
  • Notification push festive : "🏆 Votre prédiction PSG 78% est CONFIRMÉE ! Score final : 3-0"
  • Visualisation side-by-side : Prédiction (78%) vs Réel (3-0)
  • Badge personnel : "Précision : 100% (1/1) 🌟"
  • Bouton "Partager" pré-rempli : "J'ai gagné grâce à Chartbastan ! 🏆"
  • Animation de succès + haptic feedback (vibration légère)
• Objectif PRD : 80%+ des utilisateurs retournent dans les 7 jours

Moment #6 : Conversion Freemium (Limite atteinte) - Upsell

• Scénario : Utilisateur gratuit atteint la limite (2 prédictions/jour)
• Expérience requise :
  • Upsell subtil, PAS agressif
  • Modal contextuel : "Voir +50 prédictions/jour ? Passez Premium pour 19.99€/mois"
  • Montrez la valeur : "Vous avez 67% de réussite → Premium vous donne métriques détaillées + historique complet"
  • Bouton "Peut-être plus tard" visible (disparait temporairement)
  • Publicités premium visibles mais non intrusives
• Objectif PRD : Taux de conversion > 5% après 30 jours

Experience Principles

Ces principes guideront toutes les décisions UX pour Chartbastan :

Principe #1 : Simplicité Absolue pour le Novice

• Manifestation : Interface épurée, hiérarchie visuelle forte, espace blanc généreux
• Règle : Pas de jargon technique sans explication contextuelle
• Métrique : Chaque action possible en 1-3 taps maximum
• Anti-pattern : Écrans surchargés, navigation complexe, onboarding obligatoire

Principe #2 : Performance & Rapidité (Mobile-First)

• Manifestation : Load time < 2s sur 3G, transitions fluides à 60fps
• Règle : Feedback visuel immédiat (micro-interactions) sur chaque action
• Métrique : Time-to-value < 3s (ouvrir → voir la prédiction → comprendre)
• Anti-pattern : Loaders lents, transitions saccadées, absence de feedback

Principe #3 : Transparence & Confiance

• Manifestation : Backtesting visible, explication claire du niveau de confiance, communication transparente des incidents
• Règle : Montrer le "pourquoi" (ex: "78% de confiance = sur 100 matchs, 78 corrects")
• Métrique : Taux de rétention 7 jours > 30% (indicateur de confiance)
• Anti-pattern : "Boîte noire" (algorithme opaque), silence sur incidents, promesses non étayées

Principe #4 : Personnalisation Intelligente

• Manifestation : Dashboard adaptatif (version novice → version expert), suggestions basées sur l'historique
• Règle : L'app s'adapte progressivement à l'utilisateur (apprend ses préférences)
• Métrique : Taux de conversion novice → expert > 15% (indicateur de progression)
• Anti-pattern : Interface statique, suggestions non pertinentes, UX "one-size-fits-all"

Principe #5 : Gamification Équilibrée

• Manifestation : Badges et classements pour engagement, partage viral des réussites
• Règle : Gamification sans FOMO excessif, options de désactivation
• Métrique : Taux de viralité ≥ 2 (chaque utilisateur invite ≥ 2 amis)
• Anti-pattern : Notifications spammeuses, FOMO forcé, gamification intrusive

Principe #6 : Design Accessible & Inclusif

• Manifestation : Typographie lisible, contraste élevé, zone de clic adaptée au pouce
• Règle : Dark mode par défaut, support screen reader, textes ajustables
• Métrique : WCAG 2.1 AA compliance (contraste minimum 4.5:1)
• Anti-pattern : Textes illisibles, contrastes faibles, zone de clic trop petite

---

Desired Emotional Response

Primary Emotional Goals

Basé sur les directives du propriétaire et l'analyse des meilleures pratiques 2025-2026 pour les sites de paris, Chartbastan vise à créer une réponse émotionnelle unique centrée sur l'enthousiasme immédiat combiné à une confiance absolue.

#1 : Enthousiasme Immédiat (0-5 secondes)

• Objectif : L'utilisateur doit être accroché visuellement dès l'arrivée
• Manifestation UX :
  • Hero section dynamique, moderne et professionnelle (pas l'impression d'un "site amateur")
  • Promesse claire : "Voyez ce que les supporters pensent vraiment grâce à l'énergie collective"
  • CTA évident : "Voir les prédictions du jour"
  • Contraste concurrentiel : Les sites de paris sont souvent overwhelm et statiques → Chartbastan est dynamique mais PAS chaotique

#2 : Confiance Absolue (Éliminer Toute Méfiance)

• Objectif : Signaux de confiance visibles et immédiats (0 méfiance)
• Manifestation UX :
  • Badges de sécurité en premier pli : SSL, chiffrement, certifications
  • Mentions légales accessibles et claires (RGPD, conditions)
  • Support client 24/7 visible (même pour utilisateurs non-inscrits)
  • Transparence totale : pas de "petits caractères" trompeurs, conditions explicites
  • Backtesting visible : Preuve que l'algorithme fonctionne vraiment
• Contraste concurrentiel : L'industrie du betting souffre de méfiance → Chartbastan est transparent et professionnel

#3 : Sécurité & Crédibilité (Face à la Publicité)

• Contexte critique : Le site contiendra beaucoup de publicités (sites de paris partenaires)
• Objectif : La publicité est présente MAIS bien gérée, renforçant la crédibilité
• Manifestation UX :
  • Jamais intrusive sur l'action cœur (consultation de prédiction)
  • Clairement identifiée comme "Sponsorisé" ou "Publicité" (0 ambiguïté)
  • Qualité contrôlée : Partenaires crédibles uniquement, pas de pubs douteuses
  • Placement réfléchi : Bannières en haut/bas, sidebar sur desktop (pas d'interstitiels sur l'action cœur)
  • Contrôle utilisateur : Possibilité de fermer/masquer les pubs
• Contraste concurrentiel : Les sites avec pubs envahissantes perdent la confiance → Chartbastan gère les pubs intelligemment

#4 : Clarté & Contrôle (UX Novice)

• Objectif : Le novice sent "Je comprends tout, je ne suis pas perdu"
• Manifestation UX :
  • Chaque élément expliqué simplement, pas de jargon sans contexte
  • Contrôle total : l'utilisateur sait ce qui est contenu fonctionnel vs publicité
  • Hiérarchie visuelle forte : Contenu prioritaire, pubs secondaires
• Contraste concurrentiel : Les sites de paris sont overwhelms → Chartbastan est clair et organisé

Emotional Journey Mapping

Moment 1 : Découverte (0-10s) - Première Impression

• Émotion ciblée : Curiosité → Enthousiasme → Confiance
• Manifestation UX :
  • Hero section visuelle dynamique (image de supporters en énergie, progression de vague)
  • Signaux de confiance en premier pli (pas besoin de scroller pour les voir)
  • Promesse claire en headline : "Prédictions basées sur l'énergie collective des supporters"
  • CTA évident : "Voir les prédictions du jour"
  • Publicité en arrière-plan, PAS sur le hero
• Métrique de succès : Taux de rebond < 40% (indicateur de confiance immédiate)

Moment 2 : Première Consultation (10-30s) - Action Cœur

• Émotion ciblée : Confiance → Clarté → Excitation
• Manifestation UX :
  • Confidence Meter visible en 0.5s (couleur intuitive 🟢🟡🔴)
  • Tooltip explicatif simple au tap : "Sur 100 matchs, 78 ont été prédits correctement"
  • Pas de jargon (ex: "Sentiment" vs "Algorithme de pondération temporelle")
  • Publicité en arrière-plan, pas sur le match principal
  • Mini-graphique historique sur 24h pour contexte
• Métrique de succès : Time-to-value < 3s (ouvrir → voir → comprendre)

Moment 3 : Utilisation Récurrente (Jours suivants) - Habitude

• Émotion ciblée : Habitude → Confiance accrue → Engagement
• Manifestation UX :
  • Dashboard personnalisé (matchs favoris en premier)
  • Notifications pertinentes uniquement (matchs importants, changements d'énergie inattendue)
  • Progression visible : "Précision personnelle : 67% (5/7 correctes)"
  • Publicité adaptée au comportement utilisateur (pas de pubs répétitives)
• Métrique de succès : DAU/MAU > 20% (engagement régulier)

Moment 4 : Incident Système (Ex: API Twitter down) - Tolérance

• Émotion ciblée : Compréhension → Tolérance → Confiance maintenue
• Manifestation UX :
  • Transparence totale : Bandière explicative en haut "⚠️ Données Twitter temporairement indisponibles"
  • Mode dégradé fonctionnel : Prédictions basées sur Reddit + RSS (confiance réduite : 58% vs 67%)
  • Estimation de durée claire : "Retour prévu dans ~15 minutes"
  • Bouton "En savoir plus" → Explique la cause technique simplement
• Métrique de succès : Taux de rétention post-incident > 80% (confiance maintenue)

Moment 5 : Première Réussite de Prédiction - Moment "Aha !"

• Émotion ciblée : Excitation → Accomplissement → Viralité
• Manifestation UX :
  • Notification push festive : "🏆 Votre prédiction PSG 78% est CONFIRMÉE ! Score final : 3-0"
  • Visualisation side-by-side : Prédiction (78%) vs Réel (3-0)
  • Badge personnel : "Précision : 100% (1/1) 🌟"
  • Bouton "Partager" pré-rempli : "J'ai gagné grâce à Chartbastan ! 🏆"
  • Animation de succès + haptic feedback (vibration légère)
• Métrique de succès : 80%+ des utilisateurs retournent dans les 7 jours

Moment 6 : Conversion Freemium (Limite atteinte) - Upsell

• Émotion ciblée : Compréhension → Décision → Sans frustration
• Manifestation UX :
  • Upsell subtil, PAS agressif
  • Modal contextuel : "Voir +50 prédictions/jour ? Passez Premium pour 19.99€/mois"
  • Montrez la valeur : "Vous avez 67% de réussite → Premium vous donne métriques détaillées + historique complet"
  • Bouton "Peut-être plus tard" visible (disparait temporairement)
  • Publicités premium visibles mais non intrusives
• Métrique de succès : Taux de conversion > 5% après 30 jours

Micro-Emotions

Confiance vs. Confusion

• Objectif : 100% Confiance, 0% Confusion
• Manifestation UX :
  • Confidence Meter avec contexte clair (pas juste "78%" sans explication)
  • Tooltip simple au premier tap : "Sur 100 matchs, 78 ont été prédits correctement"
  • Publicité clairement distinguée du contenu (fond subtil + texte "Sponsorisé")
  • Chaque terme technique expliqué en tooltip simple
• Anti-pattern à éviter : Terms non expliqués, ambiguïté pub/contenu

Excitation vs. Anxiété

• Objectif : Excitation contrôlée, PAS Anxiété
• Manifestation UX :
  • Pas de compteurs régénératifs (ex: "Plus que 2 prédictions aujourd'hui !")
  • Pas de FOMO forcé (ex: "Offre expire dans 30 secondes !")
  • Notifications positives (réussites) PAS négatives (warnings constants)
  • Progression visuelle positive (ex: "Précision : 67%")
• Anti-pattern à éviter : Gamification toxique, FOMO excessif

Accomplissement vs. Frustration

• Objectif : Accomplissement maximal, Frustration minimale
• Manifestation UX :
  • Feedback visuel immédiat sur chaque action (bouton pressé, chargé, succès)
  • Pas de formulaires longs ou complexes (inscription en 2-3 étapes)
  • Messages d'erreur constructifs : "Email invalide" vs "Erreur 500"
  • Progress bar pour actions longues (ex: "Analyse en cours... 75%")
• Anti-pattern à éviter : Feedback absent, erreurs cryptiques, formulaires infinis

Appartenance vs. Isolement

• Objectif : Appartenance à la communauté, PAS Isolement
• Manifestation UX :
  • Classement social visible : "Top 100 Prophètes"
  • Partage de réussites facilité (bouton pré-rempli)
  • Communauté visible : "5,234 utilisateurs actifs aujourd'hui"
  • Badges et défis entre amis
• Anti-pattern à éviter : Expérience solitaire, aucune communauté visible

Design Implications

Stratégie de Publicité Intelligente (Critique pour Confiance)

Placement Réfléchi :

• Bannière haute : 100% largeur, hauteur max 90px, bouton X visible
• Sidebar (desktop) : Largeur max 300px, contenu secondaire
• Interstitiels : INTERDIT sur l'action cœur (consultation de prédiction)
• Modaux publicitaires : Jamais sur les 10 premières secondes (respect du "first impression")
• Règle d'or : Publicité ne doit JAMAIS couvrir le Confidence Meter ou l'action principale

Qualité des Pubs :

• Partenaires crédibles uniquement : Marques connues liées au sport/paris/betting
• Créatifs propres : Pas de pubs pixellisées, floues, douteuses
• Contenu pertinent : Lié au contexte (sport, paris, gaming, tech)
• Discrimination visuelle : Fond subtil (#F8F9FA) + texte "Sponsorisé" en gris (#6C757D)

Contrôle Utilisateur :

• Fermeture possible : Bouton X visible sur chaque bannière (zone de clic min 44x44px)
• Limite de fréquence : Pas de même pub à chaque refresh (max 1x/heure)
• Mode réduit : Option dans paramètres ("Réduire les publicités" / "Moins de pubs")
• Feedback utilisateur : "Cette pub est pertinente ?" → apprentissage pour affichage

Intégration UI :

• Publicité ≠ Contenu : Hiérarchie visuelle forte (contenu prioritaire, pubs secondaires)
• Contraste : Fond subtil pour ne pas fatiguer les yeux (pas de blanc éblouissant en mode sombre)
• Animation : Pas de GIFs agressifs, transitions douces (duration 300ms)
• Dark mode : Pubs adaptées (pas de blanc éblouissant, respect du thème)

Implications pour le Confidence Meter :

• Couleur intuitive : 🟢 (>70%) / 🟡 (50-70%) / 🔴 (<50%)
• Contexte immédiat : Tooltip au premier tap, PAS besoin d'aller ailleurs
• Historique visible : Mini-graphique montrant l'évolution sur 24h
• Comparaison : "Prédiction : 78% vs Moyenne : 65%" (contexte)

Implications pour les Signaux de Confiance :

• Premier pli : Badges SSL, licences, support visible SANS scroller
• Backtesting : Tableau visible sur landing page ("Sur 100 matchs historiques, 63% de précision")
• Preuve sociale : "5,234 utilisateurs actifs" + testimonials récents
• Transparence incidents : Bandière explicative + mode dégradé visible

Emotional Design Principles

Principe #1 : Première Impression = Confiance

• Règle : Signaux de confiance visibles en premier pli (pas besoin de scroller)
• Manifestation : Badges sécurité + backtesting + support visible dans hero section
• Métrique : Taux de rebond < 40% (indicateur de confiance immédiate)
• Anti-pattern : Design amateur, absence de mentions légales, publicités envahissantes dès l'arrivée

Principe #2 : Transparence Totale (Publicité Incluse)

• Règle : Chaque élément sponsorisé est clairement identifié, sans ambiguïté
• Manifestation : Fond subtil + texte "Sponsorisé", bouton X sur chaque pub
• Métrique : Taux de clic sur publicités < 15% du trafic total (indicateur de non-intrusivité)
• Anti-pattern : Publicités trompeuses, "sponsored content" masqué, popups impossibles à fermer

Principe #3 : Enthousiasme Soutenu (Pas Overwhelm)

• Règle : Design énergique mais PAS chaotique, hiérarchie visuelle forte
• Manifestation : Hero dynamique + espace blanc généreux + écrans épurés
• Métrique : Time-to-value < 3s (voir la prédiction → comprendre)
• Anti-pattern : Écrans surchargés, animations excessives, trop d'informations

Principe #4 : Respect du Novice (Zero Jargon)

• Règle : Chaque terme technique a une explication contextuelle simple
• Manifestation : Tooltips au tap, onboarding optionnel, terminologie simple
• Métrique : 80%+ des utilisateurs trouvent l'interface "facile à utiliser"
• Anti-pattern : Jargon non expliqué, formulaires complexes, onboarding obligatoire

Principe #5 : Contrôle Utilisateur (Autonomie)

• Règle : L'utilisateur peut fermer/masquer les publicités, limiter les notifications
• Manifestation : Bouton X sur chaque pub, option "Moins de pubs", désactivation notifications
• Métrique : Taux de désabonnement < 20% (indicateur de respect)
• Anti-pattern : Publicités impossibles à fermer, notifications spammeuses, absence de contrôle

Principe #6 : Confiance par Transparence (Surtout avec Publicité)

• Règle : La publicité gérée intelligemment renforce la crédibilité
• Manifestation : Partenaires crédibles, qualité contrôlée, placement réfléchi
• Métrique : Taux de plaintes sur publicités < 5% (indicateur de bonne gestion)
• Anti-pattern : Pubs douteuses, placement intrusif, absence de contrôle utilisateur

---

UX Pattern Analysis & Inspiration

Inspiring Products Analysis

Basé sur l'analyse des meilleures applications de paris sportifs et mobile UX en 2025-2026, voici les produits qui inspirent notre design pour Chartbastan.

Bet365 - Navigation Simplifiée Leaders des paris sportifs avec navigation intuitive et live betting optimisé.

• Navigation claire : Onglets logiques (In-Play, Upcoming, Sports) accessibles en 1 tap
• Live betting fluide : Scores et cotes mis à jour en temps réel sans rechargement
• Bet-slip fixe : Accessible depuis n'importe quel écran, pas de navigation perdue
• Filtres efficaces : Recherche rapide par sport, ligue, équipe

Unibet - Confiance & Sécurité Focus sur la transparence et la sécurité pour maximiser la confiance des utilisateurs.

• Signaux de confiance visibles : Licences, certifications, mentions légales en premier pli
• Transparence des paiements : Frais visibles, délais clairs, historique accessible
• Support 24/7 accessible : Live chat visible sur tous les écrans, même pour non-inscrits
• Politiques claires : Conditions, confidentialité, jeu responsable bien affichées

William Hill - Mobile-First Interface optimisée pour mobile avec gestes tactiles et navigation one-thumb.

• Zone de clic adaptée : Boutons min 44x44px (Apple HIG) / 48x48px (Material Design)
• Navigation basse : Barre de navigation en bas de l'écran (accessible au pouce)
• Gestes intuitifs : Swipe entre onglets, pull-to-refresh, swipe-to-dismiss
• Performance mobile : Load time < 2s sur 3G, animations fluides à 60fps

Tinder - Swipe Navigation Navigation par swipe intuitive et engagement micro-interactif.

• Swipe intuitif : Gauche/droite pour décider, pas de clics multiples
• Feedback visuel : Animations de transition fluides, haptic feedback (vibration)
• Action rapide : 1 décision en 1 swipe, pas de menus complexes
• Engagement : Micro-interactions créent l'habitude de revenir

Spotify - Navigation Tab Navigation par onglets avec découverte progressive et contenu personnalisé.

• Onglets logiques : Accueil | Recherche | Bibliothèque | Profil (clairs et constants)
• Personnalisation : Contenu adapté à l'historique et aux préférences utilisateur
• Découverte progressive : Onboarding optionnel, pas forcé
• Dark mode natif : Adaptation automatique jour/nuit

Instagram - Story & Feed Engagement viral, partage social, contenu visuel éphémère.

• Stories éphémères : Contenu qui disparaît en 24h → anticipation/urgence
• Partage facilité : 1 tap pour partager vers multiples plateformes
• Contenu visuel : Photos/vidéos prioritaires, texte secondaire
• Gamification légère : Badges, likes, commentaires créent communauté

Insight Clé Les meilleures applications combinent navigation simplifiée, confiance transparente, et engagement micro-interactif. Chartbastan doit s'inspirer de ces patterns tout en restant unique (prédiction par énergie collective).

Unicité L'approche "prédiction par énergie collective des supporters" combinée avec cette UX éprouvée différenciera Chartbastan des sites de paris traditionnels (stats chiffres vs storytelling visuel).

Transferable UX Patterns

Basé sur l'analyse des apps inspirantes, voici les patterns que nous pouvons adapter pour Chartbastan.

Navigation Patterns:

Bottom Navigation Bar (Mobile-First) Barre de navigation en bas de l'écran, accessible au pouce. 4-5 onglets max.

• Adaptation Chartbastan : Accueil | Matchs | Historique | Profil
• Source : William Hill, Spotify

Fixed Bet-Slip / Action Bar Composant fixe accessible depuis tous les écrans, montre l'action principale (parier, partager).

• Adaptation Chartbastan : "Voir les prédictions" ou "Partager cette réussite" en bas fixe
• Source : Bet365

Tab Navigation (Consistante) Onglets logiques et constants sur tous les écrans, pas de menus hamburger complexes.

• Adaptation Chartbastan : Matchs À Venir | En Direct | Favoris | Tous
• Source : Spotify

Interaction Patterns:

Swipe-to-Navigate (Décision Rapide) Swipe gauche/droite pour naviguer ou décider, pas de clics multiples.

• Adaptation Chartbastan : Swipe entre matchs précédents/suivants dans l'historique
• Source : Tinder

Tap-to-Tooltip (Contexte Simplifié) Tap sur élément pour voir détail contextuel simple, pas de pages séparées.

• Adaptation Chartbastan : Tap sur Confidence Meter → Tooltip "Sur 100 matchs, 78 corrects"
• Source : Bet365

Pull-to-Refresh (Mise à Jour) Tirer vers le bas pour rafraîchir, pas de bouton refresh explicite.

• Adaptation Chartbastan : Pull-to-refresh sur écran Matchs pour voir les dernières prédictions
• Source : Twitter, Instagram

Visual Patterns:

Confidence Colors (Intuitive) Couleurs universelles : Vert (positif/confiance) / Orange (neutre/attention) / Rouge (négatif/erreur).

• Adaptation Chartbastan : Confidence Meter : >70% (vert) / 50-70% (orange) / <50% (rouge)
• Source : Bet365, William Hill

Progress Visualization (Storytelling) Visualisation de progression (vague, timeline) pour montrer évolution historique.

• Adaptation Chartbastan : Graphique d'énergie collective sur 24h montrant montée/descente
• Source : Spotify (progress bar), Instagram (stories)

Micro-Animation (Feedback) Animations subtiles (300ms) pour feedback, transitions, succès.

• Adaptation Chartbastan : Animation de succès quand prédiction confirmée, haptic feedback légère
• Source : Tinder, Instagram

Anti-Patterns to Avoid

Basé sur l'analyse des échecs courants dans l'industrie des paris et des apps mobiles, voici les patterns à absolument éviter.

Onboarding Obligatoire de 5+ Écrans Forcer l'utilisateur à passer par 5+ écrans avant d'accéder au produit. Taux d'abandon : 60%+.

• Alternative : Onboarding optionnel en 3 étapes max, bouton "Passer" visible
• Impact : Perd des utilisateurs potentiels, frustration dès l'arrivée

Publicité Intrusive sur Action Cœur Interstitiels, popups, bannières qui couvrent l'action principale (parier, consulter).

• Alternative : Publicités en haut/bas, sidebar desktop, jamais sur l'action cœur
• Impact : Ruine la confiance, frustration utilisateur, taux de rebond élevé

Jargon Technique Non Expliqué Termes comme "algorithme de pondération temporelle", "coefficient de virale" sans contexte.

• Alternative : Terminologie simple + tooltips explicatifs au premier tap
• Impact : Novice se sent perdu, abandonne l'app

Compteurs Régénératifs (FOMO Forcé) "Plus que 2 prédictions aujourd'hui !", "Offre expire dans 30 secondes !"

• Alternative : Notifications positives (réussites) PAS négatives, pas de FOMO
• Impact : Anxiété, méfiance, taux de désabonnement

Menus Hamburgers Profonds (Navigation Complexe) 3+ niveaux de menus, sous-menus, navigation difficile sur mobile.

• Alternative : Navigation basse (4-5 onglets), tabs constants, hiérarchie plate
• Impact : Navigation frustrante, time-to-value augmenté

Feedback Absent (Silence) Bouton pressé = rien, erreur = "Erreur 500", chargement = loader infini.

• Alternative : Feedback visuel immédiat, messages constructifs, progress bars
• Impact : Confusion, frustration, manque de confiance

Design Sombre/Chaotique (Overwhelm) Trop d'informations, couleurs agressives, animations excessives, pas de hiérarchie.

• Alternative : Interface épurée, espace blanc généreux, hiérarchie visuelle forte
• Impact : Overwhelm, cognitive load élevé, taux de rebond

Design Inspiration Strategy

Stratégie claire pour utiliser l'inspiration tout en gardant Chartbastan unique (prédiction par énergie collective).

Ce que nous devons ADOPTER:

Navigation : Bottom Navigation Bar + Fixed Action Bar + Tab Navigation Supporte notre but de mobile-first, time-to-value < 3s, navigation one-thumb zone

Confiance : Signaux de Sécurité + Transparence Totale + Support Visible Élimine la méfiance (objectif #1), rassure les novices, prouve la crédibilité

Publicité : Placement Réfléchi + Qualité Contrôlée + Transparence "Sponsorisé" Intégration intelligente (pas intrusive) renforce la confiance, pas frustrant

Visuel : Confidence Colors + Progress Visualization + Micro-Animations Supporte l'expérience émotionnelle (enthousiasme, confiance, clarté)

Engagement : Partage Viral + Gamification Légère + Notifications Intelligentes Crée la communauté, encourage la rétention, taux de viralité ≥ 2

Ce que nous devons ADAPTER:

Swipe Navigation (→ Contexte Chartbastan) Adapter le swipe Tinder pour naviguer entre matchs dans l'historique (pas pour les prédictions).

• Pourquoi : Swipe est rapide, mais les prédictions ne sont pas des "matches" à décider instantanément

Story Format (→ Contexte Chartbastan) Adapter l'Instagram Stories pour les "flashbacks" des 24h avant match.

• Pourquoi : Les prédictions sont historiques, pas éphémères comme les stories

Complex Gamification (→ Contexte Chartbastan) Simplifier la gamification (badges, classements) sans FOMO excessif.

• Pourquoi : Chartbastan doit rester sérieux et crédible, pas trop "jeu"

Ce que nous devons ÉVITER:

❌ Onboarding Obligatoire Contraire notre but d'enthousiasme immédiat (0 friction)

❌ FOMO Forcé Contraire notre émotion de sérénité (pas d'anxiété)

❌ Publicité Intrusive Contraire notre principe de confiance via transparence

❌ Jargon Non Expliqué Contraire notre principe de respect du novice (zero jargon)

❌ Feedback Absent Contraire notre principe d'accomplissement (feedback immédiat)

---

Résumé de la Stratégie

Chartbastan adoptera les patterns éprouvés des meilleures applications (Bet365, Unibet, William Hill, Tinder, Spotify, Instagram) tout en restant unique via :

• Mobile-first avec navigation basse, one-thumb zone, gestes intuitifs
• Confiance absolue via signaux de sécurité, transparence totale, support visible
• Publicité intelligente (placement réfléchi, qualité contrôlée, clairement identifiée)
• Visualisation intuitive (couleurs confiance, progress storytelling, micro-animations)
• Engagement viral (partage facilité, gamification légère, notifications pertinentes)

Unicité : L'approche "prédiction par énergie collective des supporters" combinée avec cette UX éprouvée différenciera Chartbastan des sites de paris traditionnels (stats chiffres vs storytelling visuel).

---

Defining Core Experience

1. Core Interaction Identification

L'Interaction Cœur de Chartbastan : Consultation de Prédiction

La seule interaction absolument critique pour Chartbastan est : la consultation rapide et intuitive d'une prédiction de match. Pour l'utilisateur cible (novice, mobile-first), cette action doit être complètement sans effort et prendre moins de 3 secondes (ouvrir l'app → voir la prédiction → comprendre le niveau de confiance).

Pourquoi c'est l'action critique :

• C'est la valeur ajoutée principale que l'outil fournit aux utilisateurs
• Si cette interaction est parfaite (sans friction, compréhensible instantanément), tout le reste suit
• L'utilisateur ne "parie pas" dans l'app - il consulte une prédiction qu'il peut utiliser sur sa plateforme de paris préférée

Critères de Succès de l'Interaction Cœur :

• Time-to-value < 3 secondes (ouvrir → voir la prédiction → comprendre)
• Compréhension immédiate (pas besoin de documentation ou tutoriel)
• Action possible en 1-3 taps maximum sur mobile
• Feedback visuel clair sur chaque action

2. Analyse du Modèle Mental Utilisateur

Comment les utilisateurs pensent actuellement :

Modèle Mental Actuel - Utilisateur de Paris :

Site de paris traditionnel → 
Ouvrir → Login → Chercher le match → Voir les cotes → 
Essayer de comprendre les stats → Décider → Parier

Sentiments :
- Confusion (trop d'information)
- Frustration (navigation complexe)
- Doute (cotes opaques)
- Impression de casino (peut-être manipulé)

Nouveau Modèle Mental - Utilisateur Chartbastan :

Chartbastan (assistant de prédiction) → 
Ouvrir → Voir le match principal avec prédiction → 
Comprendre le niveau de confiance → 
Utiliser l'info selon ses besoins

Sentiments désirés :
- Confiance (algorithme transparent)
- Clarté (interface intuitive)
- Contrôle (je décide comment l'utiliser)
- Intelligence (je me sens plus intelligent)

Insight Clé : Chartbastan doit transformer l'expérience de "parieur frustré" en expérience de "décideur averti".

3. Définition du Flow Cœur Idéal

Le Flow Cœur Idéal pour Chartbastan :

1. Ouvrir l'application (PWA installée sur mobile)
↓
2. Match important s'affiche instantanément
↓
3. Confidence Meter visible en 0.5s
↓
4. Couleur intuitive (🟢🟡🔴) + Tooltip explicatif au tap
↓
5. Mini-graphique historique sur 24h pour contexte
↓
6. Décision prise en un coup d'œil (intuitive)

Caractéristiques du Flow Idéal :

• Aucun login requis (accès immédiat)
• Navigation minimale (pas besoin de chercher)
• Information hiérarchisée (prédiction + contexte, pas surcharge)
• Feedback visuel sur chaque action (animations subtiles 300ms)
• Time-to-value < 3s (objectif UX principal)

4. Mécaniques d'Expérience Détailées

Mécanique #1 : Confidence Meter (Jaugement de Confiance)

Fonctionnalité : Indicateur visuel du niveau de confiance d'une prédiction

Expression : Composant qui montre un pourcentage (ex: 78%) avec code couleur

Couleurs Universelles :

• 🟢 Vert (>70%) : Confiance haute
• 🟡 Orange (50-70%) : Confiance moyenne
• 🔴 Rouge (<50%) : Confiance basse

Comportements UX :

Affichage par défaut :
  - Pourcentage affiché : "78%"
  - Code couleur : 🟢 (vert)

Au tap (interaction utilisateur) :
  - Tooltip apparaît : "Sur 100 matchs avec ce score, 78 ont été prédits correctement"
  - Délai : 200ms (apparition immédiate)
  - Animation : Scale subtile (1.0 → 1.1)
  - Position : Au-dessus du pourcentage

Fermeture automatique :
  - Si utilisateur tap ailleurs : tooltip disparaît
  - Animation : Fade out (300ms)
  - Retour à l'état par défaut

Contexte visuel :
  - Mini-graphique historique sur 24h visible en permanence
  - Comparaison : "Prédiction : 78% vs Moyenne : 65%" (contexte)
  - Progression : Courbe montrant montée/descente de l'énergie collective

Objectif Émotionnel :

• Créer instantanément la confiance sans jargon technique
• Permettre à l'utilisateur de comprendre "POURQUOI" ce pourcentage sans documentation externe
• Rendre le jugement de confiance intuitif (vert = bien, rouge = prudence)

Mécanique #2 : Navigation One-Thumb Zone

Fonctionnalité : Barre de navigation en bas de l'écran mobile accessible au pouce

Expression : 4-5 onglets max avec icônes compréhensibles

Onglets Chartbastan :

• 🏠 Accueil : Matchs du jour, prédictions principales
• ⚽ En Direct : Matchs en cours, données temps réel
• 📊 Historique : Prédictions passées, résultats, ROI personnel
• 👤 Profil : Paramètres, onboarding, préférences

Comportements UX :

Zone de clic adaptée :
  - Boutons min 44x44px (Apple HIG) / 48x48px (Material Design)
  - Zone du pouce : accessible naturellement
  - Feedback visuel : Scale légère au tap (0.95)

Gestes tactiles :
  - Swipe gauche/droite entre onglets (navigation)
  - Pull-to-refresh sur écrans (mise à jour)
  - Swipe-to-dismiss (fermer modals/tooltips)

Navigation constante :
  - Onglets toujours visibles (pas de menu hamburger)
  - Position fixe en bas de l'écran
  - Fond blanc pur (#ffffff) pour contraste optimal

Objectif Émotionnel :

• Permettre une navigation intuitive sans réfléchir
• Rendre chaque écran principal accessible en 1 tap
• Éliminer la frustration liée aux menus hamburger complexes

Mécanique #3 : Partage de Réussite Viral

Fonctionnalité : Capacité pour partager une prédiction réussie avec le réseau social

Expression : Bouton "Partager" qui génère un format pré-rempli avec image et texte

Comportements UX :

Déclenchement :
  - Quand une prédiction se révèle CORRECTE (score final connu)
  - Notification push : "🏆 Votre prédiction PSG 78% est CONFIRMÉE ! Score final : 3-0"
  - Badge dans l'app : "Précision : 100% (1/1) 🌟"

Action utilisateur :
  - Sur écran de résultat : bouton "Partager" visible
  - Au tap : menu partage s'ouvre (WhatsApp, Twitter, Facebook)

Format généré :
  - Texte pré-rempli : "J'ai gagné grâce à Chartbastan ! 🏆 Prédiction : PSG 78% → Résultat : 3-0 ✅"
  - Image générée : Card visuelle montrant prédiction vs résultat
  - CTA : "Obtenez vos prédictions grâce à Chartbastan !"

Feedback visuel :
  - Animation de succès : Particules/confetti sur le bouton
  - Haptic feedback : Vibration légère (150ms) sur mobile
  - Badge animation : Scale 0.0 → 1.2 → 1.0

Contexte viral :
  - "Partagez avec amis pour 1 mois premium GRATUIT !"
  - Badge : "Ambassadeur" si partage réussit ×3

Objectif Émotionnel :

• Créer un moment "Aha !" mémorable et partageable
• Encourager la viralité organique (chaque utilisateur invite ≥ 2 amis)
• Transformer les utilisateurs en ambassadeurs de la marque

Mécanique #4 : Onboarding Progressif Optionnel

Fonctionnalité : Système guidé en 3 étapes pour les nouveaux utilisateurs

Expression : Tutoriels interactifs qui expliquent comment fonctionne Chartbastan

3 Étapes de l'Onboarding :

Étape 1 : "Comment ça marche ?"
  - Animation visuelle de l'énergie collective (vague, progression)
  - Explication simple : "Nous analysons ce que les supporters pensent"
  - Bouton "Suivant" en bas

Étape 2 : "Comprendre les prédictions"
  - Démonstration interactive du Confidence Meter
  - Scénario : "Voici une prédiction à 78% - voyez comment interpréter"
  - Tap sur le pourcentage : Tooltip explicatif
  - Bouton "Suivant" en bas

Étape 3 : "Votre premier match"
  - Guidage pour voir une prédiction du jour
  - Call-to-action : "Voir les prédictions du jour"
  - Bouton "C'est parti !" (optionnel)

Comportements UX :

Onboarding optionnel :
  - Peut être sauté via bouton "Passer"
  - Disponible depuis "?" dans le profil (on-demand)
  - Progress bar : "1/3", "2/3", "3/3" en haut de l'écran

Guidage progressif :
  - Première visite : écrans 1-3 recommandés
  - Utilisateur peut réviser n'importe quand via Profil
  - Pas de forçage (respect du choix utilisateur)

Micro-interactions :
  - Animations fluides (duration 300ms)
  - Feedback visuel : Checkmarks sur étapes complétées
  - Hover effects : Cards lévitement au survol

Objectif Émotionnel :

• Réduire le taux d'abandon (<40% au lieu de 60%+)
• Rendre l'application accessible sans friction pour les novices
• Permettre un apprentissage progressif sans forcer l'onboarding

Mécanique #5 : Feedback Visuel Immédiat

Fonctionnalité : Système de retours visuels sur toutes les actions utilisateur

Expression : Indicateurs (loading, success, error, toast) qui donnent un retour immédiat

Types de Feedback :

1. Loading (Chargement) :
   - Spinner ou progress bar : "Analyse en cours..."
   - Skeleton screens : placeholders visuels pendant chargement
   - Durée estimée : "< 30s" pour donner des attentes réalistes

2. Success (Succès) :
   - Toast notification : "Prédiction enregistrée ✓"
   - Animation : Checkmark apparaît avec scale (0.0 → 1.2)
   - Couleur : Vert (#10b981)
   - Position : Bas de l'écran ou contextuel

3. Error (Erreur) :
   - Toast notification : "Email invalide" (pas générique)
   - Animation : Shake (mobile) + rouge pulse
   - Couleur : Rouge (#ef4444)
   - Message constructif : suggestions de correction (ex: "essayez xyz@exemple.com")

4. System Status (Statut Système) :
   - Bandière en haut pour incidents : "⚠️ Données Twitter temporairement indisponibles"
   - Mode dégradé visible : Prédictions basées sur Reddit + RSS
   - Estimation de durée : "Retour prévu dans ~15 minutes"

5. Action Feedback (Retour Action) :
   - Bouton pressé : Scale (0.95 → 0.9 → 1.0)
   - Ripple effect : Cercle qui s'étend depuis le point de clic
   - Durée : 200ms pour feedback tactile immédiat

Objectif Émotionnel :

• Éliminer la confusion ("ça a marché ?")
• Rassurer l'utilisateur (le système fonctionne)
• Créer une sensation de contrôle et de réactivité

5. Critères de Succès pour l'Interaction Cœur

Ce que signifie "ça marche" pour l'utilisateur :

1. Rapidité : "Je comprends en un coup d'œil"

   • Time-to-value < 3s
   • Aucun chargement perceptible

2. Clarté : "Je sais quoi faire"

   • Aucun jargon
   • CTA évident
   • Feedback immédiat

3. Confiance : "Je crois en cette prédiction"

   • Explication simple du "pourquoi"
   • Contexte historique visible
   • Taux de réussite global affiché

4. Feedback : "Le système fonctionne"

   • Confirmation sur chaque action
   • Messages constructifs
   • Transparence incidents

5. Satisfaction : "C'est utile pour moi"

   • L'utilisateur revient régulièrement
   • Partage avec amis
   • Passe à Premium (si pertinent)

6. Patterns UX vs. Innovation

Quels patterns utiliser vs. quelles innovations introduire :

Patterns Établis (Utiliser les patterns éprouvés) :

• Bottom Navigation Bar (William Hill, Spotify)
• Fixed Action Bar (Bet365)
• Pull-to-Refresh (Twitter, Instagram)
• Tap-to-Tooltip (Bet365)

Innovation dans l'Interaction (Patterns combinés de manière unique) :

• Confidence Meter avec couleurs universelles (🟢🟡🔴)
• Energy Wave Visualization (progression de l'énergie collective sur 24h)
• Match Cards avec contextualisation riche (prédiction + contexte historique)

Patterns à Éviter :

• Onboarding obligatoire de 5+ écrans (anti-pattern)
• Publicité intrusive sur l'action cœur (anti-pattern)
• Jargon technique non expliqué (anti-pattern)
• FOMO forcé (anti-pattern)

7. Stratégie de Démonstration (Onboarding Progressif)

Approche par étapes (sans forcer) :

Étape 1 : Démonstration Simple (Première visite)

• Animation visuelle de l'énergie collective (vague, progression)
• "Regardez comment les supporters influencent les prédictions"
• Bouton "Passer" visible (optionnel)

Étape 2 : Interaction Interactive (Utilisateur actif)

• Démonstration du Confidence Meter
• "Tap sur le pourcentage pour voir l'explication"
• Feedback immédiat : Tooltip apparaît avec explication simple

Étape 3 : Prédiction du Jour (Utilisation réelle)

• Guidage vers la première prédiction
• "Voici la prédiction pour ce soir"
• CTA : "Voir les détails"

Principes :

• Optionnel : Bouton "Passer" sur chaque écran
• On-demand : Disponible depuis le Profil (menu "?")
• Progressif : L'app grandit avec l'utilisateur
• Respect : Pas de forçage, l'utilisateur choisit

---

Visual Design Foundation

Color System

Palette Chartbastan - Option 3: Cool Slate

La palette de couleurs est conçue pour être professionnelle, sobre et moderne, inspirée du style Apple.

Primary Colors (Cool Slate Blue)

• Primary (#0A84FF) : Couleur principale (boutons, CTA, navigation)
• Primary Hover (#0870E6) : État hover des boutons
• Primary Active (#0655CC) : État actif des boutons
• Rationale : Moderne, professionnel, sobre, agréable sans être flashy

Background Colors

• Background (#FFFFFF) : Fond blanc pur
• Surface (#F5F5F7) : Surfaces secondaires (cards, panels)
• Surface Hover (#EBEBED) : État hover des surfaces
• Rationale : Contraste maximal pour lisibilité, fond blanc comme demandé

Text Colors

• Text Primary (#1C1C1E) : Texte principal (presque noir)
• Text Secondary (#6E6E73) : Texte secondaire (gris)
• Text Tertiary (#86868B) : Placeholders, textes désactivés
• Rationale : Hiérarchie claire, lisibilité optimale

Border Colors

• Border (#D1D1D6) : Bordures et diviseurs
• Border Hover (#BCBCBE) : État hover des bordures
• Rationale : Subtilité, non-intrusif

Confidence Colors

• Confidence High : Utilise le primary (#0A84FF) pour confiance >70%
• Confidence Medium : Utilise le text secondary (#6E6E73) pour confiance 50-70%
• Confidence Low : Utilise le border (#D1D1D6) pour confiance <50%
• Rationale : Couleurs sémantiques intuitives, accessibles

Système CSS Variables Toutes les couleurs sont définies via CSS variables dans :root pour modification facile :

• Modification d'une seule variable change automatiquement tous les éléments utilisant cette couleur
• Documentation claire en haut du fichier CSS
• Aucun hardcoding de couleurs dans les composants

Typography System

Font Primaire : Inter (Google Fonts)

Rationale :

• Moderne, lisible, standard dans l'industrie
• Excellent pour UI et applications web
• Supporte tous les caractères nécessaires
• Disponible en tous les weights (300-700)
• Optimal pour mobile (tailles variables)

Font Secondaire : JetBrains Mono (Google Fonts)

Rationale :

• Moderne, lisible pour les données (prédictions, pourcentages)
• Contraste distinctif avec Inter
• Excellent pour les chiffres et métriques

Type Scale (Modular Scale 1.25)

• Display (96px) : Hero section, titres principaux
• H1 (56px) : Section headers
• H2 (48px) : Subsection headers
• H3 (40px) : Card titles, component headers
• H4 (32px) : Sous-titres
• Body (17px) : Texte principal
• Caption (13px) : Labels, descriptions courtes
• Data (JetBrains Mono, 17px) : Chiffres, pourcentages, métriques

Line Heights :

• Tight (1.0-1.1) : For headings
• Normal (1.5-1.6) : For body text
• Relaxed (1.4) : For captions

Letter Spacing :

• Headings : -0.015em à -0.003em (serré pour modernité)
• Body : -0.022em (légèrement serré)
• Captions : 0.06em (espacé pour distinction)

Spacing & Layout Foundation

Spacing System : Base 4px (système 8px)

Rationale :

• 4px base permet des espacements très fins
• Système 8px standard dans l'industrie (Tailwind CSS, Material Design)
• Permet des espacements cohérents et calculables
• Facile à adapter pour mobile-first

Spacing Scale :

• xs: 4px
• sm: 8px
• md: 16px
• lg: 24px
• xl: 32px
• 2xl: 48px
• 3xl: 64px

Spacing Rules :

• Section spacing : 64px (var(--spacing-3xl)) entre sections
• Component spacing : 24px (var(--spacing-lg)) entre composants
• Card padding : 32px (var(--spacing-xl))
• Button padding : 12px horizontal, 28px vertical
• Input padding : 14px horizontal, 20px vertical

Layout Principles :

1. Mobile-First : Layout optimisé pour mobile, responsive pour desktop
2. Grid System : Grid flexible avec auto-fit et minmax
3. Container Widths : Max width 1200px (desktop), 100% (mobile)
4. Spacing : Aéré et spacieux (espace blanc généreux)
5. Consistency : Espacements basés sur le système de 4px/8px

Border Radius :

• sm: 8px
• md: 12px
• lg: 18px
• xl: 24px
• pill: 980px (boutons arrondis)

Transitions :

• Fast: 150ms
• Normal: 200ms
• Slow: 300ms
• Easing: cubic-bezier(0.4, 0, 0.2, 1) (Apple standard)

Shadows :

• sm: 0 2px 8px rgba(0, 0, 0, 0.06)
• md: 0 4px 12px rgba(0, 0, 0, 0.08)
• lg: 0 8px 24px rgba(0, 0, 0, 0.12)

Accessibility Considerations

Contrast Ratios (WCAG 2.1 AA)

• Normal text : Minimum 4.5:1 (tous nos textes respectent ce ratio)
• Large text (18px+) : Minimum 3:1
• UI Components : Minimum 3:1

Font Sizes Minimum

• Body text : 17px (1rem)
• Buttons : 17px minimum
• Inputs : 17px minimum

Touch Targets (Mobile)

• Minimum size : 44x44px (Apple HIG)
• Recommended : 48x48px (Material Design)
• Spacing between targets : Minimum 8px

Focus States

• Visible outline : Border color change + box-shadow
• High contrast : box-shadow avec couleur primary à 15% opacity
• No focus-only interactions (accessible avec keyboard)

Screen Reader Support

• Semantic HTML (proper headings, landmarks)
• ARIA labels where needed
• Alt text for images
• Skip navigation link

---

Design Direction Decision

Design Directions Explored

Quatre directions de design ont été explorées pour Chartbastan, chacune avec une approche différente de la présentation et de l'interaction :

Direction 1: Minimaliste Centré

• Layout épuré avec focus sur l'essentiel
• Information hiérarchisée, espace blanc généreux
• Navigation bottom bar simple
• Cards espacées verticalement
• Confidence Meter en vedette
• Style : Sobre, professionnel, centré

Direction 2: Dashboard Dense

• Layout dense avec beaucoup d'informations visibles
• Grid system 2-3 colonnes sur desktop
• Cards compactes avec métriques détaillées
• Navigation tabs horizontale
• Statistiques visibles en permanence
• Style : Informatif, data-rich, professionnel

Direction 3: Card-First

• Chaque match est une card grande et immersive
• Swipe navigation gauche/droite entre matchs
• Focus sur un match à la fois
• Confidence Meter intégré dans card
• Navigation minimaliste
• Style : Moderne, immersif, mobile-first

Direction 4: List-First

• Liste verticale simple et rapide
• Scan visuel facile, informations essentielles
• Items compacts avec confidence visible
• Pull-to-refresh natif
• Actions rapides (tap pour détails)
• Style : Rapide, efficace, fonctionnel

Chosen Direction

Direction Recommandée : Direction 1 (Minimaliste Centré) + Éléments de Direction 4 (List-First)

Combinaison choisie :

• Layout minimaliste centré (Direction 1) pour clarté et professionnalisme
• Liste verticale simple (Direction 4) pour rapidité de scan
• Navigation bottom bar (Direction 1) pour accessibilité mobile
• Cards espacées mais format liste (hybride)

Pourquoi cette combinaison :

• Clarté maximale : Layout épuré sans surcharge
• Rapidité : Liste verticale permet scan rapide des matchs
• Professionnalisme : Style sobre et fonctionnel
• Mobile-first : Navigation bottom bar accessible au pouce
• Time-to-value < 3s : Information visible immédiatement

Design Rationale

Approche Hybride Minimaliste + Liste :

1. Layout Principal : Liste Verticale Centrée

   • Largeur max 800px pour desktop (centré)
   • Liste scrollable verticale pour mobile
   • Items de match compacts mais lisibles
   • Confidence Meter visible en un coup d'œil

2. Navigation : Bottom Bar (Mobile) + Top Tabs (Desktop)

   • Mobile : Bottom navigation bar (4 onglets)
   • Desktop : Tabs horizontales en haut
   • Navigation constante et accessible

3. Cards : Format Liste avec Détails au Tap

   • Items de liste compacts par défaut
   • Tap pour voir détails (card expand)
   • Swipe-to-dismiss pour actions secondaires
   • Pull-to-refresh pour mise à jour

4. Confidence Meter : Intégré dans Liste

   • Visible directement dans chaque item
   • Couleur sémantique (primary/secondary/border)
   • Tap pour tooltip explicatif
   • Barre de progression subtile

5. Espacement : Généreux mais Efficace

   • Espacement vertical 24px entre items
   • Padding cards 32px
   • Marges sections 64px
   • Équilibre entre aéré et informatif

Implementation Approach

Structure de Layout :

Mobile (320px-768px):
┌─────────────────────┐
│   Header (Matchs)   │
├─────────────────────┤
│                     │
│  Liste Verticale    │
│  - Item Match 1     │
│  - Item Match 2     │
│  - Item Match 3     │
│                     │
├─────────────────────┤
│ Bottom Navigation   │
└─────────────────────┘

Desktop (768px+):
┌─────────────────────────────┐
│  Top Tabs Navigation        │
├─────────────────────────────┤
│                             │
│    Liste Centrée (800px)    │
│    - Item Match 1           │
│    - Item Match 2           │
│    - Item Match 3           │
│                             │
└─────────────────────────────┘

Composants Clés :

1. MatchListItem : Item de liste avec teams, confidence, date
2. ConfidenceMeter : Barre de progression + pourcentage
3. BottomNavigation : 4 onglets (Accueil, Matchs, Historique, Profil)
4. TopTabs : Tabs horizontales pour desktop
5. MatchCard : Card expandable au tap pour détails

Interactions :

• Tap sur item : Expand card avec détails
• Tap sur confidence : Tooltip explicatif
• Swipe left : Action secondaire (partager)
• Pull down : Refresh liste
• Swipe tabs : Navigation entre sections

---

User Journey Flows

Journey 1: Consultation de Prédiction (Journey Principal)

Objectif : Utilisateur consulte une prédiction de match et comprend le niveau de confiance en < 3 secondes.

Persona : Thomas (Parieur Passionné Occasionnel) - Utilisateur Novice

Flow Diagram :

flowchart TD
    A[Ouvrir App PWA] --> B{Première visite?}
    B -->|Oui| C[Onboarding Optionnel]
    B -->|Non| D[Écran Accueil]
    C --> E[Passer ou Suivre]
    E -->|Passer| D
    E -->|Suivre| F[3 Étapes Guidées]
    F --> D
    D --> G[Match Principal Visible]
    G --> H[Confidence Meter 78%]
    H --> I{Tap sur Confidence?}
    I -->|Oui| J[Tooltip Explicatif]
    I -->|Non| K[Voir Détails Match]
    J --> K
    K --> L[Card Expand avec Détails]
    L --> M[Graphique Énergie 24h]
    M --> N[Action Utilisateur]
    N -->|Partager| O[Menu Partage]
    N -->|Fermer| D
    O --> P[WhatsApp/Twitter/Facebook]
    P --> Q[Journey Complété]

Étapes Détaillées :

1. Entry Point : Ouvrir App

   • PWA installée sur mobile
   • Load time < 2s
   • Pas de login requis

2. Onboarding Optionnel (Première Visite)

   • 3 écrans max
   • Bouton "Passer" visible
   • Progress bar 1/3, 2/3, 3/3

3. Écran Accueil

   • Match principal affiché automatiquement
   • Liste verticale des autres matchs
   • Bottom navigation visible

4. Confidence Meter Visible

   • Pourcentage affiché (ex: 78%)
   • Couleur sémantique (primary/secondary/border)
   • Barre de progression subtile

5. Interaction Tooltip

   • Tap sur confidence → Tooltip apparaît
   • Explication simple : "Sur 100 matchs, 78 corrects"
   • Fermeture auto si tap ailleurs

6. Détails Match (Card Expand)

   • Tap sur item → Card expand
   • Graphique énergie 24h
   • Historique de confiance
   • Actions : Partager, Fermer

7. Action Partager

   • Bouton "Partager" visible
   • Menu native (WhatsApp, Twitter, Facebook)
   • Format pré-rempli

Optimisations :

• Time-to-value < 3s (objectif principal)
• Aucun login requis
• Navigation minimale
• Feedback visuel immédiat

Journey 2: Premier "Aha!" Moment (Prédiction Confirmée)

Objectif : Utilisateur voit une prédiction confirmée et ressent le moment "Aha!" qui crée la confiance.

Persona : Thomas (Parieur Passionné Occasionnel)

Flow Diagram :

flowchart TD
    A[Match en Cours] --> B[Prédiction Affichée 78%]
    B --> C[Utilisateur Consulte]
    C --> D[Match Se Déroule]
    D --> E{Score Final Connu}
    E -->|Prédiction Correcte| F[Notification Push]
    E -->|Prédiction Incorrecte| G[Pas de Notification]
    F --> H[Ouvrir App]
    H --> I[Écran Résultat]
    I --> J[Visualisation Side-by-Side]
    J --> K[Prédiction 78% vs Réel 3-0]
    K --> L[Badge Personnel 100%]
    L --> M[Animation Succès]
    M --> N[Partage Pré-rempli]
    N --> O{Partager?}
    O -->|Oui| P[Menu Partage]
    O -->|Non| Q[Retour Accueil]
    P --> R[Viralité Organique]
    R --> Q
    Q --> S[Journey Complété]

Étapes Détaillées :

1. Match en Cours

   • Prédiction affichée avec confidence 78%
   • Utilisateur consulte et utilise l'info

2. Score Final Connu

   • API détecte score final
   • Vérification : Prédiction correcte?

3. Notification Push (Si Correcte)

   • "🏆 Votre prédiction PSG 78% est CONFIRMÉE ! Score final : 3-0"
   • Haptic feedback (vibration légère)
   • Badge dans l'app

4. Écran Résultat

   • Visualisation side-by-side
   • Prédiction (78%) vs Réel (3-0)
   • Badge personnel : "Précision : 100% (1/1) 🌟"

5. Animation Succès

   • Particules/confetti subtiles
   • Scale animation (0.0 → 1.2 → 1.0)
   • Durée : 300ms

6. Partage Pré-rempli

   • Bouton "Partager" visible
   • Format : "J'ai gagné grâce à Chartbastan ! 🏆"
   • Image générée automatiquement

7. Viralité Organique

   • Partage vers WhatsApp/Twitter/Facebook
   • CTA : "Obtenez vos prédictions grâce à Chartbastan !"
   • Badge "Ambassadeur" si partage ×3

Optimisations :

• Moment mémorable et partageable
• Feedback positif immédiat
• Encouragement viralité
• Pas de notification si prédiction incorrecte (éviter frustration)

Journey 3: Conversion Freemium (Limite Atteinte)

Objectif : Utilisateur gratuit atteint la limite (2 prédictions/jour) et convertit vers Premium sans frustration.

Persona : Marie (Parieuse Sérieuse)

Flow Diagram :

flowchart TD
    A[Utilisateur Gratuit] --> B[Consulte 2 Prédictions]
    B --> C[Limite Atteinte]
    C --> D[Modal Contextuel]
    D --> E[Upsell Subtil]
    E --> F{Montrer Valeur}
    F --> G[67% Réussite → Premium]
    G --> H{Décision Utilisateur}
    H -->|Premium| I[Page Paiement]
    H -->|Plus Tard| J[Modal Disparaît]
    I --> K[Paiement 19.99€/mois]
    K --> L[Accès Premium]
    L --> M[Dashboard Avancé]
    M --> N[+50 Prédictions/jour]
    N --> O[Journey Complété]
    J --> P[Retour Accueil]
    P --> Q[Modal Réapparaît Plus Tard]
    Q --> H

Étapes Détaillées :

1. Limite Atteinte

   • Utilisateur consulte 2ème prédiction
   • Message : "Vous avez atteint votre limite quotidienne"

2. Modal Contextuel

   • Upsell subtil, PAS agressif
   • Timing : Après 2ème prédiction
   • Design : Modal centré, fond légèrement assombri

3. Montrer Valeur

   • "Vous avez 67% de réussite"
   • "Premium vous donne +50 prédictions/jour"
   • "Métriques détaillées et analyses avancées"
   • "19.99€/mois - Moins qu'un mauvais pari"

4. Décision Utilisateur

   • Bouton "Passer à Premium" (primary)
   • Bouton "Peut-être plus tard" (secondary)
   • Pas de forçage

5. Paiement (Si Premium)

   • Page paiement sécurisée
   • Options : Carte, PayPal, Apple Pay
   • Confirmation immédiate

6. Accès Premium

   • Dashboard avancé débloqué
   • +50 prédictions/jour
   • Métriques détaillées
   • Alertes push personnalisées

7. Si "Plus Tard"

   • Modal disparaît temporairement
   • Réapparaît après 24h ou 3ème tentative
   • Pas de spam

Optimisations :

• Upsell contextuel (pas agressif)
• Montrer valeur personnalisée
• Pas de forçage
• Option "Plus tard" respectée

Journey Patterns

Patterns Communs Identifiés :

Navigation Pattern :

• Bottom bar (mobile) / Top tabs (desktop)
• Navigation constante et accessible
• 4 onglets max : Accueil, Matchs, Historique, Profil

Feedback Pattern :

• Feedback visuel immédiat (200ms)
• Animations subtiles (300ms)
• Haptic feedback sur actions importantes
• Progress indicators pour actions longues

Error Recovery Pattern :

• Messages constructifs (pas "Erreur 500")
• Suggestions de correction
• Bouton "Réessayer" visible
• Mode dégradé si API down

Progressive Disclosure Pattern :

• Information essentielle visible d'abord
• Détails au tap (card expand)
• Tooltips pour explications
• Onboarding optionnel

Flow Optimization Principles

Principes d'Optimisation des Flows :

1. Minimiser Steps to Value

   • Time-to-value < 3s pour consultation
   • Pas de login requis
   • Information visible immédiatement

2. Réduire Cognitive Load

   • Une décision à la fois
   • Information hiérarchisée
   • Pas de surcharge

3. Feedback Immédiat

   • Confirmation sur chaque action
   • Progress indicators
   • Messages constructifs

4. Moments de Délice

   • Animation succès prédiction
   • Badges et accomplissements
   • Partage facilité

5. Gestion d'Erreurs Gracieuse

   • Messages constructifs
   • Suggestions de correction
   • Mode dégradé fonctionnel

---

Component Strategy

Design System Coverage Analysis

Design System Choisi : shadcn/ui + Tailwind CSS v4.0

Composants Disponibles dans shadcn/ui :

• Button (Primary, Secondary, Tertiary, Ghost)
• Card (avec header, body, footer)
• Input (text, email, password, etc.)
• Navigation (Tabs, Bottom Navigation)
• Dialog/Modal
• Toast/Notification
• Progress Bar
• Badge
• Avatar
• Dropdown Menu
• Tooltip
• Alert
• Separator/Divider

Composants Nécessaires pour Chartbastan (Non Disponibles) :

1. ConfidenceMeter - Composant unique pour afficher le niveau de confiance
2. MatchListItem - Item de liste pour afficher un match avec prédiction
3. EnergyWave - Visualisation de l'énergie collective sur 24h
4. MatchCard - Card expandable avec détails complets
5. PredictionResult - Affichage du résultat d'une prédiction (side-by-side)
6. ShareButton - Bouton de partage avec format pré-rempli

Custom Components Design

Component 1: ConfidenceMeter

Purpose : Afficher le niveau de confiance d'une prédiction de manière intuitive et compréhensible pour un novice.

Usage : Utilisé dans MatchListItem, MatchCard, et écran de détails. Visible en un coup d'œil.

Anatomy :

┌─────────────────────────────┐
│  78%  [Confiance haute]     │
│  ████████████░░░░░░░░░░      │
│  Barre de progression       │
└─────────────────────────────┘

States :

• Default : Pourcentage affiché, couleur sémantique, barre de progression
• Hover : Légère scale (1.0 → 1.05)
• Active/Tap : Tooltip apparaît avec explication
• Loading : Skeleton placeholder

Variants :

• Compact : Pourcentage + barre (dans liste)
• Standard : Pourcentage + label + barre (dans card)
• Large : Pourcentage + label + barre + graphique (dans détails)

Accessibility :

• ARIA label : "Confiance de prédiction : 78%"
• Tooltip accessible au clavier (focus)
• Contraste minimum 4.5:1

Props :

interface ConfidenceMeterProps {
  level: number; // 0-100
  variant?: 'compact' | 'standard' | 'large';
  showLabel?: boolean;
  showTooltip?: boolean;
  className?: string;
}

Component 2: MatchListItem

Purpose : Afficher un match dans une liste verticale avec prédiction visible en un coup d'œil.

Usage : Utilisé dans l'écran principal (liste de matchs). Format liste pour scan rapide.

Anatomy :

┌─────────────────────────────────────┐
│ PSG vs Marseille        78%         │
│ Aujourd'hui 20h00                   │
│ ████████████░░░░░░░░░░              │
└─────────────────────────────────────┘

States :

• Default : Item de liste compact
• Hover : Background légèrement assombri
• Active/Tap : Card expand avec détails
• Loading : Skeleton placeholder

Variants :

• Default : Format liste compact
• Expanded : Card avec détails complets

Accessibility :

• ARIA label : "Match PSG vs Marseille, confiance 78%"
• Navigation clavier (arrow keys)
• Focus visible

Props :

interface MatchListItemProps {
  match: {
    id: string;
    homeTeam: string;
    awayTeam: string;
    date: Date;
    confidence: number;
  };
  onTap?: () => void;
  expanded?: boolean;
}

Component 3: EnergyWave

Purpose : Visualiser l'évolution de l'énergie collective des supporters sur 24h de manière intuitive.

Usage : Utilisé dans MatchCard expanded et écran de détails. Montre la progression temporelle.

Anatomy :

┌─────────────────────────────┐
│  Énergie Collective 24h     │
│      ╱╲                      │
│     ╱  ╲    ╱╲              │
│    ╱    ╲  ╱  ╲             │
│   ╱      ╲╱    ╲            │
│  ╱              ╲           │
│ ╱                ╲          │
│─────────────────────────────│
│ -24h              Maintenant│
└─────────────────────────────┘

States :

• Default : Graphique affiché avec données
• Loading : Skeleton placeholder
• Error : Message "Données indisponibles"

Variants :

• Compact : Graphique simple (dans card)
• Detailed : Graphique avec annotations (dans détails)

Accessibility :

• ARIA label : "Graphique d'énergie collective sur 24 heures"
• Description textuelle des tendances
• Support screen reader

Props :

interface EnergyWaveProps {
  data: Array<{ time: Date; energy: number }>;
  variant?: 'compact' | 'detailed';
  className?: string;
}

Component 4: MatchCard

Purpose : Card expandable affichant tous les détails d'un match avec prédiction, énergie, historique.

Usage : Utilisé quand utilisateur tap sur MatchListItem. Card expand avec détails complets.

Anatomy :

┌─────────────────────────────┐
│ PSG vs Marseille            │
│ Aujourd'hui 20h00           │
├─────────────────────────────┤
│ Confidence Meter (78%)      │
│ Energy Wave Graphique       │
│ Historique de Confiance     │
│ Actions: Partager, Fermer   │
└─────────────────────────────┘

States :

• Collapsed : Format liste compact
• Expanded : Card avec détails
• Loading : Skeleton placeholder
• Error : Message d'erreur

Variants :

• Default : Card standard
• Featured : Card mise en avant (match principal)

Accessibility :

• ARIA expanded state
• Keyboard navigation (Enter pour expand)
• Focus management

Props :

interface MatchCardProps {
  match: Match;
  expanded?: boolean;
  onExpand?: () => void;
  onShare?: () => void;
  variant?: 'default' | 'featured';
}

Component 5: PredictionResult

Purpose : Afficher le résultat d'une prédiction confirmée avec comparaison side-by-side.

Usage : Utilisé dans l'écran de résultat après confirmation d'une prédiction.

Anatomy :

┌─────────────────────────────┐
│  🏆 Prédiction Confirmée    │
├─────────────────────────────┤
│ Prédiction: 78%  │ Réel: 3-0│
│ ✅ CORRECTE                 │
│ Badge: 100% (1/1)           │
│ [Partager]                  │
└─────────────────────────────┘

States :

• Default : Résultat affiché
• Success Animation : Particules/confetti
• Loading : Skeleton placeholder

Variants :

• Success : Prédiction correcte (vert)
• Failure : Prédiction incorrecte (gris, pas de notification)

Accessibility :

• ARIA label : "Prédiction confirmée : 78% correcte, résultat réel 3-0"
• Contraste élevé pour succès

Props :

interface PredictionResultProps {
  prediction: {
    confidence: number;
    predictedScore: string;
  };
  actual: {
    score: string;
    correct: boolean;
  };
  onShare?: () => void;
}

Component 6: ShareButton

Purpose : Bouton de partage avec format pré-rempli pour viralité organique.

Usage : Utilisé dans MatchCard, PredictionResult, et écran de succès.

Anatomy :

┌─────────────────────────────┐
│  [Partager]                  │
│  └─ Menu: WhatsApp, Twitter │
└─────────────────────────────┘

States :

• Default : Bouton visible
• Hover : Légère scale
• Active : Menu s'ouvre
• Loading : Spinner pendant génération

Variants :

• Icon Only : Icône seule
• With Label : Icône + texte "Partager"
• Full Width : Bouton pleine largeur

Accessibility :

• ARIA label : "Partager cette prédiction"
• Menu accessible au clavier
• Focus management

Props :

interface ShareButtonProps {
  content: {
    text: string;
    image?: string;
  };
  platforms?: Array<'whatsapp' | 'twitter' | 'facebook'>;
  variant?: 'icon' | 'label' | 'full';
  onShare?: (platform: string) => void;
}

Component Implementation Strategy

Approche d'Implémentation :

1. Base : shadcn/ui Components

   • Utiliser tous les composants de base disponibles
   • Personnaliser via CSS variables
   • Surcharger les styles si nécessaire

2. Custom Components : Composants Spécifiques

   • Créer dans src/components/chartbastan/
   • Utiliser les tokens de design system
   • Respecter les patterns d'accessibilité

3. Structure Projet :

src/
├── components/
│   ├── ui/              # shadcn/ui components
│   │   ├── button.tsx
│   │   ├── card.tsx
│   │   ├── input.tsx
│   │   └── ...
│   └── chartbastan/    # Custom components
│       ├── confidence-meter.tsx
│       ├── match-list-item.tsx
│       ├── energy-wave.tsx
│       ├── match-card.tsx
│       ├── prediction-result.tsx
│       └── share-button.tsx
├── lib/
│   └── theme.ts         # Design tokens
└── tailwind.config.ts    # Tailwind config

4. Priorité d'Implémentation :

   • Phase 1 (MVP) : ConfidenceMeter, MatchListItem, MatchCard
   • Phase 2 : EnergyWave, PredictionResult
   • Phase 3 : ShareButton, optimisations

5. Documentation :

   • Storybook pour chaque composant
   • Props documentation
   • Usage examples
   • Accessibility guidelines

---

UX Consistency Patterns

Button Hierarchy

When to Use : Définir la hiérarchie des actions pour guider l'utilisateur vers les actions principales.

Visual Design :

• Primary : Bouton principal (couleur primary, pleine largeur si seul)
• Secondary : Action secondaire (fond surface, bordure)
• Tertiary : Action tertiaire (transparent, couleur primary)
• Danger : Action destructive (rouge, utilisation rare)

Behavior :

• Hover : Scale 1.02, shadow md
• Active : Scale 0.98
• Disabled : Opacity 0.5, cursor not-allowed
• Loading : Spinner + texte "Chargement..."

Accessibility :

• ARIA labels clairs
• Focus visible (outline primary)
• Keyboard accessible (Enter/Space)
• Touch target min 44x44px

Mobile Considerations :

• Boutons pleine largeur sur mobile (sauf groupes)
• Espacement 16px entre boutons
• Zone de clic min 48x48px

Variants :

• Size : Small (12px padding), Medium (12px 28px), Large (16px 32px)
• Width : Auto, Full width, Fixed width

Feedback Patterns

When to Use : Communiquer le statut des actions utilisateur (succès, erreur, warning, info).

Visual Design :

Success (Succès) :

• Toast notification : Vert (#10b981), icône checkmark
• Position : Bas de l'écran (mobile) / Top-right (desktop)
• Durée : 3 secondes auto-dismiss
• Animation : Slide in + fade

Error (Erreur) :

• Toast notification : Rouge (#ef4444), icône alert
• Message constructif : "Email invalide" (pas "Erreur 500")
• Suggestions : "Essayez xyz@exemple.com"
• Durée : 5 secondes (plus long pour lire)

Warning (Avertissement) :

• Toast notification : Orange (#f59e0b), icône warning
• Usage : Informations importantes mais non-bloquantes
• Durée : 4 secondes

Info (Information) :

• Toast notification : Bleu primary (#0A84FF), icône info
• Usage : Informations générales
• Durée : 3 secondes

Behavior :

• Stack multiple toasts verticalement
• Dismiss manuel (bouton X)
• Pas de spam (max 3 toasts simultanés)

Accessibility :

• ARIA live regions
• Screen reader announcements
• Contraste minimum 4.5:1

Form Patterns

When to Use : Collecter des informations utilisateur (inscription, login, préférences).

Visual Design :

• Input : Border 1.5px, radius 12px, padding 14px 20px
• Label : Au-dessus de l'input, font-weight 500
• Placeholder : Gris tertiary, texte explicatif
• Focus : Border primary + shadow (0 0 0 4px rgba primary 15%)

Behavior :

• Validation en temps réel (après blur)
• Messages d'erreur sous l'input
• Indicateur de succès (checkmark vert)
• Auto-focus sur premier input

Validation Rules :

• Email : Format valide
• Password : Min 8 caractères, 1 majuscule, 1 chiffre
• Required : Indicateur astérisque (*)

Accessibility :

• Labels associés (for/id)
• ARIA invalid state
• Messages d'erreur liés (aria-describedby)
• Keyboard navigation (Tab, Enter)

Mobile Considerations :

• Input type adapté (email, tel, etc.)
• Auto-capitalize désactivé sauf nom
• Auto-complete activé

Navigation Patterns

When to Use : Permettre la navigation entre sections de l'application.

Visual Design :

Bottom Navigation (Mobile) :

• 4 onglets max : Accueil, Matchs, Historique, Profil
• Icônes + labels
• Position fixe en bas
• Hauteur : 64px
• Active : Couleur primary, label visible

Top Tabs (Desktop) :

• Tabs horizontales en haut
• Underline active indicator
• Hover : Background surface

Behavior :

• Swipe gauche/droite entre onglets (mobile)
• Keyboard navigation (arrow keys)
• Deep linking support

Accessibility :

• ARIA labels pour chaque onglet
• Keyboard navigation (Tab, Arrow keys)
• Focus visible

Mobile Considerations :

• Zone de clic min 48x48px
• Espacement entre onglets
• Pas de menu hamburger

Modal and Overlay Patterns

When to Use : Afficher des informations ou actions contextuelles sans quitter la page.

Visual Design :

• Modal : Centré, max-width 500px, radius 18px
• Overlay : Fond noir 50% opacity
• Header : Titre + bouton fermer (X)
• Body : Contenu scrollable si nécessaire
• Footer : Actions (Primary + Secondary)

Behavior :

• Ouverture : Fade in (200ms)
• Fermeture : Fade out (200ms)
• Escape key : Ferme la modal
• Click outside : Ferme la modal (optionnel)
• Focus trap : Focus reste dans modal

Variants :

• Dialog : Confirmation d'action
• Sheet : Bottom sheet (mobile)
• Drawer : Side drawer (desktop)

Accessibility :

• ARIA modal role
• Focus management (focus sur premier élément)
• Screen reader announcement
• Escape key support

Empty States

When to Use : Afficher quand il n'y a pas de contenu à afficher.

Visual Design :

• Illustration simple (ou icône)
• Titre : "Aucun match disponible"
• Description : "Les prédictions seront disponibles bientôt"
• Action : Bouton "Actualiser" ou "Voir les matchs à venir"

Behavior :

• Pas de message négatif
• Action claire pour résoudre
• Lien vers contenu pertinent

Variants :

• No Results : Recherche sans résultats
• No Data : Aucune donnée disponible
• Error : Erreur de chargement

Loading States

When to Use : Indiquer qu'une action est en cours.

Visual Design :

Skeleton Screens :

• Placeholders gris animés
• Forme similaire au contenu final
• Animation shimmer

Spinner :

• Cercle animé, couleur primary
• Taille : 24px (small), 32px (medium), 48px (large)
• Position : Centré dans container

Progress Bar :

• Barre de progression pour actions longues
• Pourcentage affiché si disponible
• Estimation de temps : "< 30s"

Behavior :

• Skeleton : Pour contenu qui charge
• Spinner : Pour actions courtes (< 3s)
• Progress : Pour actions longues (> 3s)

Accessibility :

• ARIA busy state
• Screen reader : "Chargement en cours"
• Pas de timeout infini

Search and Filtering Patterns

When to Use : Permettre la recherche et le filtrage de matchs.

Visual Design :

• Input search : Icône loupe à gauche
• Placeholder : "Rechercher un match..."
• Clear button : X visible si texte présent
• Filters : Chips ou dropdown

Behavior :

• Recherche en temps réel (debounce 300ms)
• Résultats affichés sous l'input
• Highlight des termes recherchés
• Pas de résultats : Empty state

Accessibility :

• ARIA search role
• Keyboard navigation (Arrow keys, Enter)
• Screen reader announcements

---

Responsive Design & Accessibility

Responsive Design Strategy

Approche : Mobile-First

Chartbastan est conçu mobile-first, puis adapté progressivement pour tablette et desktop.

Breakpoints :

/* Mobile First Approach */
--breakpoint-sm: 640px;   /* Small mobile */
--breakpoint-md: 768px;   /* Tablet */
--breakpoint-lg: 1024px;  /* Desktop */
--breakpoint-xl: 1280px;  /* Large desktop */

Mobile Strategy (320px - 767px) :

Layout :

• Liste verticale pleine largeur
• Bottom navigation bar (4 onglets)
• Cards pleine largeur avec padding 16px
• Typographie : H1 32px, Body 17px

Navigation :

• Bottom bar fixe en bas
• Zone de clic min 48x48px
• Swipe gauche/droite entre onglets
• Pull-to-refresh sur listes

Interactions :

• Tap pour expand cards
• Swipe-to-dismiss pour actions
• Gestes tactiles optimisés
• Haptic feedback sur actions importantes

Performance :

• Images lazy loading
• Code splitting par route
• Service Worker pour offline
• Load time < 2s sur 3G

Tablet Strategy (768px - 1023px) :

Layout :

• Liste centrée (max-width 800px)
• Grid 2 colonnes pour cards
• Navigation : Bottom bar ou top tabs
• Typographie : H1 40px, Body 17px

Navigation :

• Bottom bar ou top tabs selon contexte
• Zone de clic min 44x44px
• Gestes tactiles supportés

Desktop Strategy (1024px+) :

Layout :

• Liste centrée (max-width 800px)
• Grid 2-3 colonnes pour dashboard
• Navigation : Top tabs horizontales
• Sidebar pour filtres (optionnel)
• Typographie : H1 56px, Body 17px

Navigation :

• Top tabs horizontales
• Hover states visibles
• Keyboard navigation optimisée

Features Desktop-Specific :

• Multi-column layouts
• Hover tooltips
• Keyboard shortcuts
• Sidebar pour métriques avancées

Accessibility Strategy

WCAG Compliance Level : AA (Recommandé)

Rationale :

• Niveau industrie standard
• Couvre la majorité des besoins d'accessibilité
• Conforme aux exigences légales (RGPD, etc.)
• Meilleur équilibre coût/bénéfice

Key Accessibility Requirements :

1. Color Contrast :

• Normal text : Minimum 4.5:1
• Large text (18px+) : Minimum 3:1
• UI Components : Minimum 3:1
• Tous nos textes respectent ces ratios

2. Keyboard Navigation :

• Tous les éléments interactifs accessibles au clavier
• Focus visible (outline primary, 2px)
• Tab order logique
• Skip navigation link
• Escape key pour fermer modals

3. Screen Reader Support :

• Semantic HTML (headings, landmarks, lists)
• ARIA labels où nécessaire
• Alt text pour images
• ARIA live regions pour notifications
• ARIA states (expanded, disabled, etc.)

4. Touch Targets :

• Minimum 44x44px (Apple HIG)
• Recommandé 48x48px (Material Design)
• Espacement 8px minimum entre targets

5. Focus Management :

• Focus visible sur tous les éléments
• Focus trap dans modals
• Focus retour après fermeture modal
• Focus management pour navigation dynamique

6. Text Alternatives :

• Alt text descriptif pour images
• Captions pour vidéos
• Transcripts pour audio
• Labels pour icônes

7. Form Accessibility :

• Labels associés (for/id)
• Messages d'erreur liés (aria-describedby)
• Indicateurs required (astérisque + aria-required)
• Auto-complete activé

8. Color Independence :

• Ne pas utiliser uniquement la couleur pour communiquer
• Icônes + couleurs pour états
• Patterns/textures si nécessaire

Testing Strategy

Responsive Testing :

Devices à Tester :

• iPhone SE (320px) - Plus petit mobile
• iPhone 12/13/14 (390px) - Mobile standard
• iPhone 14 Pro Max (428px) - Grand mobile
• iPad (768px) - Tablette
• iPad Pro (1024px) - Grande tablette
• Desktop (1280px+) - Desktop

Browsers à Tester :

• Chrome (mobile + desktop)
• Safari (iOS + macOS)
• Firefox (mobile + desktop)
• Edge (desktop)

Network Testing :

• 3G (slow connection)
• 4G (normal connection)
• WiFi (fast connection)
• Offline (Service Worker)

Accessibility Testing :

Automated Tools :

• axe DevTools
• WAVE (Web Accessibility Evaluation Tool)
• Lighthouse Accessibility Audit
• Pa11y

Manual Testing :

• Screen reader : VoiceOver (iOS/macOS), NVDA (Windows), JAWS (Windows)
• Keyboard-only navigation
• Color blindness simulation (Chrome DevTools)
• Zoom testing (200% zoom)

User Testing :

• Inclure utilisateurs avec handicaps
• Tester avec technologies d'assistance diverses
• Valider sur devices réels

Implementation Guidelines

Responsive Development :

Units :

• Utiliser rem pour typographie (accessibilité zoom)
• Utiliser % pour layouts flexibles
• Utiliser vw/vh pour viewport-based sizing
• Éviter px fixes sauf bordures (1px)

Media Queries :

/* Mobile First */
.component {
  /* Styles mobile */
}

@media (min-width: 768px) {
  /* Styles tablette */
}

@media (min-width: 1024px) {
  /* Styles desktop */
}

Images Responsive :

• srcset pour différentes résolutions
• sizes pour différentes viewports
• Lazy loading pour performance
• WebP format avec fallback

Typography Responsive :

• Clamp() pour tailles fluides
• Line-height adaptatif
• Letter-spacing adaptatif

Accessibility Development :

Semantic HTML :

<header>
  <nav aria-label="Navigation principale">
    <ul>
      <li><a href="/">Accueil</a></li>
    </ul>
  </nav>
</header>
<main>
  <section aria-labelledby="matches-heading">
    <h2 id="matches-heading">Matchs du Jour</h2>
  </section>
</main>

ARIA Usage :

• aria-label pour éléments sans texte visible
• aria-describedby pour descriptions
• aria-expanded pour états expand/collapse
• aria-live pour notifications dynamiques
• aria-hidden pour éléments décoratifs

Focus Management :

// Focus trap dans modal
const focusableElements = modal.querySelectorAll(
  'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
);
firstElement.focus();

Keyboard Support :

• Tab : Navigation entre éléments
• Enter/Space : Activer boutons/liens
• Escape : Fermer modals
• Arrow keys : Navigation dans listes/tabs

---