Carte interactive
Cette roadmap est conçue pour une navigation sur écran d'ordinateur. Pour une expérience optimale, ouvrez cette page sur un écran plus large.
Un site internet ne devrait pas être juste une vitrine. Il devrait être un outil : un espace où l’utilisateur peut interagir, comprendre, et repartir avec quelque chose de concret.
Cet article détaille la deuxième phase du projet Bao-Link : la construction d’un site Astro 100% sur mesure, sans template, centré sur ce que les utilisateurs veulent voir, manipuler et comprendre.
Après la migration de WordPress vers Astro, il ne s’agissait pas juste de reproduire le même site dans un nouveau framework.
L’objectif était de repenser complètement ce qu’un site peut offrir : documentation interactive, composants visuels pour illustrer des concepts, outils intégrés, et une expérience utilisateur qui donne envie d’explorer.
Un site vitrine traditionnel est unidirectionnel : l’utilisateur regarde, lit, puis s’en va. Pas d’interaction, pas de personnalisation, pas de raison de revenir.
Les documentations techniques sont souvent de longs textes sans visuels, sans exemples interactifs. L’utilisateur doit tout lire avant de comprendre, ce qui augmente le taux d’abandon.
Un site fait avec un template ressemble à des centaines d’autres. Aucune identité visuelle forte, aucune expérience mémorable. L’utilisateur ne se souvient pas de son passage.
La vision du projet Bao-Link est simple : un site doit servir à l’utilisateur, pas à son propriétaire.
Au lieu de présenter passivement du contenu, chaque page devrait permettre à l’utilisateur de :
Les composants interactifs (<CodeSnippet>, <ComparisonSlider>, <InteractiveTabs>) permettent de voir le code en action, pas juste de le lire.
Les démonstrations interactives (<RoadmapCanvas>, <Checklist>, <FileTree>) donnent à l’utilisateur le contrôle de son apprentissage.
Une navigation pensée, des tags, des articles connexes : tout est fait pour que l’utilisateur trouve ce qu’il cherche en quelques clics.
Un site traditionnel, c’est comme un manuel : tu lis, tu tournes les pages, mais tu ne peux pas interagir. Le site Bao-Link, c’est comme un musée interactif.
Le contenu interactif génère 4× plus d'engagement actif que la lecture passive
Les pages interactives retiennent l'attention 38% plus longtemps que les pages statiques
Scores de mémorisation améliorés (77% vs 68%) avec l'apprentissage interactif vs texte statique
Chaque concept technique est illustré par un composant visuel. Par exemple, la <ComparisonSlider> montre l’avant/après d’une optimisation, le <LighthouseScore> affiche les résultats réels, et le <CodeBlock> permet de copier du code prêt à l’emploi.
Chaque article suit une structure claire : [Problème → Diagnostic → Solution → Patron réutilisable]. L’utilisateur peut appliquer immédiatement ce qu’il apprend, sans avoir à chercher ailleurs.
Les articles ne sont pas de simples blocs de texte. Chaque article peut intégrer des démonstrations interactives, des tableaux de données, des FAQ, des checklists, et des liens vers des articles connexes via <PreviewLink>.
Le système de related_connections permet de lier les articles entre eux : prérequis, articles connexes, alternatives. L’utilisateur n’est jamais perdu.
Les <Checklist> avec <storageKey> sauvegardent l’état localement. L’utilisateur peut suivre sa progression dans un guide, revenir plus tard, et retrouver où il en est.
Des composants comme <DataTable>, <InteractiveTabs>, <Timeline> transforment des informations complexes en visuels clairs et compréhensible.
Si vous souhaitez en découvrir plus voici la page des différents elements
ArticleL'Article Parfait – Guide SEO Complet Bao-LinkDécouvrez comment structurer un article optimisé SEO sur Bao-Link : métadonnées, structure, blocs de contenu interactifs et checklist de publication.
Chaque composant, chaque choix de layout, chaque interaction repose sur des recherches en psychologie cognitive et des méthodologies marketing éprouvées.
Les études du Nielsen Norman Group montrent que les utilisateurs scannent les pages en F (contenu textuel) ou en Z (contenu visuel). La navigation, les titres, et les CTA sont positionnés en conséquence : pas par hasard, mais par conscience du comportement réel des visiteurs.
Le cerveau humain fonctionne en deux modes : Système 1 (rapide, intuitif, automatique) et Système 2 (lent, analytique, effort). Le site est optimisé pour le Système 1 : les utilisateurs scannent, ne réfléchissent pas. Chaque élément doit être compréhensible en un coup d’œil.
Le cerveau a une capacité limitée d’information simultanée (Sweller, 1988). Les pages réduisent cette charge : progressive disclosure, composants isolés, documentation par étapes. L’utilisateur comprend sans être submergé.
Plus il y a de choix, plus la décision prend du temps. Le site réduit le nombre d’options : navigation minimale, CTA unique, progressive disclosure. L’utilisateur ne choisit pas entre 20 options : il avance.
6 motivations psychologiques d’achat : Sécurité, Orgueil, Nouveauté, Confort, Argent, Sympathie. Le contenu est structuré pour parler la langue de chaque motivation, pas un message unique qui espère toucher tout le monde.
4 profils comportementaux : Dominant, Influence, Stabilité, Conformité. Chaque profil perçoit l’information différemment. Le ton et la structure s’y adaptent, un principe qui dépasse la simple UX et rejoint le projet Personas.
Ces méthodes ne s’appliquent pas en silo.
Elles se combinent et se renforcent mutuellement : DISC identifie le profil, SONCAS détermine le message, les patterns de lecture placent ce message au bon endroit, et la charge cognitive garantit qu’il est compris.
L’interactivité est le liant qui transforme ces frameworks théoriques en expérience concrète : l’utilisateur ne lit pas un concept, il le vit.
Pour aller plus loin, l’article Article en cours de rédaction : frameworks-copywriting détaille AIDA, PAS, la preuve sociale et d’autres biais cognitifs qui renforcent ces mêmes principes.
Un composant interactif n’est pas qu’une vitrine : c’est un profil DISC qui s’active et une corde SONCAS additionné à la Loi de Hick qui résonne : un message ciblé, sans choix superflux, qui répond à une motivation spécifique.
L’interactivité ne rend pas juste le contenu plus attrayant : elle multiplie l’impact de chaque fondement psychologique en le rendant tangible.
« Dis-moi et j’oublie, montre-moi et je me souviens, implique-moi et je comprends. » Ce proverbe, souvent attribué à Edgar Dale, résume exactement la philosophie du site : chaque composant interactif transforme l’observateur en acteur : il ne regarde pas, il touche, teste, et retient.
Le site Bao-Link n’est plus un simple site vitrine. C’est un écosystème de connaissances où chaque visiteur peut apprendre, expérimenter et appliquer. Les retours utilisateurs montrent que la durée de session a augmenté et que les pages vues par session sont bien au-dessus de la moyenne d’un site vitrine classique.
Score Lighthouse Performance
Score Lighthouse Accessibility
Score Lighthouse SEO
Le site étant généré statiquement avec Astro, il n’y a aucune base de données, aucun script superflu, et aucune dépendance lourde. Chaque page ne charge que le JavaScript nécessaire à ses composants interactifs. Le résultat : des scores parfaits sur tous les critères.
Sans template, chaque composant a dû être écrit et testé individuellement. Les 49+ composants représentent un investissement en développement significatif. Pas de raccourci possible.
Sans framework CSS imposé, il a fallu définir et maintenir un design system : couleurs, typographie, espacements, modes clair/sombre. Une erreur de cohérence se voit immédiatement quand tout est fait main.
Chaque composant interactif ajoute du JavaScript. L’architecture islands d’Astro permet de ne charger que le JS nécessaire, mais il faut concevoir chaque composant avec la performance en tête.
Aucun composant n’a été créé « au cas où ». Chacun répond à un besoin utilisateur spécifique : comprendre un concept, visualiser une différence, suivre une progression. Cette discipline évite le bloatware.
Le site n’est pas « beau » pour être beau. Chaque choix visuel est motivé par l’utilisabilité : lisibilité, navigation, accessibilité. Un site accessible et utilisable est naturellement beau.
La documentation technique n’est pas un sous-produit : c’est le cœur du site. En investissant dans des composants de documentation interactifs, on transforme un guide technique en expérience utilisateur valorisante.
Pages statiques, contenu figé. L’utilisateur lit et s’en va. Aucune interaction, aucun engagement.
Longs textes sans visuels, sans exemples concrets. L’utilisateur doit tout lire avant de comprendre.
Rien ne retient l’utilisateur. Il passe, il oublie. Aucune raison de revenir ou de recommander le site.
L’utilisateur manipule le contenu, il ne le lit pas passivement. Les démonstrations interactives transforment la compréhension.
49+ composants pour illustrer, démontrer et interagir
L’utilisateur apprend en faisant. Il peut copier du code, tester des concepts, et appliquer immédiatement ce qu’il découvre.
Patrons réutilisables, exemples concrets, code prêt à copier
L’utilisateur se souvient de son passage. Le site est recommandé, partagé, et les visiteurs reviennent.
Site 100% sur mesure, pensé pour l'utilisateur de bout en bout
Le site Bao-Link n’est pas le résultat d’un template ou d’un CMS. C’est le résultat d’une réflexion continue sur ce que les utilisateurs attendent d’un site technique :
Ce projet a posé les bases d’une approche qui s’étendra à d’autres projets liés : Article en cours de rédaction : diag-application pour la veille concurrentielle, Article en cours de rédaction : persona pour parler a vos utilisateurs, et d’autres outils a venir qui suivent la même philosophie :
Ne pas faire un site pour le faire, mais le construire pour ceux qui l’utilisent.
.astro dans src/components/blog/. Ils sont écrits en Astro + TypeScript, avec du Tailwind CSS pour le style. Certains utilisent du JavaScript côté client pour l'interactivité (composants islands).Vos progrès sont sauvegardés localement sur votre appareil. Aucune donnée n'est collectée. La durée de conservation dépend de la durée de rétention des données de votre navigateur.
On conçoit ensemble un site sur mesure, pensé pour vos utilisateurs, avec des composants interactifs qui transforment l'expérience.
Retour sur le premier site Bao-Link sous WordPress : les limites d'un CMS générique, la prise de conscience que tout le monde se ressemble, et le passage à Astro pour reprendre le contrôle.
Construisez et organisez votre bibliothèque de composants UI : design tokens, atomic design, Figma ↔ code, Storybook, et workflow complet du design au déploiement.
Découvrez comment structurer un article optimisé SEO sur Bao-Link : métadonnées, structure, blocs de contenu interactifs et checklist de publication.
Le projet Bao-Link raconte l'évolution du site et de ses outils: la création d'un premier site WordPress vitrine, puis le passage à Astro avec un site 100% sur mesure, sans template, centré sur le SEO et l'expérience utilisateur ainsi que les projets liés : diag-application et personas.
Étude de cas complète : migration d'un site e-commerce WordPress/WooCommerce vers une architecture Astro SSR + proxy Express, avec déploiement et optimisation SEO.
Étude de cas complète : création d'un site WordPress professionnel puis migration vers Hugo pour des performances optimales et un SEO décuplé.
Discutons ensemble de vos objectifs et transformons votre vision en une réalité performante et pérenne.
