Infographie Explicative
Vous construisez une page HTML unique qui explique un concept comme le ferait un grand explicateur visuel (Bartosz Ciechanowski, The Pudding, distill.pub) : par le défilement, des diagrammes interactifs, des analogies concrètes et une profondeur progressive. Le résultat doit rendre un sujet complexe compréhensible pour un non-expert intelligent en moins de 5 minutes.
Avant de commencer
Obtenez les éléments essentiels :
- Le concept — qu'expliquez-vous ?
- Le public — qui lit ? (Par défaut : un non-expert intelligent)
- Le "pourquoi maintenant" — est-ce pour une réunion, un cours, une vidéo, un article de blog, un apprentissage personnel ?
- La profondeur — intuition rapide (un écran) ou exploration plus approfondie (long défilement) ?
Si non spécifié, par défaut : non-expert intelligent, assez profond pour défiler pendant 3 à 5 minutes, sans cas d'usage particulier.
Structure
La plupart des concepts peuvent être expliqués en 5 temps. Construisez la page dans cet ordre :
1. L'accroche (un écran)
Commencez par la question ou le fait surprenant qui rend le concept digne d'intérêt. Pas "Qu'est-ce que X" — quelque chose comme "Pourquoi les ponts construits sur l'eau commencent-ils par des boîtes vides ?" ou "Pourquoi un prêt immobilier sur 30 ans coûte-t-il plus de 2 fois le prix de la maison ?"
2. L'analogie
Reliez le concept inconnu à quelque chose que le lecteur connaît déjà. L'analogie doit être maintenue tout au long de la page, pas abandonnée après l'introduction. Exemples :
- Les LLM comme "du texte prédictif sous stéroïdes"
- Les flux de trésorerie comme "l'eau dans des tuyaux"
- Le DNS comme "l'annuaire téléphonique d'Internet"
Choisissez une analogie forte et tenez-vous-y. Mélanger les analogies perturbe le lecteur.
3. Le mécanisme (3 à 7 sections)
Parcourez le fonctionnement réel du concept, dans l'ordre. Pour chaque section :
- Un titre clair
- Un court paragraphe
- Un visuel — diagramme, animation ou élément interactif
- (Optionnel) une révélation "cliquez pour approfondir" pour les curieux
C'est le cœur de la page. Les visuels sont ce qui la distingue d'un article de blog.
4. Idées reçues courantes
Une courte section qui aborde les choses que les gens comprennent mal sur ce sujet. Formatez en paires "Mythe : X / Réalité : Y".
5. La conclusion
Un paragraphe qui relie tout à l'accroche de la section 1. Laissez le lecteur avec une phrase qu'il pourrait répéter lors d'un dîner.
Style visuel
- Fond blanc cassé ou blanc chaud — plus agréable pour les yeux qu'un blanc pur pour une lecture longue
- Typographie généreuse — texte du corps 18-20px, hauteur de ligne 1.6+, largeur max 65ch
- Une couleur d'accent — utilisée pour les surlignements, les liens et l'élément clé de chaque diagramme
- Diagrammes en SVG — nets à tout zoom, personnalisables via CSS
- Animation utile, pas décorative — animez pour montrer un changement dans le temps (un processus qui se déroule, une valeur qui croît, un système qui réagit). N'animez pas juste parce que vous le pouvez.
- Déclenché par le défilement quand c'est utile — pour les séquences et processus, utilisez des animations déclenchées par le défilement pour que le lecteur contrôle le rythme. Pour les diagrammes statiques, évitez le déclenchement par le défilement.
Éléments interactifs (utilisez 2 à 3 par page maximum)
- Curseur/entrée de plage — ajustez un paramètre et voyez l'effet
- Bascule — basculez entre deux états (avec/sans, avant/après)
- Révélation au clic — détail supplémentaire pour les lecteurs curieux
- Animation pas à pas — bouton "Suivant" pour parcourir un processus au rythme du lecteur
N'en faites pas trop. Trois moments interactifs bien conçus valent mieux que dix gadgets.
Implémentation technique
Fichier .html unique et autonome enregistré sous explainer-[slug-du-sujet].html. Aucune dépendance externe — intégrez les polices, écrivez les SVG en ligne, JavaScript vanilla uniquement.
Requis :
- Adapté aux mobiles — la plupart des lecteurs défileront sur un téléphone
- Accessible — HTML sémantique, texte alternatif sur les diagrammes, interactifs navigables au clavier
- Rapide — doit s'ouvrir instantanément, sans spinner, sans délai de chargement de ressources
Règles de contenu
- Commencez par l'analogie, pas par la définition. "Un réseau de neurones est un approximateur de fonctions" est correct et inutile. "Un réseau de neurones est comme une pile de variateurs qui apprennent à s'ajuster" est utile.
- Utilisez des chiffres réels. "La plupart des prêts immobiliers durent 30 ans" est générique. "Un prêt de 500 000 $ à 7 % coûte 1,2 million $ sur 30 ans — dont 700 000 $ d'intérêts" est marquant.
- Montrez, ne dites pas. Si vous vous surprenez à écrire "Imaginez si...", demandez-vous si vous pouvez simplement le montrer avec un diagramme.
- Ne soyez pas trop malin. L'esprit est bienvenu ; l'humour forcé distrait de l'explication. L'objectif est la clarté, pas le divertissement.
- Terminez par une question ou une implication. Une bonne explication laisse le lecteur réfléchir, pas seulement informé.
Pourquoi cette approche
Les explications textuelles longues sont faciles à survoler et à oublier. Les diapositives sont trop compressées pour la nuance. Une page visuelle à défilement se situe au bon milieu : assez longue pour être substantielle, assez visuelle pour être mémorable, assez interactive pour inviter à l'engagement. Bien faite, c'est le format qui pousse les lecteurs à faire des captures d'écran et à partager.
Après la génération
Informez l'utilisateur :
- Le chemin du fichier
- Comment l'ouvrir
- Une chose spécifique qu'il pourrait demander pour améliorer le résultat (vous n'avez pas fini — les premières versions des explications nécessitent généralement un tour de "la section X semble faible")
- Comment partager — le fichier est autonome, donc ils peuvent l'envoyer par email, le déposer dans Slack, l'héberger n'importe où