675 lines
31 KiB
HTML
675 lines
31 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="fr">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Chartbastan - Analyse UX Patterns & Inspiration</title>
|
|
<style>
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
body {
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
|
|
line-height: 1.6;
|
|
color: #1a1a1a;
|
|
background: #ffffff;
|
|
}
|
|
.container {
|
|
max-width: 1400px;
|
|
margin: 0 auto;
|
|
padding: 40px 20px;
|
|
}
|
|
header {
|
|
background: #ffffff;
|
|
color: #1a1a1a;
|
|
padding: 40px;
|
|
text-align: center;
|
|
border-bottom: 2px solid #e5e7eb;
|
|
margin-bottom: 50px;
|
|
}
|
|
header h1 {
|
|
font-size: 2.8rem;
|
|
font-weight: 700;
|
|
color: #1a1a1a;
|
|
margin-bottom: 15px;
|
|
letter-spacing: -0.5px;
|
|
}
|
|
header p {
|
|
font-size: 1.1rem;
|
|
color: #6b7280;
|
|
max-width: 700px;
|
|
margin: 0 auto;
|
|
}
|
|
section {
|
|
background: #ffffff;
|
|
border: 1px solid #e5e7eb;
|
|
border-radius: 12px;
|
|
padding: 40px;
|
|
margin-bottom: 30px;
|
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
|
|
}
|
|
section h2 {
|
|
color: #1a1a1a;
|
|
font-size: 1.8rem;
|
|
font-weight: 600;
|
|
margin-bottom: 25px;
|
|
padding-bottom: 15px;
|
|
border-bottom: 2px solid #e5e7eb;
|
|
}
|
|
section p {
|
|
color: #4b5563;
|
|
margin-bottom: 20px;
|
|
font-size: 1rem;
|
|
}
|
|
.nav-tabs {
|
|
display: flex;
|
|
gap: 12px;
|
|
margin-bottom: 40px;
|
|
flex-wrap: wrap;
|
|
}
|
|
.nav-tab {
|
|
padding: 14px 28px;
|
|
background: #ffffff;
|
|
border: 2px solid #e5e7eb;
|
|
border-radius: 8px;
|
|
cursor: pointer;
|
|
font-weight: 600;
|
|
color: #6b7280;
|
|
font-size: 0.95rem;
|
|
transition: all 0.2s ease;
|
|
}
|
|
.nav-tab:hover {
|
|
border-color: #2563eb;
|
|
color: #2563eb;
|
|
background: #f8fafc;
|
|
}
|
|
.nav-tab.active {
|
|
background: #2563eb;
|
|
color: #ffffff;
|
|
border-color: #2563eb;
|
|
}
|
|
.hidden {
|
|
display: none;
|
|
}
|
|
.content {
|
|
display: block;
|
|
}
|
|
.app-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
|
|
gap: 25px;
|
|
margin: 30px 0;
|
|
}
|
|
.app-card {
|
|
border: 1px solid #e5e7eb;
|
|
border-radius: 10px;
|
|
padding: 25px;
|
|
background: #ffffff;
|
|
transition: all 0.3s ease;
|
|
}
|
|
.app-card:hover {
|
|
border-color: #2563eb;
|
|
box-shadow: 0 4px 12px rgba(37, 99, 235, 0.1);
|
|
transform: translateY(-2px);
|
|
}
|
|
.app-card h3 {
|
|
color: #2563eb;
|
|
font-size: 1.4rem;
|
|
font-weight: 600;
|
|
margin-bottom: 15px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
.app-card p {
|
|
color: #6b7280;
|
|
font-size: 0.95rem;
|
|
margin-bottom: 20px;
|
|
line-height: 1.7;
|
|
}
|
|
.app-card ul {
|
|
list-style: none;
|
|
padding: 0;
|
|
}
|
|
.app-card li {
|
|
padding: 10px 0;
|
|
padding-left: 30px;
|
|
position: relative;
|
|
color: #4b5563;
|
|
font-size: 0.9rem;
|
|
line-height: 1.6;
|
|
}
|
|
.app-card li::before {
|
|
content: "✓";
|
|
position: absolute;
|
|
left: 0;
|
|
color: #2563eb;
|
|
font-weight: bold;
|
|
}
|
|
.tag {
|
|
display: inline-block;
|
|
padding: 6px 14px;
|
|
border-radius: 20px;
|
|
font-size: 0.8rem;
|
|
font-weight: 600;
|
|
margin: 6px 0 0 6px 0;
|
|
}
|
|
.tag-blue {
|
|
background: #dbeafe;
|
|
color: #2563eb;
|
|
}
|
|
.tag-green {
|
|
background: #d1fae5;
|
|
color: #059669;
|
|
}
|
|
.pattern-list {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
|
|
gap: 20px;
|
|
margin: 25px 0;
|
|
}
|
|
.pattern-item {
|
|
background: #f8fafc;
|
|
border-left: 4px solid #2563eb;
|
|
padding: 20px;
|
|
border-radius: 8px;
|
|
}
|
|
.pattern-item strong {
|
|
color: #2563eb;
|
|
display: block;
|
|
margin-bottom: 10px;
|
|
font-size: 1.1rem;
|
|
font-weight: 600;
|
|
}
|
|
.pattern-item p {
|
|
margin: 0 0 10px 0;
|
|
color: #4b5563;
|
|
line-height: 1.6;
|
|
}
|
|
.pattern-item em {
|
|
color: #9ca3af;
|
|
font-style: italic;
|
|
font-size: 0.9rem;
|
|
}
|
|
.anti-pattern {
|
|
background: #fef2f2;
|
|
border-left: 4px solid #dc2626;
|
|
padding: 20px;
|
|
border-radius: 8px;
|
|
margin-bottom: 20px;
|
|
}
|
|
.anti-pattern strong {
|
|
color: #dc2626;
|
|
display: block;
|
|
margin-bottom: 10px;
|
|
font-size: 1.1rem;
|
|
font-weight: 600;
|
|
}
|
|
.anti-pattern p {
|
|
margin: 0 0 10px 0;
|
|
color: #4b5563;
|
|
line-height: 1.6;
|
|
}
|
|
.anti-pattern em {
|
|
color: #9ca3af;
|
|
font-style: italic;
|
|
font-size: 0.9rem;
|
|
}
|
|
.strategy-table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
margin: 25px 0;
|
|
background: #ffffff;
|
|
}
|
|
.strategy-table th {
|
|
background: #2563eb;
|
|
color: #ffffff;
|
|
padding: 18px;
|
|
text-align: left;
|
|
font-size: 1rem;
|
|
font-weight: 600;
|
|
}
|
|
.strategy-table td {
|
|
padding: 18px;
|
|
border-bottom: 1px solid #e5e7eb;
|
|
vertical-align: top;
|
|
color: #1a1a1a;
|
|
}
|
|
.strategy-table tr:last-child td {
|
|
border-bottom: none;
|
|
}
|
|
.strategy-table tr:hover td {
|
|
background: #f8fafc;
|
|
}
|
|
.highlight {
|
|
background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
|
|
color: white;
|
|
padding: 25px;
|
|
border-radius: 10px;
|
|
margin-top: 30px;
|
|
text-align: center;
|
|
}
|
|
.highlight h3 {
|
|
margin: 0 0 15px 0;
|
|
font-size: 1.3rem;
|
|
}
|
|
.highlight p {
|
|
margin: 0;
|
|
color: rgba(255, 255, 255, 0.95);
|
|
}
|
|
.highlight strong {
|
|
color: #ffffff;
|
|
}
|
|
@media (max-width: 768px) {
|
|
.container {
|
|
padding: 20px 15px;
|
|
}
|
|
.app-grid, .pattern-list, .strategy-table {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
header h1 {
|
|
font-size: 2rem;
|
|
}
|
|
.nav-tabs {
|
|
justify-content: center;
|
|
}
|
|
.nav-tab {
|
|
flex: 1;
|
|
text-align: center;
|
|
font-size: 0.85rem;
|
|
padding: 12px 16px;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<header>
|
|
<h1>Chartbastan - Analyse UX Patterns & Inspiration</h1>
|
|
<p>Analyse des meilleures applications de paris sportifs et patterns UX mobile-first pour 2025-2026</p>
|
|
</header>
|
|
|
|
<div class="container">
|
|
<!-- Navigation Tabs -->
|
|
<div class="nav-tabs">
|
|
<div class="nav-tab active" onclick="showSection('inspiring')">Apps Inspirantes</div>
|
|
<div class="nav-tab" onclick="showSection('patterns')">Patterns UX</div>
|
|
<div class="nav-tab" onclick="showSection('antipatterns')">Anti-Patterns</div>
|
|
<div class="nav-tab" onclick="showSection('strategy')">Stratégie Design</div>
|
|
</div>
|
|
|
|
<!-- Section 1: Apps Inspirantes -->
|
|
<div id="inspiring" class="section content">
|
|
<h2>Produits Inspirants - Analyse UX</h2>
|
|
<p>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.</p>
|
|
|
|
<div class="app-grid">
|
|
<!-- App 1: Bet365 -->
|
|
<div class="app-card">
|
|
<h3>Bet365 - Navigation Simplifiée</h3>
|
|
<p>Leaders des paris sportifs avec navigation intuitive et live betting optimisé.</p>
|
|
<ul>
|
|
<li><strong>Navigation claire :</strong> Onglets logiques (In-Play, Upcoming, Sports) accessibles en 1 tap</li>
|
|
<li><strong>Live betting fluide :</strong> Scores et cotes mis à jour en temps réel sans rechargement</li>
|
|
<li><strong>Bet-slip fixe :</strong> Accessible depuis n'importe quel écran, pas de navigation perdue</li>
|
|
<li><strong>Filtres efficaces :</strong> Recherche rapide par sport, ligue, équipe</li>
|
|
</ul>
|
|
<div style="margin-top: 20px;">
|
|
<span class="tag tag-blue">Navigation</span>
|
|
<span class="tag tag-blue">Live</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- App 2: Unibet -->
|
|
<div class="app-card">
|
|
<h3>Unibet - Confiance & Sécurité</h3>
|
|
<p>Focus sur la transparence et la sécurité pour maximiser la confiance des utilisateurs.</p>
|
|
<ul>
|
|
<li><strong>Signaux de confiance visibles :</strong> Licences, certifications, mentions légales en premier pli</li>
|
|
<li><strong>Transparence des paiements :</strong> Frais visibles, délais clairs, historique accessible</li>
|
|
<li><strong>Support 24/7 accessible :</strong> Live chat visible sur tous les écrans, même pour non-inscrits</li>
|
|
<li><strong>Politiques claires :</strong> Conditions, confidentialité, jeu responsable bien affichées</li>
|
|
</ul>
|
|
<div style="margin-top: 20px;">
|
|
<span class="tag tag-blue">Confiance</span>
|
|
<span class="tag tag-green">Sécurité</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- App 3: William Hill -->
|
|
<div class="app-card">
|
|
<h3>William Hill - Mobile-First</h3>
|
|
<p>Interface optimisée pour mobile avec gestes tactiles et navigation one-thumb.</p>
|
|
<ul>
|
|
<li><strong>Zone de clic adaptée :</strong> Boutons min 44x44px (Apple HIG) / 48x48px (Material Design)</li>
|
|
<li><strong>Navigation basse :</strong> Barre de navigation en bas de l'écran (accessible au pouce)</li>
|
|
<li><strong>Gestes intuitifs :</strong> Swipe entre onglets, pull-to-refresh, swipe-to-dismiss</li>
|
|
<li><strong>Performance mobile :</strong> Load time < 2s sur 3G, animations fluides à 60fps</li>
|
|
</ul>
|
|
<div style="margin-top: 20px;">
|
|
<span class="tag tag-green">Mobile</span>
|
|
<span class="tag tag-blue">Gestes</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- App 4: Tinder -->
|
|
<div class="app-card">
|
|
<h3>Tinder - Swipe Navigation</h3>
|
|
<p>Navigation par swipe intuitive et engagement micro-interactif.</p>
|
|
<ul>
|
|
<li><strong>Swipe intuitif :</strong> Gauche/droite pour décider, pas de clics multiples</li>
|
|
<li><strong>Feedback visuel :</strong> Animations de transition fluides, haptic feedback (vibration)</li>
|
|
<li><strong>Action rapide :</strong> 1 décision en 1 swipe, pas de menus complexes</li>
|
|
<li><strong>Engagement :</strong> Micro-interactions créent l'habitude de revenir</li>
|
|
</ul>
|
|
<div style="margin-top: 20px;">
|
|
<span class="tag tag-green">Swipe</span>
|
|
<span class="tag tag-blue">Micro-interactions</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- App 5: Spotify -->
|
|
<div class="app-card">
|
|
<h3>Spotify - Navigation Tab</h3>
|
|
<p>Navigation par onglets avec découverte progressive et contenu personnalisé.</p>
|
|
<ul>
|
|
<li><strong>Onglets logiques :</strong> Accueil | Recherche | Bibliothèque | Profil (clairs et constants)</li>
|
|
<li><strong>Personnalisation :</strong> Contenu adapté à l'historique et aux préférences utilisateur</li>
|
|
<li><strong>Découverte progressive :</strong> Onboarding optionnel, pas forcé</li>
|
|
<li><strong>Dark mode natif :</strong> Adaptation automatique jour/nuit</li>
|
|
</ul>
|
|
<div style="margin-top: 20px;">
|
|
<span class="tag tag-blue">Navigation</span>
|
|
<span class="tag tag-blue">Personnalisation</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- App 6: Instagram -->
|
|
<div class="app-card">
|
|
<h3>Instagram - Story & Feed</h3>
|
|
<p>Engagement viral, partage social, contenu visuel éphémère.</p>
|
|
<ul>
|
|
<li><strong>Stories éphémères :</strong> Contenu qui disparaît en 24h → anticipation/urgence</li>
|
|
<li><strong>Partage facilité :</strong> 1 tap pour partager vers multiples plateformes</li>
|
|
<li><strong>Contenu visuel :</strong> Photos/vidéos prioritaires, texte secondaire</li>
|
|
<li><strong>Gamification légère :</strong> Badges, likes, commentaires créent communauté</li>
|
|
</ul>
|
|
<div style="margin-top: 20px;">
|
|
<span class="tag tag-green">Viralité</span>
|
|
<span class="tag tag-blue">Engagement</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="highlight">
|
|
<h3>Insight Clé</h3>
|
|
<p>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).</p>
|
|
<p><strong>Unicité :</strong> 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).</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Section 2: Patterns UX Transférables -->
|
|
<div id="patterns" class="section hidden">
|
|
<h2>Patterns UX Transférables pour Chartbastan</h2>
|
|
<p>Basé sur l'analyse des apps inspirantes, voici les patterns que nous pouvons adapter pour Chartbastan.</p>
|
|
|
|
<h3 style="color: #2563eb; margin: 25px 0 15px;">Navigation Patterns</h3>
|
|
<div class="pattern-list">
|
|
<div class="pattern-item">
|
|
<strong>Bottom Navigation Bar (Mobile-First)</strong>
|
|
<p>Barre de navigation en bas de l'écran, accessible au pouce. 4-5 onglets max.</p>
|
|
<p><em>Adaptation Chartbastan :</em> Accueil | Matchs | Historique | Profil</p>
|
|
<p><em>Source :</em> William Hill, Spotify</p>
|
|
</div>
|
|
<div class="pattern-item">
|
|
<strong>Fixed Bet-Slip / Action Bar</strong>
|
|
<p>Composant fixe accessible depuis tous les écrans, montre l'action principale (parier, partager).</p>
|
|
<p><em>Adaptation Chartbastan :</em> "Voir les prédictions" ou "Partager cette réussite" en bas fixe</p>
|
|
<p><em>Source :</em> Bet365</p>
|
|
</div>
|
|
<div class="pattern-item">
|
|
<strong>Tab Navigation (Consistante)</strong>
|
|
<p>Onglets logiques et constants sur tous les écrans, pas de menus hamburger complexes.</p>
|
|
<p><em>Adaptation Chartbastan :</em> Matchs À Venir | En Direct | Favoris | Tous</p>
|
|
<p><em>Source :</em> Spotify</p>
|
|
</div>
|
|
</div>
|
|
|
|
<h3 style="color: #2563eb; margin: 25px 0 15px;">Interaction Patterns</h3>
|
|
<div class="pattern-list">
|
|
<div class="pattern-item">
|
|
<strong>Swipe-to-Navigate (Décision Rapide)</strong>
|
|
<p>Swipe gauche/droite pour naviguer ou décider, pas de clics multiples.</p>
|
|
<p><em>Adaptation Chartbastan :</em> Swipe entre matchs précédents/suivants dans l'historique</p>
|
|
<p><em>Source :</em> Tinder</p>
|
|
</div>
|
|
<div class="pattern-item">
|
|
<strong>Tap-to-Tooltip (Contexte Simplifié)</strong>
|
|
<p>Tap sur élément pour voir détail contextuel simple, pas de pages séparées.</p>
|
|
<p><em>Adaptation Chartbastan :</em> Tap sur Confidence Meter → Tooltip "Sur 100 matchs, 78 corrects"</p>
|
|
<p><em>Source :</em> Bet365</p>
|
|
</div>
|
|
<div class="pattern-item">
|
|
<strong>Pull-to-Refresh (Mise à Jour)</strong>
|
|
<p>Tirer vers le bas pour rafraîchir, pas de bouton refresh explicite.</p>
|
|
<p><em>Adaptation Chartbastan :</em> Pull-to-refresh sur écran Matchs pour voir les dernières prédictions</p>
|
|
<p><em>Source :</em> Twitter, Instagram</p>
|
|
</div>
|
|
</div>
|
|
|
|
<h3 style="color: #2563eb; margin: 25px 0 15px;">Visual Patterns</h3>
|
|
<div class="pattern-list">
|
|
<div class="pattern-item">
|
|
<strong>Confidence Colors (Intuitive)</strong>
|
|
<p>Couleurs universelles : Vert (positif/confiance) / Orange (neutre/attention) / Rouge (négatif/erreur).</p>
|
|
<p><em>Adaptation Chartbastan :</em> Confidence Meter : >70% (vert) / 50-70% (orange) / <50% (rouge)</p>
|
|
<p><em>Source :</em> Bet365, William Hill</p>
|
|
</div>
|
|
<div class="pattern-item">
|
|
<strong>Progress Visualization (Storytelling)</strong>
|
|
<p>Visualisation de progression (vague, timeline) pour montrer évolution historique.</p>
|
|
<p><em>Adaptation Chartbastan :</em> Graphique d'énergie collective sur 24h montrant montée/descente</p>
|
|
<p><em>Source :</em> Spotify (progress bar), Instagram (stories)</p>
|
|
</div>
|
|
<div class="pattern-item">
|
|
<strong>Micro-Animation (Feedback)</strong>
|
|
<p>Animations subtiles (300ms) pour feedback, transitions, succès.</p>
|
|
<p><em>Adaptation Chartbastan :</em> Animation de succès quand prédiction confirmée, haptic feedback légère</p>
|
|
<p><em>Source :</em> Tinder, Instagram</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Section 3: Anti-Patterns à Éviter -->
|
|
<div id="antipatterns" class="section hidden">
|
|
<h2>Anti-Patterns UX à Éviter</h2>
|
|
<p>Basé sur l'analyse des échecs courants dans l'industrie des paris et des apps mobiles, voici les patterns à absolument éviter.</p>
|
|
|
|
<div class="anti-pattern">
|
|
<strong>Onboarding Obligatoire de 5+ Écrans</strong>
|
|
<p>Forcer l'utilisateur à passer par 5+ écrans avant d'accéder au produit. Taux d'abandon : 60%+.</p>
|
|
<p><em>Alternative :</em> Onboarding optionnel en 3 étapes max, bouton "Passer" visible</p>
|
|
<p><em>Impact :</em> Perd des utilisateurs potentiels, frustration dès l'arrivée</p>
|
|
</div>
|
|
|
|
<div class="anti-pattern">
|
|
<strong>Publicité Intrusive sur Action Cœur</strong>
|
|
<p>Interstitiels, popups, bannières qui couvrent l'action principale (parier, consulter).</p>
|
|
<p><em>Alternative :</em> Publicités en haut/bas, sidebar desktop, jamais sur l'action cœur</p>
|
|
<p><em>Impact :</em> Ruine la confiance, frustration utilisateur, taux de rebond élevé</p>
|
|
</div>
|
|
|
|
<div class="anti-pattern">
|
|
<strong>Jargon Technique Non Expliqué</strong>
|
|
<p>Termes comme "algorithme de pondération temporelle", "coefficient de virale" sans contexte.</p>
|
|
<p><em>Alternative :</em> Terminologie simple + tooltips explicatifs au premier tap</p>
|
|
<p><em>Impact :</em> Novice se sent perdu, abandonne l'app</p>
|
|
</div>
|
|
|
|
<div class="anti-pattern">
|
|
<strong>Compteurs Régénératifs (FOMO Forcé)</strong>
|
|
<p>"Plus que 2 prédictions aujourd'hui !", "Offre expire dans 30 secondes !"</p>
|
|
<p><em>Alternative :</em> Notifications positives (réussites) PAS négatives, pas de FOMO</p>
|
|
<p><em>Impact :</em> Anxiété, méfiance, taux de désabonnement</p>
|
|
</div>
|
|
|
|
<div class="anti-pattern">
|
|
<strong>Menus Hamburgers Profonds (Navigation Complexe)</strong>
|
|
<p>3+ niveaux de menus, sous-menus, navigation difficile sur mobile.</p>
|
|
<p><em>Alternative :</em> Navigation basse (4-5 onglets), tabs constants, hiérarchie plate</p>
|
|
<p><em>Impact :</em> Navigation frustrante, time-to-value augmenté</p>
|
|
</div>
|
|
|
|
<div class="anti-pattern">
|
|
<strong>Feedback Absent (Silence)</strong>
|
|
<p>Bouton pressé = rien, erreur = "Erreur 500", chargement = loader infini.</p>
|
|
<p><em>Alternative :</em> Feedback visuel immédiat, messages constructifs, progress bars</p>
|
|
<p><em>Impact :</em> Confusion, frustration, manque de confiance</p>
|
|
</div>
|
|
|
|
<div class="anti-pattern">
|
|
<strong>Design Sombre/Chaotique (Overwhelm)</strong>
|
|
<p>Trop d'informations, couleurs agressives, animations excessives, pas de hiérarchie.</p>
|
|
<p><em>Alternative :</em> Interface épurée, espace blanc généreux, hiérarchie visuelle forte</p>
|
|
<p><em>Impact :</em> Overwhelm, cognitive load élevé, taux de rebond</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Section 4: Stratégie Design Inspiration -->
|
|
<div id="strategy" class="section hidden">
|
|
<h2>Stratégie d'Inspiration Design pour Chartbastan</h2>
|
|
<p>Stratégie claire pour utiliser l'inspiration tout en gardant Chartbastan unique (prédiction par énergie collective).</p>
|
|
|
|
<table class="strategy-table">
|
|
<thead>
|
|
<tr>
|
|
<th style="width: 25%;">Catégorie</th>
|
|
<th style="width: 35%;">Ce que nous devons ADOPTER</th>
|
|
<th style="width: 40%;">Pourquoi cela soutient Chartbastan</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td><strong>Navigation</strong></td>
|
|
<td>
|
|
<span class="tag tag-blue">Bottom Navigation Bar</span><br>
|
|
<span class="tag tag-blue">Fixed Action Bar</span><br>
|
|
<span class="tag tag-blue">Tab Navigation</span>
|
|
</td>
|
|
<td>Supporte notre but de mobile-first, time-to-value < 3s, navigation one-thumb zone</td>
|
|
</tr>
|
|
<tr>
|
|
<td><strong>Confiance</strong></td>
|
|
<td>
|
|
<span class="tag tag-blue">Signaux de Sécurité</span><br>
|
|
<span class="tag tag-blue">Transparence Totale</span><br>
|
|
<span class="tag tag-blue">Support Visible</span>
|
|
</td>
|
|
<td>Élimine la méfiance (objectif #1), rassure les novices, prouve la crédibilité</td>
|
|
</tr>
|
|
<tr>
|
|
<td><strong>Publicité</strong></td>
|
|
<td>
|
|
<span class="tag tag-blue">Placement Réfléchi</span><br>
|
|
<span class="tag tag-blue">Qualité Contrôlée</span><br>
|
|
<span class="tag tag-blue">Transparence "Sponsorisé"</span>
|
|
</td>
|
|
<td>Intégration intelligente (pas intrusive) renforce la confiance, pas frustrant</td>
|
|
</tr>
|
|
<tr>
|
|
<td><strong>Visuel</strong></td>
|
|
<td>
|
|
<span class="tag tag-blue">Confidence Colors</span><br>
|
|
<span class="tag tag-blue">Progress Visualization</span><br>
|
|
<span class="tag tag-blue">Micro-Animations</span>
|
|
</td>
|
|
<td>Supporte l'expérience émotionnelle (enthousiasme, confiance, clarté)</td>
|
|
</tr>
|
|
<tr>
|
|
<td><strong>Engagement</strong></td>
|
|
<td>
|
|
<span class="tag tag-blue">Partage Viral</span><br>
|
|
<span class="tag tag-blue">Gamification Légère</span><br>
|
|
<span class="tag tag-blue">Notifications Intelligentes</span>
|
|
</td>
|
|
<td>Crée la communauté, encourage la rétention, taux de viralité ≥ 2</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
<h3 style="color: #2563eb; margin: 25px 0 15px;">Ce que nous devons ADAPTER</h3>
|
|
<div class="pattern-list">
|
|
<div class="pattern-item">
|
|
<strong>Swipe Navigation (→ Contexte Chartbastan)</strong>
|
|
<p>Adapter le swipe Tinder pour naviguer entre matchs dans l'historique (pas pour les prédictions).</p>
|
|
<p><em>Pourquoi :</em> Swipe est rapide, mais les prédictions ne sont pas des "matches" à décider instantanément</p>
|
|
</div>
|
|
<div class="pattern-item">
|
|
<strong>Complex Gamification (→ Contexte Chartbastan)</strong>
|
|
<p>Simplifier la gamification (badges, classement) sans FOMO excessif.</p>
|
|
<p><em>Pourquoi :</em> Chartbastan doit rester sérieux et crédible, pas trop "jeu"</p>
|
|
</div>
|
|
</div>
|
|
|
|
<h3 style="color: #2563eb; margin: 25px 0 15px;">Ce que nous devons ÉVITER</h3>
|
|
<div class="pattern-list">
|
|
<div class="pattern-item" style="border-left-color: #dc2626;">
|
|
<strong style="color: #dc2626;">Onboarding Obligatoire</strong>
|
|
<p>Contraire notre but d'enthousiasme immédiat (0 friction)</p>
|
|
</div>
|
|
<div class="pattern-item" style="border-left-color: #dc2626;">
|
|
<strong style="color: #dc2626;">FOMO Forcé</strong>
|
|
<p>Contraire notre émotion de sérénité (pas d'anxiété)</p>
|
|
</div>
|
|
<div class="pattern-item" style="border-left-color: #dc2626;">
|
|
<strong style="color: #dc2626;">Publicité Intrusive</strong>
|
|
<p>Contraire notre principe de confiance via transparence</p>
|
|
</div>
|
|
<div class="pattern-item" style="border-left-color: #dc2626;">
|
|
<strong style="color: #dc2626;">Jargon Non Expliqué</strong>
|
|
<p>Contraire notre principe de respect du novice (zero jargon)</p>
|
|
</div>
|
|
<div class="pattern-item" style="border-left-color: #dc2626;">
|
|
<strong style="color: #dc2626;">Feedback Absent</strong>
|
|
<p>Contraire notre principe d'accomplissement (feedback immédiat)</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="highlight">
|
|
<h3>Résumé de la Stratégie</h3>
|
|
<p><strong>Chartbastan adoptera les patterns éprouvés des meilleures applications (Bet365, Unibet, William Hill, Tinder, Spotify, Instagram) tout en restant unique via :</strong></p>
|
|
<ul style="list-style: disc; padding-left: 25px; line-height: 1.8; color: rgba(255, 255, 255, 0.95);">
|
|
<li><strong>Mobile-first</strong> avec navigation basse, one-thumb zone, gestes intuitifs</li>
|
|
<li><strong>Confiance absolue</strong> via signaux de sécurité, transparence totale, support visible</li>
|
|
<li><strong>Publicité intelligente</strong> (placement réfléchi, qualité contrôlée, clairement identifiée)</li>
|
|
<li><strong>Visualisation intuitive</strong> (couleurs confiance, progress storytelling, micro-animations)</li>
|
|
<li><strong>Engagement viral</strong> (partage facilité, gamification légère, notifications pertinentes)</li>
|
|
</ul>
|
|
<p style="margin-top: 20px;"><strong>Unicité :</strong> 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).</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
function showSection(sectionId) {
|
|
// Hide all sections
|
|
document.querySelectorAll('.section').forEach(section => {
|
|
section.classList.add('hidden');
|
|
section.classList.remove('content');
|
|
});
|
|
|
|
// Show selected section
|
|
document.getElementById(sectionId).classList.remove('hidden');
|
|
document.getElementById(sectionId).classList.add('content');
|
|
|
|
// Update tabs
|
|
document.querySelectorAll('.nav-tab').forEach(tab => {
|
|
tab.classList.remove('active');
|
|
});
|
|
event.target.classList.add('active');
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|