Un visiteur ne lit pas une page web, il la parcourt. En quelques secondes, son regard repère ce qui ressort, décide si la page répond à sa question et choisit où cliquer. La hiérarchie visuelle consiste à organiser les éléments pour que ce parcours le mène naturellement vers l'essentiel. C'est l'un des fondamentaux du design web les plus efficaces.
Qu'est-ce que la hiérarchie visuelle ?
La hiérarchie visuelle est l'ordre d'importance que l'œil perçoit entre les éléments d'une page. Le titre principal doit être vu en premier, puis l'argument clé, puis le bouton d'action, et enfin les informations secondaires. Quand tout a le même poids visuel, rien ne ressort et le visiteur ne sait pas où regarder.
Une bonne hiérarchie ne se remarque pas : la page semble simplement claire et facile à comprendre.
La taille, premier levier
Les éléments les plus grands attirent le regard en premier. C'est pourquoi le titre principal est généralement le texte le plus grand de la page, suivi des intertitres. Une échelle typographique cohérente, avec des tailles bien distinctes entre titres, sous-titres et texte courant, rend la structure immédiatement lisible.
Attention à ne pas multiplier les tailles : trois ou quatre niveaux suffisent dans la plupart des cas.
Le contraste et la couleur
Un élément qui contraste avec son environnement attire l'attention. Un bouton de couleur vive sur un fond neutre est vu immédiatement. Ce principe fonctionne à condition de rester rare : si tous les éléments sont colorés, plus aucun ne se distingue.
Réservez votre couleur d'accent aux éléments qui comptent vraiment, comme l'action principale. Le contraste entre le texte et le fond doit aussi rester suffisant pour la lisibilité, conformément aux règles d'accessibilité. Le guide WCAG sur le contraste précise les ratios minimaux à respecter.
L'espacement et le regroupement
L'espace autour d'un élément le met en valeur. Un titre entouré d'espace blanc ressort davantage qu'un titre serré entre deux paragraphes. L'espacement sert aussi à regrouper : des éléments proches les uns des autres sont perçus comme liés. Un espacement cohérent rend la structure de la page compréhensible sans effort.
La position et les parcours de lecture
Dans nos cultures, l'œil parcourt une page de gauche à droite et de haut en bas. Sur les pages riches en texte, le regard suit souvent un parcours en forme de F : il lit les premières lignes, puis descend en balayant le début des lignes. Sur les pages plus visuelles, il suit plutôt un parcours en Z.
Placer les informations clés aux endroits naturellement regardés, en haut et au début des lignes, augmente leurs chances d'être vues.
Les poids et styles de texte
Le gras, l'italique, les majuscules et les couleurs de texte créent des nuances de hiérarchie à l'intérieur d'un même bloc. Le gras met en valeur un mot-clé, un texte plus clair indique une information secondaire. Utilisés avec parcimonie, ces styles guident la lecture ; utilisés partout, ils créent du bruit.
Tester la hiérarchie de vos pages
Un test simple consiste à plisser les yeux devant votre page, ou à la regarder en version floue. Les éléments qui ressortent encore sont ceux que le visiteur verra en premier. Si ce ne sont pas les plus importants, la hiérarchie doit être revue.
Un autre test consiste à montrer la page cinq secondes à quelqu'un qui ne la connaît pas, puis à lui demander ce qu'il a retenu et ce qu'il ferait ensuite. Les réponses sont souvent très instructives.
Hiérarchie visuelle et accessibilité
La hiérarchie visuelle doit correspondre à la structure du code : le titre principal en balise h1, les sections en h2, les sous-sections en h3. Les personnes qui utilisent un lecteur d'écran naviguent grâce à cette structure, et les moteurs de recherche s'en servent pour comprendre la page.
Mon conseil
Pour chaque page de votre site, définissez une seule action principale et faites-la ressortir clairement. Tout le reste doit être organisé autour, du plus important au moins important. Une hiérarchie visuelle nette rend vos pages plus agréables, plus compréhensibles et, au final, plus efficaces commercialement.
