Hiérarchie visuelle : guider le regard et clarifier vos pages

Vous arrivez sur une page web.

Il y a un titre, trois paragraphes, deux images, quatre boutons, un menu, quelques cartes et probablement quelqu’un qui aimerait beaucoup que vous vous inscriviez à sa newsletter.

Tout ce petit monde aimerait attirer votre attention. Le problème, c’est que tout ne peut pas être important en même temps.

Si tous les titres sont énormes, aucun ne paraît vraiment important. Si tous les boutons utilisent la couleur la plus visible du site, ils finissent par se ressembler. Et si chaque section cherche à attirer votre regard plus fortement que la précédente, bon courage !

C’est précisément le rôle de la hiérarchie visuelle : organiser les éléments d’une page afin d’aider le visiteur à comprendre, presque instinctivement, où regarder, quoi lire et quelle action effectuer ensuite.

Pas besoin pour autant de transformer votre site en sapin de Noël. Quelques principes simples suffisent déjà à changer énormément de choses.

Nous parcourons une page avant de la lire

Lorsque nous arrivons sur une page, nous commençons généralement par la parcourir du regard.

Nous repérons un grand titre, une image, un bouton ou quelques mots mis en valeur. Si ce que nous voyons nous intéresse, nous commençons alors réellement à lire.

Steve Krug résumait déjà très bien cette idée dans Don’t Make Me Think : sur le Web, nous avons davantage tendance à parcourir rapidement les pages qu’à les lire consciencieusement de haut en bas.

Cela change beaucoup de choses lorsqu’on conçoit un site, car une page doit pouvoir être comprise avant même que tous ses textes soient lus.

Prenons une hero classique. En quelques secondes, je devrais pouvoir identifier :

• ce que propose le site ;
• l’information principale ;
• l’action que vous souhaitez me voir effectuer.

Si je dois lire trois paragraphes pour comprendre où je suis, quelque chose mérite probablement d’être revu.

La hiérarchie visuelle sert précisément à faciliter cette première lecture.

Commencez par décider ce qui est vraiment important

Cela paraît évident, mais c’est probablement l’étape que l’on saute le plus facilement.

Quand je conçois une page, je ne commence pas par me demander : « Qu’est-ce que je pourrais mettre en gros ? » Je commence plutôt par deux questions :

• Qu’est-ce que la personne doit comprendre ici ?
• Qu’est-ce que j’aimerais qu’elle fasse ensuite ?

La nuance est importante, car la hiérarchie visuelle ne consiste pas simplement à rendre une page plus jolie. Elle sert d’abord à traduire visuellement la hiérarchie du contenu.

Dans une section hero, par exemple :

• le titre principal présente l’information essentielle ;
• le petit surtitre apporte éventuellement du contexte ;
• le paragraphe précise la proposition ;
• le bouton permet de passer à l’action.

Cette priorité peut naturellement évoluer au fil de la page. La hero peut orienter vers l’action principale, une section portfolio vers les réalisations et une autre vers un contenu à approfondir. L’essentiel est qu’à chaque étape, plusieurs éléments ne réclament pas simultanément la première place.

Chaque élément possède ainsi un rôle et un niveau d’importance. Aucun n’a besoin de crier pour être remarqué. 🙂

C’est aussi pour cette raison que je préfère travailler la structure et les contenus avant de commencer réellement le design.

Si je ne sais pas quelle information est la plus importante, il devient difficile de lui donner le bon poids visuel.

Rien n’a été ajouté. Rien n’a été retiré. En donnant simplement un rôle et un niveau d’importance à chaque élément, la lecture devient naturellement plus évidente.

La taille est le levier le plus évident

Si je vous montre ceci :

Important

et ceci :

Important

Vous avez probablement déjà décidé lequel des deux éléments comptait le plus. Pas besoin d’un doctorat en psychologie cognitive. 🙃

La taille est l’un des moyens les plus simples de créer une hiérarchie, particulièrement lorsqu’il s’agit de textes.

Un H1 doit pouvoir être distingué d’un H2, un H2 d’un H3, et tous doivent clairement se différencier du corps de texte. Cela ne signifie pas pour autant que chaque niveau doit être gigantesque.

Si tout est énorme, vous obtenez simplement plusieurs éléments énormes. Ce qui compte vraiment, ce sont les relations entre les différentes tailles.

C’est pour cette raison que je préfère aujourd’hui utiliser une échelle typographique cohérente plutôt que de choisir chaque valeur indépendamment.

J’aborde plus précisément les tailles, la largeur de lecture, la hauteur de ligne et le rythme typographique dans mon article Design des textes : rendre vos contenus plus lisibles et agréables à lire.

Ici, retenez surtout ceci :

Un élément n’a pas besoin d’être énorme pour paraître important. Il doit surtout être suffisamment différent de ce qui l’entoure.

Le contraste guide naturellement le regard

Imaginez une page presque entièrement noire et blanche, puis ajoutez un seul bouton rouge. Vous savez immédiatement où regarder.

C’est tout l’intérêt du contraste visuel. La couleur permet d’en créer, mais elle est loin d’être le seul moyen.

On peut notamment opposer :

• clair et foncé ;
• grand et petit ;
• gras et léger ;
• plein et vide ;
• dense et aéré.

Un élément attire notre attention lorsqu’il se différencie suffisamment de son environnement.

C’est aussi pour cette raison que j’évite aujourd’hui de distribuer ma couleur d’accent partout. Sur ComnWeb, par exemple, le rouge argile est volontairement utilisé avec parcimonie.

S’il apparaissait sur chaque titre, chaque lien, chaque icône, chaque bordure et chaque bouton, il ne mettrait plus grand-chose en valeur. Une couleur d’accent reste intéressante précisément parce qu’elle reste… un accent.

Ce principe est particulièrement utile pour hiérarchiser les appels à l’action. Je développe cette manière de choisir et d’utiliser chaque couleur selon son rôle dans Choisir les couleurs d’un site web : une méthode simple pour construire une palette cohérente.

Tous les boutons ne méritent pas le même poids

Plusieurs actions peuvent être proposées sur une même page, mais elles n’ont pas toujours la même importance.

L’action principale peut prendre la forme d’un bouton plein utilisant une couleur contrastée. Une action secondaire peut être plus discrète : bouton en contour, lien textuel ou simple flèche.

Le but n’est pas de la cacher, mais de rendre l’ordre de priorité immédiatement compréhensible.

Si vous avez six boutons rouges identiques dans le même écran, vous n’avez probablement pas six actions principales. Vous avez surtout six boutons rouges.

Les mêmes actions restent accessibles, mais elles ne possèdent plus toutes la même importance : une action principale guide désormais clairement le parcours.

L'espace crée lui aussi une hiérarchie

L’espace est probablement l’un de mes leviers préférés, car il permet de hiérarchiser une page sans ajouter quoi que ce soit.

Un élément bien isolé prend naturellement davantage d’importance. À l’inverse, plusieurs éléments rapprochés sont perçus comme appartenant au même ensemble.

Ce principe permet de structurer une page très simplement. Un titre reste proche de son paragraphe, l’espace augmente avant le groupe suivant, puis devient encore plus généreux entre deux grandes sections.

Progressivement, la page devient compréhensible grâce aux relations qui se dessinent entre ses différents éléments.

J’explique plus précisément comment utiliser ces relations pour structurer une page dans Les espacements en webdesign : créer des pages plus claires et cohérentes.

Retenez simplement que le vide possède lui aussi un poids visuel. Il peut séparer, regrouper ou mettre en valeur.

Avant d’ajouter une bordure, une ligne ou une couleur de fond supplémentaire, demandez-vous donc si un peu d’espace ne ferait pas déjà très bien le travail.

Un titre proche de son paragraphe

Cette faible distance indique que les deux éléments appartiennent au même ensemble.

Un second bloc dans la même section

L’espace augmente légèrement pour distinguer les deux idées sans les séparer complètement.

Une nouvelle section commence ici

Une respiration plus généreuse signale qu’un nouvel ensemble de contenus débute.

Un second bloc lié à cette section

Le titre se rapproche à nouveau de son paragraphe pour rendre leur relation évidente.

Plus les contenus sont liés, plus l’espace qui les sépare est réduit.

L'alignement apporte de l'ordre

L’alignement est moins spectaculaire que la taille ou la couleur. Pourtant, lorsqu’il est mauvais, on le ressent immédiatement.

Il suffit parfois de quelques petits décalages :

• un titre qui ne commence pas au même endroit que les autres ;
• des cartes dont les contenus ne commencent pas exactement au même niveau ;
• une image qui ne suit aucune ligne commune avec le texte.

Pris séparément, ces détails semblent anecdotiques. Mais lorsqu’ils s’accumulent, ils peuvent donner cette impression assez frustrante que « quelque chose cloche », sans que l’on parvienne vraiment à identifier quoi.

J’aime donc chercher des lignes communes dans mes compositions :

• les titres commencent au même endroit ;
• les contenus d’une grille suivent la même structure ;
• les boutons d’une série de cartes s’alignent lorsque c’est pertinent.

Cela ne signifie pas que tout doit être parfaitement symétrique. Un alignement cohérent aide simplement l’œil à comprendre que plusieurs éléments entretiennent une relation.

C’est encore une manière de créer de l’ordre sans ajouter de décoration.

Quelques lignes communes suffisent à rendre une composition plus ordonnée, sans imposer une symétrie parfaite.

Le haut de la page compte… mais il ne doit pas tout contenir

Pendant longtemps, on a beaucoup parlé de la fameuse « ligne de flottaison ». Tout ce qui était important devait absolument apparaître avant le premier défilement, sinon c’était la catastrophe. 😱

Je serais beaucoup plus nuancé aujourd’hui.

Le haut d’une page reste stratégique : c’est là que se forme la première impression et que le visiteur décide s’il souhaite continuer. Le défilement fait cependant partie de nos usages, à condition que ce premier écran donne suffisamment d’informations et d’intérêt pour découvrir la suite.

Le véritable enjeu n’est donc pas de tout faire entrer dans le premier écran, mais de présenter ce qui permettra au visiteur de comprendre où il se trouve et pourquoi il devrait poursuivre.

Une section hero n’a pas besoin de raconter toute votre entreprise. Elle doit surtout répondre rapidement à quelques questions :

• Où suis-je ?
• Qu’est-ce qu’on me propose ?
• Pourquoi devrais-je continuer ?

Le reste peut parfaitement arriver ensuite.

Personnellement, je préfère largement une hero claire et aérée à un premier écran dans lequel on a essayé de faire entrer toute la brochure commerciale.

Regardez aussi votre page dans son ensemble

Lorsque je termine une page, j’aime aussi la regarder dans son ensemble.

Une capture complète ou un affichage légèrement dézoomé permet de prendre du recul sur la composition. Je ne cherche pas à lire chaque phrase, mais à observer le parcours général :

• qu’est-ce qui attire l’attention en premier ?
• les sections sont-elles clairement séparées ?
• certaines zones semblent-elles trop denses ou trop vides ?
• les éléments importants ressortent-ils suffisamment ?
• la page conserve-t-elle un rythme cohérent jusqu’à la fin ?

Cette vue d’ensemble fait parfois apparaître des déséquilibres que l’on ne remarque pas lorsqu’on travaille section après section.

Elle ne remplace évidemment pas une lecture détaillée ni des tests sur différents écrans. Elle permet simplement de vérifier que la hiérarchie reste compréhensible à l’échelle de toute la page.

La hiérarchie visuelle commence par celle du contenu

Plus je construis de sites, plus ce principe me paraît important.

On pourrait croire que la hiérarchie visuelle apparaît au moment de choisir les tailles, les couleurs et les espacements. En réalité, elle commence bien plus tôt, lorsque l’on décide :

• ce qui doit apparaître sur la page ;
• ce qui peut être supprimé ;
• dans quel ordre présenter les informations ;
• ce qui mérite d’être mis en avant ;
• ce que l’on attend réellement du visiteur.

Le design vient ensuite rendre ces décisions visibles.

Avant d’ajouter un nouveau traitement, je vérifie donc si la taille, le contraste ou l’espace déjà en place suffisent à créer la priorité recherchée.

C’est probablement pour cette raison qu’une page très simple peut sembler beaucoup plus professionnelle qu’une composition spectaculaire. Elle sait ce qu’elle veut dire et le montre clairement.

Pour aller plus loin

La hiérarchie visuelle repose notamment sur la manière dont les textes sont organisés et sur les relations créées par les espacements. Pour approfondir ces deux aspects, vous pouvez poursuivre avec :

→ Design des textes : rendre vos contenus plus lisibles et agréables à lire
Pour construire une hiérarchie typographique cohérente et améliorer le confort de lecture.

→ Les espacements en webdesign : créer des pages plus claires et cohérentes
Pour comprendre comment les distances entre les éléments structurent une page.

Et maintenant ?

Cet article fait partie des principes que j'utilise quotidiennement pour concevoir mes sites.

Vous voulez continuer à apprendre.

Découvrez mon guide gratuit pour préparer, concevoir et faire durer un site professionnel.