Écrit par Emmanuel Cruellas, cofondateur et directeur du design de Bonhomme.

Mécanisme 1 : Reconnaissance sans effort
Le cerveau est un machine de reconnaissance de patterns. Quand les patterns sont clairs et répétitifs, le cerveau les reconnaît immédiatement, sans dépenser d'énergie à décoder. La cohérence visuelle crée des patterns implicites : cette typographie dans ce contexte signifie toujours la même chose. Cette couleur communique toujours la même émotion. Cet espacement respects toujours la même logique. L'utilisateur ne doit jamais se demander : "Pourquoi cette police maintenant ?" ou "Pourquoi cette couleur ici ?" Si elle doit se poser la question, c'est qu'il y a une anomalie.
La reconnaissance sans effort génère une sensation agréable : le cerveau aime économiser de l'énergie. Cette sensation est attribuée positivement à la marque : "Ça marche bien, ça semble fiable."
Mécanisme 2 : Signal de maîtrise
L'incohérence signale l'improvisation. L'incohérence dit : "On n'a pas beaucoup réfléchi à ça." La cohérence signale exactement l'inverse : "On sait ce qu'on fait."
La confiance suit la maîtrise perçue. Un site incohérent, même beau visuellement, communique l'improvisation. Un site cohérent, même simple, communique le contrôle.
Exemple : Un site luxury avec une typographie qui change entre les pages, une palette de couleurs qui varie selon le produit, un espacement qui n'obéît pas à une grille, cet utilisateur ne conclura pas "ah, c'est flexible". Il conclura "ces gens ne maîtrisent pas leur affaire".
La maîtrise perçue augmente la valeur perçue. Les marques premium sont perçues comme premium en grande partie parce qu'elles maîtrisent chaque détail. La cohérence est la preuve tangible de cette maîtrise.
Mécanisme 3 : Prévisibilité et sécurité
L'incohérence crée l'imprévisibilité. L'utilisateur se demande : "Qu'est-ce qui va se passer ensuite ?" Cette incertitude génère une petite dose de stress.
La cohérence crée la prévisibilité. L'utilisateur sait ce qu'il va trouver. Il sait comment l'interface se comportera. Cette prévisibilité génère un sentiment de sécurité.
La sécurité est le fondement de la confiance. Un site cohérent dit : "Tu sais où tu es. Tu sais comment je fonctionne. Tu peux te détendre."
Exemple : Un utilisateur qui vient pour la première fois navigue un site cohérent. Il comprend les patterns visuels en moins de 30 secondes. Il sait comment interagir avant même d'essayer. Cette sécurité immédiate augmente la probabilité d'achat.

Composant 1 : Cohérence typographique
La typographie est le premier élément visuel traité par le cerveau. Elle communique immédiatement un niveau de sophistication, d'époque, de soin.
La cohérence typographique signifie :
• Une seule typographie pour les titres dans tout le site (pas deux, pas trois)
• Une seule pour le corps (pas de changement selon la page)
• Des tailles qui obéissent à une échelle claire (12px, 16px, 20px, 28px, 36px...)
• Une hauteur de ligne constante
• Une longueur de ligne constante (pas de texte ultra-long sur une page, ultra-court sur une autre)
Chaque déviation de ces règles détruit un peu la cohérence perçue.
Composant 2 : Cohérence chromatique
La couleur communique. Elle communique l'émotion (rouge = urgence, bleu = confiance, vert = sécurité). Quand la couleur varie sans raison, elle communique l'incohérence.
La cohérence chromatique signifie :
• Une palette primaire de 3-5 couleurs maximum
• Chaque couleur avec un rôle clair : primaire pour les CTA, secondaire pour les highlights, tertiaire pour les accents
• Pas de "couleur du jour"
• Les accents de couleur utilisés systématiquement dans les mêmes contextes
Une palette cohérente communique de l'intention. "On a réfléchi à chaque couleur, et elle a un sens."
Composant 3 : Cohérence spatiale
L'espace (ou "whitespace") est un élément de design aussi important que la couleur ou la typo. La cohérence spatiale signifie que les margins, paddings, et gaps obéissent à un système.
La cohérence spatiale signifie :
• Une grille de base (8px, généralement) appliquée partout
• Les margins/paddings qui sont toujours des multiples de cette base (8px, 16px, 24px, 32px...)
• Les écarts entre sections constantes (pas 40px parfois, 60px d'autres fois)
• L'espace blanc qui respecte la même logique que l'espace rempli
L'espace cohérent communique l'ordre. "Cet endroit est organisé."
Composant 4 : Cohérence hiérarchique
La hiérarchie visuelle dit à l'utilisateur où regarder en premier, en second, en troisième. Une hiérarchie cohérente utilise les mêmes signaux (taille, poids, couleur, contraste) pour communiquer les mêmes niveaux d'importance.
La cohérence hiérarchique signifie :
• Les H1 ont toujours le même poids, la même taille, la même proximité au contenu
• Les H2 obéissent aux mêmes règles
• Les CTA (Call To Action) sont toujours reconnaissables au premier coup d'œil
• Les informations secondaires sont toujours visuellement secondaires
La hiérarchie cohérente guide l'utilisateur automatiquement. Il n'a pas à réfléchir.
Composant 5 : Cohérence densité
La densité est la quantité d'information par zone. Un site peut être dense (beaucoup d'info, peu d'espace) ou sparse (peu d'info, beaucoup d'espace).
La cohérence densité signifie que le choix de densité est constant. Pas de page dense suivie d'une page sparse. Pas d'inconsistance qui fait dire à l'utilisateur : "Où suis-je ?"

La cohérence est l'une des preuves tangibles les plus fortes que la marque est premium. Voici le lien causal :
• La cohérence signale la maîtrise
• La maîtrise signale la qualité
• La qualité justifie un prix plus élevé
Les marques premium dont la valeur perçue est disproportionnée au prix réel ont presque toujours
une cohérence visuelle exceptionnelle.

Après avoir audité plus de 125 sites de marques premium et refondu plus de 30 d'entre eux,
Bonhomme observe :
• Les sites premium ont zéro anomalies visuelles majeures. Une police qui dévie, une couleur qui varie, un espacement qui change, et la perception s'écroule immédiatement.
• Une seule anomalie bien placée peut réduire le score de confiance de 30%. Pas de compensation avec d'autres points forts.
• La cohérence ne remplace pas la qualité du contenu, mais elle l'amplifie. Un contenu bon dans un site cohérent semble encore mieux. Le même contenu dans un site incohérent semble moins bon.
• Les utilisateurs ne formulent jamais "c'est incohérent". Mais ils disent "quelque chose ne va pas" ou "je ne suis pas sûr". Ils sentent l'incohérence sans la nommer.
• La cohérence typographique a le plus fort impact sur la confiance perçue. C'est le premier élément qu'un utilisateur traite.
• Les sites qui perdent le plus en confiance sont ceux qui ont changé de plateforme sans refondre l'identité visuelle. L'incohérence produit une sensation de "maintenance en cours".

Étape 1 : Définir un design system
Un design system est la documentation de toutes les règles visuelles. Il spécifie :
• La/les typographies et leurs usages précis
• La palette chromatique et le rôle de chaque couleur
• La grille d'espacement (base 8px généralement)
• Les règles de hiérarchie
• Les exceptions autorisées (il y en a très peu)
Étape 2 : Automatiser la cohérence
L'automatisation est la clé. Un design system doit être implémenté en CSS/composants réutilisables, pas en manuels PDF qu'on ignore.
Exemple : Plutôt que dire "utilise la typographie de titre H1 : Helvetica, 36px, bold", créer un composant <h1> CSS qui applique ces règles automatiquement. Le designer n'a rien à décider. La cohérence est garantie.
Étape 3 : Former les équipes
La cohérence ne se crée pas seule. Il faut une discipline. Les équipes doivent comprendre pourquoi elle importe (confiance, valeur perçue) et pas juste quoi faire.
Étape 4 : Auditer régulièrement
Chaque nouveau feature, chaque nouvelle page peut introduire une anomalie. Un audit mensuel sur les cohérences typographique, chromatique et spatiale est standard chez les meilleures marques.

• Penser que la cohérence c'est l'ennui. La cohérence ne signifie pas "un site gris et sans vie". Elle
signifie que chaque couleur, chaque typographie, chaque espace a un sens.
• Créer un design system et ne pas l'implémenter. Les PDF et Figma ne suffisent pas.
L'implémentation code est obligatoire.
• Permettre des exceptions "pour un cas spécial". Les cas spéciaux deviennent des précédents. En 6 mois, le site a 10 exceptions incohérentes.
• Confondre cohérence et monotonie. Une marque peut être cohérente ET diverse. L'Instagram de
Apple est cohérent ET visiblement varié.
• Ignorer les micro-incohérences. "C'est juste une couleur légèrement différente." Ces petites
choses s'accumulent.
• Changer la palette ou la typo tous les ans. La cohérence gagne avec le temps, pas contre lui.

Principe 1 : La cohérence est invisible quand elle fonctionne
L'utilisateur ne remarque pas la cohérence. Il la sent. C'est le contraire de la beauté, qui peut être remarquée. La cohérence c'est le fondement sur lequel repose la beauté.
Principe 2 : L'incohérence est très visible
L'utilisateur ne dit pas "c'est incohérent". Il dit "quelque chose ne va pas". L'incohérence crée un malaise subconscient.
Principe 3 : La cohérence crée la confiance, pas l'inverse. Tu ne peux pas construire la confiance et ensuite ajouter la cohérence. La cohérence EST le
fondement de la confiance.
Principe 4 : La cohérence au service de l'utilisateur
La cohérence n'existe pas pour impressionner. Elle existe pour guider. Pour réduire la friction. Pour créer de la sécurité.
Principe 5 : La cohérence se construit avec le temps
Chaque page cohérente s'ajoute à la perception. Un utilisateur qui traverse 5 pages incohérentes entre dans un état de doute. Un utilisateur qui traverse 5 pages cohérentes entre dans un état de confiance.

Bonhomme a comparé sites cohérents vs incohérents dans les mêmes catégories de marques premium :
• Taux de conversion : +28-35% sur les sites cohérents
• Durée moyenne de visite : +45-60% sur les sites cohérents
• Taux d'abandon de panier : -25-30% sur les sites cohérents
• Taux de retour : +35-50% sur les sites cohérents
• Score de confiance (NPS) : +20-30 points sur les sites cohérents

"La cohérence visuelle est la preuve tangible que la marque maîtrise son affaire. C'est la forme visible
de la promesse."
Morgane Urbain, cofondatrice & directrice de création
"Un site incohérent est comme une personne qui dit "fais-moi confiance" en étant mal habillée et sans cohérence. Les mots disent une chose, l'apparence dit le contraire. Le utilisateur croit l'apparence."
Emmanuel Cruellas, co-fondateur & directeur du design