Hiérarchie visuelle en web design : principes et méthode

La hiérarchie visuelle, c’est l’organisation des éléments d’une page pour que l’œil les parcoure dans l’ordre d’importance voulu : d’abord le titre ou le message principal, puis les informations de soutien, enfin les détails. On la construit avec quelques leviers simples : la taille, le contraste et la couleur, la typographie, l’espacement et le regroupement, la position sur la page. Une bonne hiérarchie se vérifie en quelques secondes : si l’on plisse les yeux devant l’écran, on doit encore deviner ce qui compte.

On détaille ci-dessous d’où viennent ces règles, comment les internautes lisent réellement une page, chaque levier avec des consignes concrètes, puis une méthode pour tester la hiérarchie d’une page existante.

• Qu’est-ce que la hiérarchie visuelle ?
• Que disent les principes de la Gestalt ?
• Comment les internautes parcourent-ils une page ?
• Comment utiliser la taille et l’échelle ?
• Comment construire une hiérarchie typographique ?
• Comment utiliser la couleur et le contraste ?
• Quel rôle jouent l’espace blanc et le nombre de choix ?
• Le nombre d’or est-il utile en web design ?
• Comment tester la hiérarchie visuelle d’une page ?
• Questions fréquentes
• Sources

Qu’est-ce que la hiérarchie visuelle ?

Le Nielsen Norman Group, référence en ergonomie web, la définit comme l’organisation des éléments d’un design pour que l’œil consomme chacun d’eux dans l’ordre d’importance voulu. Autrement dit : c’est le designer qui décide de ce que le visiteur voit en premier, et non le hasard.

Sans hiérarchie, tout a le même poids : le visiteur doit tout lire pour trouver ce qu’il cherche, et la plupart abandonnent. Avec une hiérarchie claire, il comprend en quelques secondes de quoi parle la page, ce qu’il peut y faire et où cliquer. C’est pourquoi la hiérarchie visuelle se prépare en amont, avec l’architecture de l’information : on classe d’abord les contenus par importance, puis on traduit ce classement visuellement.

Que disent les principes de la Gestalt ?

Beaucoup de règles de hiérarchie visuelle viennent de la psychologie de la Gestalt, développée dans la première moitié du XXe siècle par des psychologues allemands et autrichiens, dont Max Wertheimer, Wolfgang Köhler et Kurt Koffka. Gestalt signifie « forme » en allemand. Leur idée centrale : on perçoit un ensemble organisé avant de percevoir ses parties. Pour une page web, cela veut dire qu’un bouton très réussi ne sauve pas une page désordonnée.

Les principes les plus utiles en web design :

• Proximité : des éléments proches sont perçus comme liés. Un libellé doit être plus près de son champ de formulaire que du champ suivant ; un titre plus près du paragraphe qu’il introduit que du précédent.
• Similarité : des éléments qui se ressemblent (couleur, forme, taille) sont perçus comme de même nature. Tous vos liens doivent donc avoir le même style. À l’inverse, l’élément qui rompt la similarité attire l’œil : c’est ainsi qu’on fait ressortir un bouton principal.
• Région commune : des éléments placés dans un même cadre ou sur un même fond sont perçus comme un groupe. C’est le principe des cartes (produits, articles, offres).
• Continuité et alignement : l’œil suit les lignes et les alignements. Une grille régulière rend la page plus lisible qu’une mise en page où chaque bloc est décalé.

Comment les internautes parcourent-ils une page ?

Sur le web, on lit peu : on balaie. Les études d’oculométrie (eye tracking) du Nielsen Norman Group ont décrit dès 2006 le schéma en F : sur une page de texte peu structurée, l’œil lit le haut, puis une deuxième ligne un peu plus bas, puis descend le long de la marge gauche. Le NN/g précise que ce schéma n’est pas un modèle à suivre mais un symptôme : il signifie que l’utilisateur rate ce qui est à droite ou plus bas.

Les mêmes études décrivent d’autres façons de parcourir une page, dont le schéma en « gâteau à étages » (layer cake) : l’œil saute d’intertitre en intertitre et ne lit que les sections qui l’intéressent. Selon le NN/g, c’est la façon la plus efficace de balayer une page, et on l’obtient avec des intertitres clairs.

Pour les pages avec peu de texte (page d’accueil, landing page, publicité), les designers utilisent souvent le schéma en Z : logo en haut à gauche, navigation ou bouton en haut à droite, diagonale vers le bas à gauche, appel à l’action en bas à droite. C’est une convention de mise en page plus qu’un résultat de recherche, mais elle fonctionne bien quand la page contient peu d’éléments.

Consignes pratiques qui en découlent :

• mettre l’information la plus importante dans les deux premiers paragraphes ;
• commencer les titres et les intertitres par les mots porteurs de sens ;
• découper en sections avec des intertitres visibles, utiliser des listes et le gras avec parcimonie ;
• ne pas placer une information critique uniquement dans la colonne de droite.

Comment utiliser la taille et l’échelle ?

C’est le levier le plus direct : ce qui est grand est vu en premier et paraît plus important. Un titre, une photo principale ou un prix mis en avant attirent l’œil immédiatement.

Le piège est d’agrandir trop de choses : si tout est grand, plus rien ne ressort. Le NN/g recommande de se limiter à trois tailles (petite, moyenne, grande) pour un même type d’élément, et à deux éléments au maximum dans la taille la plus grande sur un écran. Les contenus secondaires (mentions, étiquettes, dates) restent petits pour ne pas concurrencer l’information principale.

Comment construire une hiérarchie typographique ?

La hiérarchie typographique organise le texte en niveaux reconnaissables, pour que le lecteur sache à tout moment où il se trouve. Le plus simple est de travailler avec trois niveaux :

1. Niveau 1, le titre : ce que le visiteur doit lire en premier. Grand, souvent en gras, un seul par page (c’est aussi le H1 pour les moteurs de recherche).
2. Niveau 2, les intertitres : ils découpent le contenu en sections et permettent le balayage en « gâteau à étages ». Nettement plus petits que le titre, mais plus visibles que le texte.
3. Niveau 3, le texte courant : là où se trouve le détail. Sa priorité est la lisibilité : taille confortable sur mobile, interlignage aéré, longueur de ligne raisonnable.

On ajoute au besoin des styles secondaires (légendes, citations, boutons), mais chaque style doit avoir un usage précis et être appliqué partout de la même façon. Deux familles de polices suffisent dans la plupart des cas. Pour le choix des polices elles-mêmes, voir notre article sur comment choisir la bonne typographie.

Comment utiliser la couleur et le contraste ?

Les couleurs vives et saturées attirent l’attention ; les couleurs neutres ou désaturées la laissent aux autres éléments. On réserve donc la couleur la plus forte de la charte aux éléments qui doivent déclencher une action : le bouton principal, un lien, une alerte. Si cette couleur est partout, elle ne signale plus rien. Le NN/g conseille de s’en tenir à deux couleurs principales et deux secondaires.

Le contraste ne sert pas qu’à faire ressortir un élément : il conditionne la lisibilité. Les règles d’accessibilité WCAG (niveau AA) exigent un rapport de contraste d’au moins 4,5:1 entre le texte courant et son fond, et de 3:1 pour les grands textes (à partir de 18 points, soit environ 24 px, ou 14 points en gras, soit environ 18,5 px). Un gris clair élégant sur fond blanc échoue souvent à ce test. Notre guide sur l’accessibilité web WCAG détaille ces règles.

Le contraste peut aussi venir de la graisse (gras contre maigre), du style (italique), de la forme (un bouton plein au milieu de liens soulignés) ou de la texture (un fond coloré ou une photo derrière un bloc). Dans tous les cas, le principe est le même : ce qui diffère de son entourage est vu en premier.

Quel rôle jouent l’espace blanc et le nombre de choix ?

L’espace blanc (ou espace négatif) n’est pas de la place perdue. Il sépare les groupes, laisse respirer les éléments importants et rend visibles les autres leviers : un titre entouré d’espace paraît plus important que le même titre coincé entre deux blocs. Selon le principe de proximité, c’est aussi l’espacement qui indique ce qui va ensemble : peu d’espace à l’intérieur d’un groupe, davantage entre les groupes.

Le nombre de choix proposés joue dans le même sens. La loi de Hick (ou loi de Hick-Hyman), issue des travaux des psychologues William Edmund Hick et Ray Hyman en 1952, établit que le temps de décision augmente avec le nombre et la complexité des choix. Une page qui propose dix boutons de même poids ralentit la décision ; une page qui met en avant une action principale et relègue les autres au second plan la facilite. Attention toutefois à ne pas simplifier au point de rendre l’interface obscure.

En pratique : un appel à l’action principal par écran, clairement dominant, et des actions secondaires sous forme de liens ou de boutons discrets. Nos conseils sur la rédaction et le design des boutons sont dans l’article consacré au call to action.

Le nombre d’or est-il utile en web design ?

Le nombre d’or vaut environ 1,618. Euclide le décrivait déjà comme le partage d’un segment « en extrême et moyenne raison », et on le retrouve dans la suite de Fibonacci : le rapport entre deux termes consécutifs s’en rapproche. En design, on l’utilise comme outil de composition : une colonne principale et une colonne secondaire dans un rapport d’environ 1,6, ou une échelle de tailles de police où chaque niveau est environ 1,6 fois plus grand que le précédent.

C’est un repère pratique pour obtenir des proportions harmonieuses, pas une règle qui garantit un bon design. Beaucoup d’échelles typographiques utilisent d’autres rapports (1,25 ou 1,333, par exemple), souvent plus adaptés aux écrans de mobile où un rapport de 1,6 donne des titres trop grands.

Comment tester la hiérarchie visuelle d’une page ?

1. Le test du plissement d’yeux (squint test), recommandé par le NN/g : floutez la maquette ou plissez les yeux. Le texte devient illisible, il ne reste que les masses. L’élément le plus visible doit être le plus important.
2. Le test des cinq secondes : montrez la page à quelqu’un qui ne la connaît pas pendant cinq secondes, cachez-la, et demandez-lui de quoi elle parle et ce qu’il pouvait y faire.
3. La liste d’importance : classez par écrit les éléments de la page par ordre d’importance, puis comparez avec l’ordre dans lequel ils sont réellement vus.
4. Les cartes de chaleur : sur une page en ligne, les outils de heatmaps montrent où les visiteurs cliquent et jusqu’où ils font défiler.
5. La vérification mobile : sur un petit écran, la taille et l’espacement sont limités, la hiérarchie repose davantage sur l’ordre des blocs et le contraste. Testez toujours les deux formats.

Si votre site ne passe pas ces tests, le problème vient rarement d’un seul élément : c’est souvent la structure qu’il faut reprendre. C’est un des chantiers qu’on traite lors d’une refonte de site internet.

Questions fréquentes

Quels sont les principaux éléments de la hiérarchie visuelle ?

La taille, la couleur et le contraste, la typographie, l’espacement et le regroupement, et la position sur la page. On les combine : un titre est à la fois plus grand, plus gras et placé en haut.

Le schéma de lecture en F est-il une bonne pratique ?

Non. Le NN/g le décrit comme un comportement à éviter, qui fait rater des informations. On le contourne avec des intertitres clairs, des listes et l’essentiel placé en tête de page.

Quel contraste minimum pour le texte d’un site ?

Selon les WCAG, niveau AA : 4,5:1 pour le texte courant, 3:1 pour les grands textes. Des outils gratuits comme les vérificateurs de contraste des navigateurs permettent de le mesurer.

Combien de tailles de police utiliser sur une page ?

Le moins possible. Trois niveaux principaux (titre, intertitre, texte) couvrent la majorité des besoins, avec éventuellement un style pour les légendes et les mentions.

La hiérarchie visuelle a-t-elle un effet sur le SEO ?

Indirectement. Les moteurs lisent la structure HTML (H1, H2, H3), pas la taille affichée. Une hiérarchie visuelle qui correspond à une structure de titres propre sert donc à la fois les visiteurs et le référencement.

Sources

• Nielsen Norman Group : Visual Hierarchy in UX, definition
• Nielsen Norman Group : F-Shaped Pattern of Reading on the Web
• Nielsen Norman Group : Text Scanning Patterns, Eyetracking Evidence
• Nielsen Norman Group : The Principle of Proximity
• W3C : WCAG 2.2, critère 1.4.3 Contraste (minimum)
• Laws of UX : Hick’s Law