Sur une page web, les informations n’ont pas le même poids visuel afin que l’internaute puisse facilement scanner le contenu. Grâce à la hiérarchisation de l’information, le graphiste va pouvoir attirer l’attention de l’observateur vers les éléments clefs de sa mise en page.

Introduction

Nous connaissons tous le sens du mot « hiérarchie » puisqu’il fait référence à une notion qui s’exerce dans de nombreux domaines de notre vie sociale et professionnelle. Mais savez-vous de quoi il s’agit lorsque l’on parle de « hiérarchie » en design web ?

Le mot « hiérarchie » désigne le fait d’instaurer, par différents procédés graphiques, un classement par ordre d’importance des éléments d’une page web. C’est un outil précieux du langage graphique qui permet de classer et d’organiser le contenu. La mise en place d’une hiérarchie visuelle met en évidence des points d’ancrage sur lesquels l’utilisateur va pouvoir s’appuyer pour scanner rapidement la page et comprendre de quoi il s’agit. Cela va contribuer à contrôler la transmission et l’impact du message. Sans hiérarchie visuelle, le contenu devient fade et difficile à parcourir.

Hiérarchisation du contenu web

Sur une page web on peut avoir besoin de placer beaucoup de choses: un logo, un menu de navigation, des menus secondaires, des informations de contact, des liens hypertextes, des titres, des sous-titres, des paragraphes de textes, des fonctionnalités diverses (moteur de recherche, pannier e-commerce, formulaires …). Imaginez comment tous ces éléments peuvent avoir du sens pour l’utilisateur si tout est traité de la même manière visuelle (même police, même taille, même couleur …). Comment retrouver une information dans une pile d’informations uniformes ?

Grâce à la hiérarchisation de l’information, vous allez pouvoir mettre en place une distinction entre les différents éléments de la page ou au contraire exprimer une similarité entre plusieurs d’entre eux. Vous allez également pouvoir transmettre la relative importance des éléments les uns par rapport aux autres. En opérant ainsi vous allez commencer à donner du sens à votre contenu et faciliter la lecture de la page.

Illustrons nos propos avec un exercice simple. Recherchez dans ces deux présentations, dont le contenu est strictement identique, l’information suivante: quelles sont les trois couleurs primaires du système additif ?

Dans laquelle de ces deux présentations avez vous trouvé l’information le plus facilement et le plus rapidement ?

Contraste et hiérarchisation

Tout est une histoire de contraste. L’école Allemande de design Bauhaus du début du siècle (1919) préconisait déjà l’utilisation du contraste pour capturer et retenir l’attention de l’observateur.

Pour établir une hiérarchie visuelle dans une composition, il faut jouer avec des techniques graphiques qui vous permettent de mettre en place du contraste entre les éléments. La mise en place de contraste va déterminer l’ordre dans lequel les utilisateurs vont percevoir et donc appréhender l’information visuelle.

Comme nous l’avons vue dans les exemples précédents, si tous les éléments sont similaires, il n’y a pas de progression logique du regard à travers le contenu et vous parcourez ce contenu de façon confuse. Si par contre des éléments plus larges que les autres se distinguent de la masse, votre attention est tout de suite attiré par ces éléments.

Pour qu’un élément soit remarquable, il faut qu’il se distingue des autres. Cela ne peut se faire que si une partie des autres éléments restent relativement neutres. En effet, si le graphiste cherche à rendre remarquable tous les éléments, le résultat donnera l’effet inverse.

Voici, à travers des exemples, différentes manières de créer du contraste pour mettre en place une hiérarchie visuelle dans votre composition:

La taille

Les tailles du logo et de l’encadré de gauche sont telles qu’elles attirent immédiatement notre attention. Ces deux éléments prennent une position dominante dans la hiérarchisation de la mise en page.

La texture

Pour distinguer le menu actif, le graphiste a utilisé dans cet exemple un contraste de texture.

La forme

La forme des rectangles qui contient les items du menu principal est la même pour tous les items sauf pour celui de la rubrique active. Ce contraste de forme permet à l’internaute de savoir immédiatement dans quel rubrique il se trouve.

La couleur

Ce menu latéral est traité avec trois couleurs différentes. Un seul item est rouge. Cet item rouge est le plus important hiérarchiquement car il indique le thème de la page courante.

La position

En décalant le paragraphe vers la droite, le graphiste créer un contraste de position qui le détache du reste du texte.

L’orientation

L’ensemble des textes de cette page sont horizontaux sauf le libellé « SERVICES » qui est orienté verticalement. La lecture verticale est généralement déconseillée par les recommandations ergonomiques mais ici, la taille du texte est suffisamment grande pour offrir une lisibilité du mot acceptable. Cette particularité dans la page retient notre attention sur le mot « Services ».

La valeur

Même avec une palette de couleur monochrome, vous pouvez créer de l’emphase en jouant sur les valeurs de gris. Le mot « LABEL » ressort ici parfaitement du menu.

La saturation

Cette page est une mosaïque de vignettes sur lesquelles il est possible de cliquer. Toutes les vignettes sont complètement désaturées. Au passage de la souris, la vignette devient colorée et se distingue alors des autres. En passant la souris sur une vignette, celle-ci devient un cours instant la vignette hiérarchiquement la plus importante puisque vous êtes susceptible de cliquer dessus.

La netteté

Le graphiste a voulu ici attirer notre attention sur le carré central en rendant les autres carrés flous.

Hiérarchisation et parcours de lecture

Voici une page web utilisant plusieurs types de contrastes (couleur, taille, valeur …) pour hiérarchiser l’information contenu dans sa mise en page. Nous voyons bien que certains éléments attirent plus notre attention que d’autres. Par exemple le header possède un arrière plan texturé, un logo de grande taille avec une typographie de couleur rouge, couleur que l’on retrouve dans l’onglet actif du menu. Ces caractéristiques jouent un rôle sur la façon dont nous allons scanner cette page. Nous somme davantage attiré par le contenu du header au premier regard que par le contenu texte des paragraphes situés plus bas.

Cette hiérarchisation des éléments nous conduit à appréhender les informations de cette page dans un certain ordre et selon un parcours visuelle bien définie que j’ai tracé ci-après en bleu et numéroté par ordre de progression.

Conclusion

Les préoccupations de hiérarchisation interviennent dès les premières phases de conception du site. Par exemple lors du zoning, il est important de déterminer quelles seront les zones de contenu et les grandes fonctionnalités qui devront prendre de l’importance dans la mise en page. Il faudra penser à placer ces éléments au dessus de la ligne de fold (ligne virtuelle en dessous de laquelle il est nécessaire de scroller pour voir le contenu de la page), ensuite le graphiste devra mettre du contraste sur ces éléments pour qu’ils se distinguent dans la composition.

De cette manière, vous proposez au visiteur une espèce de « visite guidée » censé l’aider à scanner la page pour trouver ce qu’il cherche.