Ouvre n'importe quelle page de ton site et pose-toi une seule question : si un visiteur ne regardait cet écran qu'une seconde, qu'est-ce qu'il en retiendrait ? Si la réponse est « rien de précis », tu n'as pas un problème de contenu. Tu as un problème de hiérarchie visuelle.
C'est le défaut que je retrouve dans presque tous mes audits, tous secteurs confondus. Pas des sites laids — des sites plats, où tout crie en même temps et où, du coup, personne n'entend rien.
Ce qu'est vraiment la hiérarchie visuelle
On la résume souvent à « mets un gros titre ». C'est très en dessous de la réalité.
La hiérarchie visuelle, c'est l'ordre dans lequel l'œil parcourt un écran. Ton visiteur ne lit pas ta page : il la scanne, en quelques fixations, et son cerveau décide en une fraction de seconde ce qui mérite attention. Ce chemin de lecture, tu peux le subir — ou le dessiner.
Un écran bien hiérarchisé raconte quelque chose dans un ordre choisi : voilà où tu es, voilà ce qu'on te propose, voilà la preuve, voilà quoi faire maintenant. Un écran plat livre tout en vrac et délègue le tri au visiteur. Le visiteur ne trie pas. Il part.
C'est aussi pour ça que la hiérarchie est un sujet de conversion, pas de décoration : elle décide littéralement de ce qui existe pour ton visiteur. Ce qu'il ne voit pas, tu ne l'as pas dit.
Le test de la seconde
Avant de parler technique, fais ce test — je le fais au début de chaque audit.
Affiche une page de ton site. Détourne le regard. Reviens dessus une seconde, pas plus, puis ferme l'onglet. Note ce que tu as vu : quel mot, quelle image, quel bouton.
Trois issues possibles :
Tu as vu la bonne chose : le message principal et l'action attendue. La hiérarchie fait son travail.
Tu as vu autre chose : une photo décorative, une bannière, un élément secondaire. Ta hiérarchie existe, mais elle met en avant le mauvais acteur.
Tu n'as rien retenu du tout. C'est le cas le plus fréquent — et le plus coûteux.
Fais-le faire à quelqu'un qui ne connaît pas ton site. Ce qu'il te répond en sortant, c'est ce que Google, tes prospects et tes clients perçoivent en arrivant.
Les cinq leviers
Pour dessiner un chemin de lecture, tu n'as pas besoin de mille outils. Cinq leviers suffisent — et leur point commun, c'est le contraste : un élément ne ressort jamais dans l'absolu, il ressort par rapport à ses voisins.
La taille
Le levier le plus évident, et le plus mal utilisé. Doubler la taille d'un titre ne sert à rien si tout le reste grossit aussi. La taille hiérarchise quand elle crée des écarts nets : un titre franc, un corps de texte posé, des mentions discrètes. Trois niveaux bien distincts valent mieux que six niveaux qui se touchent.
Le contraste
Un bouton terracotta sur fond crème se voit. Le même bouton au milieu de cinq autres boutons colorés ne se voit plus. Le contraste est une ressource qui s'épuise : chaque élément que tu fais ressortir affaiblit tous les autres. Dépense-le sur une seule chose par écran.
L'espace
Le blanc n'est pas du vide, c'est un projecteur. Un élément entouré d'espace gagne en importance sans grossir d'un pixel — c'est le levier préféré des marques de luxe, et celui que j'ai ramené du prêt-à-porter. Si ta page étouffe, aucun des autres leviers ne pourra travailler.
La couleur
Une couleur d'accent, réservée à l'action. C'est tout. Le jour où ta couleur d'accent sert aussi aux titres, aux icônes, aux fonds de section et aux liens, elle ne signale plus rien. Sur mes projets, le terracotta est contractuellement réservé à une chose : ce que je veux que tu fasses.
La position
On lit de haut en bas, de gauche à droite, et on accorde plus de crédit à ce qui arrive tôt. Ce que tu places au-dessus du pli engage ta promesse ; ce que tu relègues en bas de page a intérêt à être secondaire. La position, c'est de la hiérarchie gratuite — encore faut-il l'assumer et trancher ce qui passe devant.
Une action principale par écran
C'est la règle qui découle de tout le reste, et celle qui change le plus les chiffres : chaque écran a droit à une action principale. Une seule.
Pas zéro — un écran sans action est une impasse. Pas trois — trois actions égales, c'est un menu de cantine, et le visiteur qui hésite ferme l'onglet. Une action mise en avant, et le reste en retrait : plus petit, en contour, en simple lien.
Décider quelle action gagne est un choix stratégique, pas graphique. C'est souvent la conversation la plus utile que j'ai avec un client : qu'est-ce que cette page doit obtenir ? Tant que la réponse est « tout », la page n'obtient rien.
Les erreurs que je retrouve dans presque tous les audits
Tout au même niveau. Six blocs de même taille, même couleur, même poids. La page est « équilibrée » — et illisible. L'équilibre parfait est l'ennemi de la hiérarchie.
Des CTA en concurrence. « Découvrir », « En savoir plus », « Contactez-nous », « Télécharger la brochure », sur le même écran, habillés pareil. Chacun vole des clics aux autres.
Les preuves invisibles. Les chiffres, les avis, les garanties existent quelque part — en bas de page, en petit, dans un carrousel. Une preuve que l'œil ne croise pas au moment de décider ne rassure personne.
Le faux gras. Quand la moitié d'un paragraphe est en gras, plus rien n'est en gras. Même mécanique que la couleur d'accent : l'emphase se dilue à mesure qu'on la distribue.
La hiérarchie décorative. Des tailles et des couleurs qui varient au hasard de l'inspiration, sans correspondre à une importance réelle. L'œil détecte des signaux — et ils mentent.
Avant / après : la page qui voulait tout dire
Un cas type, anonymisé mais fidèle à ce que je vois passer.
Avant : un écran d'accueil avec six boutons identiques — devis, catalogue, rendez-vous, newsletter, réseaux sociaux, espace client. Tous de la même taille, tous de la même couleur. Statistiquement, il se passe ce qu'on imagine : les clics s'éparpillent, et la majorité des visiteurs n'en choisit aucun.
Après : un seul bouton plein, dans la couleur d'accent — l'action qui compte pour le business. En dessous, un lien discret vers le catalogue pour ceux qui veulent explorer. Les quatre autres entrées rejoignent le menu et le pied de page, où elles servent ceux qui les cherchent sans parasiter les autres.
Rien n'a été supprimé. Tout a été hiérarchisé. En une seconde, le visiteur sait quoi faire — et c'est exactement la définition d'un écran qui convertit.
Deux cas réels
Sur la refonte d'AcadéNice, le campus du numérique à Nice, le problème n'était pas l'offre — elle est riche — mais une navigation où tout arrivait au même niveau. On a hiérarchisé jusqu'au menu : une entrée par niveau d'études, une entrée par métier, et un seul cap mis en avant sur chaque écran, la journée d'immersion gratuite. La preuve clé — 87 % des diplômés en emploi dans les six mois — est remontée là où la décision se prend, au lieu de dormir en bas de page.
Sur La Mentina, cuisine artisanale à Bègles, l'enjeu était inverse : trois activités — boutique, ateliers, traiteur — qui risquaient de s'écraser mutuellement. La hiérarchie a pris la forme d'une séparation : trois parcours distincts dès le menu, chacun avec sa propre action principale, et un univers graphique commun pour que la marque reste une. Hiérarchiser, parfois, c'est décider que tout ne se joue pas sur le même écran.
La checklist avant de publier une page
Le test de la seconde : ce que tu retiens en une seconde est-il le message principal ?
Une action principale, une seule, et visiblement dominante ?
Trois niveaux de texte maximum, avec des écarts de taille francs ?
La couleur d'accent réservée à l'action ?
La preuve la plus forte visible sans scroller, près du moment de décision ?
De l'espace autour de ce qui compte — ou tout se touche ?
En plissant les yeux devant l'écran : est-ce que quelque chose ressort encore ?
Si tu coches tout, ta page a une colonne vertébrale. Sinon, tu sais exactement où reprendre — et c'est souvent l'affaire de quelques heures, pas d'une refonte.
La hiérarchie visuelle est la compétence la plus rentable du design d'interface : elle ne demande ni nouveau contenu, ni nouvelle techno, juste des choix assumés. Et si tu veux un regard extérieur pour faire ces choix sur ton propre site, c'est précisément ce que je fais dans mes audits.