---
stepsCompleted: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14]
lastStep: 14
inputDocuments:
- prd.md
- project-context.md
status: complete
completedDate: 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 :**
```mermaid
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 :**
```mermaid
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 :**
```mermaid
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 :**
```typescript
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 :**
```typescript
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 :**
```typescript
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 :**
```typescript
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 :**
```typescript
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 :**
```typescript
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 :**
```css
/* 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 :**
```css
/* 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 :**
```html
```
**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 :**
```typescript
// 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
---