Aller au contenu principal
hierarchie-visuelle-site

Hiérarchie visuelle : tout ce qu'il faut savoir avant d'optimiser son site

1 avril 2020
Temps de lecture : 
10 min
Lauréline Kameleoon
Lauréline Saux
Lauréline est Content Manager, en charge du contenu chez Kameleoon. Elle analyse tous les retours de nos clients et consultants ainsi que les derniers rapports sur les tendances du marketing digital afin de vous livrer les meilleurs conseils en matière d'A/B testing et de personnalisation.

Il existe une condition universelle pour transformer un visiteur en client : il doit pouvoir rapidement assimiler votre valeur ajoutée. Sur votre site, cela dépend en grande partie de la hiérarchie visuelle.

Quels effets la taille, la police, l'emplacement ou encore la couleur des différents éléments de vos pages peuvent avoir sur vos conversions ?  

Pour améliorer l’interface des pages de votre site, vous ne pouvez pas vous contenter de suivre votre intuition. Vous devez suivre une liste de règles strictes. Celles de la hiérarchie visuelle. C’est l’un des éléments qui peut faire toute la différence entre un site performant et un site qui tourne au ralenti et peine à transformer ses visiteurs en clients.

1 Qu’est-ce que la hiérarchie visuelle et pourquoi est-ce important ?

La hiérarchie visuelle ordonne l’information d’une page ou d’une application.

La hiérarchie visuelle: Un guide implicite pour vos visiteurs

Nous sommes, par nature, plus aptes à digérer des informations organisées avec une certaine hiérarchie visuelle. Autrement dit, les blocs de texte n’ont que très peu de valeur communicative.
Si vous proposez à vos visiteurs un bloc massif de texte, il y a 99 chances sur 100 pour qu’ils ne prennent pas la peine de le lire. Pourquoi ? Il est plus simple de digérer des images que de digérer de l’information pure”. -Gil Huybrecht, UI & UX designer, Branding.

Observez l’image suivante.

001_hierarchie_visuelle_lecture

Le paragraphe de gauche est particulièrement peu attractif. À droite, le simple fait d’ajouter une hiérarchie (avec les titres) et de catégoriser le contenu suffit à le rendre digeste. Il est alors fort probable que plus de personnes s'y intéressent.

2 6 règles indispensables de la hiérarchie visuelle

1. La taille des éléments

Plus un élément est imposant sur une page web, plus il saura attirer l’attention des visiteurs. C’est naturel, notre regard s’arrête plus rapidement sur les objets imposants. En voici un exemple.

003_hierarchie_visuelle_taille

Votre regard se concentre automatiquement sur l’élément le plus imposant. Si bien qu’il faut un effort supplémentaire pour se concentrer sur l’un des éléments de plus petite taille.

Ce qu’il faut retenir ? Corrélez la taille et l’importance des éléments de votre page. Une page bien conçue doit comporter des éléments de taille variable. Dans le cas contraire, vous risquez de semer la confusion chez vos visiteurs qui ne sauront plus où donner de la tête.

N’oubliez pas les mobinautes ! Sur mobile, vous devez adapter la taille des éléments de votre site, voire fusionner ceux qui apparaissent sur la version desktop. Une situation que l’on peut illustrer avec HelloBank!, qui parvient à proposer une expérience tout aussi qualitative sur mobile que sur desktop en retravaillant la taille des éléments de sa homepage.

hierarchie-visuelle-taille-mobile

2. La façon d’utiliser la couleur

La combinaison de couleurs est un must de la hiérarchie visuelle. En plus de vous aider à mettre en évidence - ou en retrait - les éléments de vos pages, la couleur peut donner de la personnalité au design de votre site. Voici quelques exemples qui sauront capter votre attention :

005_hierarchie_visuelle_couleur

Ici, l’élément en couleur est en tout point identique aux autres. Sa couleur en revanche attire naturellement notre regard.

Sur les exemples suivants, la couleur est utilisée pour attirer le regard du visiteur sur des mots ou éléments clés.

005_hierarchie_visuelle_couleur hierarchie_visuelle_couleur_uniqlo  La couleur est une arme redoutable de la hiérarchie visuelle pour orienter le regard de vos visiteurs et hiérarchiser les éléments de vos pages… 

Cependant, toutes les couleurs ne se marient pas très bien. Il existe des couleurs froides (comme le bleu ou le vert), des couleurs chaudes (comme le rouge, le orange ou le jaune) et des couleurs neutres (comme le noir, le gris, le marron, etc.). En associant différentes « températures​ » de couleurs, vous pouvez obtenir des contrastes très intéressants. À titre d’exemple, les équipes d’Allopneus ont décidé d’associer le bleu au orange. Le résultat est assez impactant !


009_hierarchie_visuelle_couleur_allopneus

Vous pouvez aussi orienter le regard de vos visiteurs en créant un point focal avec des jeux de contraste. En voici un exemple :

010_hierarchie_visuelle_couleur_contraste

Même police, taille et largeur texte. Et pourtant, votre regarde s’oriente naturellement vers le deuxième mot. Non ? En voici un second exemple :

011_hierarchie_visuelle_couleur_ps

Ici, on joue avec le contraste pour mettre un élément en gras. Élément d’autant plus visible lorsqu’il est mis en couleur. La maîtrise de la couleur est certes une règle élémentaire de design, mais déterminante. Jetez un œil à votre site. Pourriez-vous utiliser la couleur et les jeux de contraste pour valoriser vos offres et produits ?

3. Les polices de vos textes

La sélection de la police de vos textes est également essentielle pour créer une hiérarchie visuelle efficace. Ce n’est pas tant le choix de la police qui compte, mas la façon dont vous l’utilisez. Même si vous décidez d’utiliser une seule police sur votre site (aucun mal à cela), vous devez créer une hiérarchie typographique qui inclut toutes les variantes possibles des polices de votre site.

Une règle de base du graphisme veut que l’on n’utilise pas plus de 3 polices pour ne pas créer un design décousu :

  • Primaire : le plus imposant. Il doit capter l’attention du visiteur.
  • Secondaire : les éléments qui viennent compléter les titres primaires.
  • Tertiaire : le corps du texte.

Avec les restrictions évidentes de place sur mobile, les designers recommandent de se tenir à deux niveaux pour proposer une interface moins étouffante.

hierarchie_visuelle_police

En supprimant un niveau sur mobile, il se peut que vous ayez à supprimer des informations. Le défi ici est donc d’identifier les éléments les plus importants et de se débarrasser de ceux qui n’apportent que peu de valeur. Dans l’exemple du NYT (ci-dessus), on s’est séparé du nom de l’auteur et de la date de publication. Comprenez bien que la hiérarchie visuelle n’est pas qu’une histoire d’esthétique. L’enjeu est aussi et surtout de construire une interface agréable ET pertinente pour vos visiteurs et en phase avec vos objectifs business.

4. L’emplacement des éléments

La disposition des éléments d’une page est particulièrement importante - surtout si vous voulez que vos visiteurs comprennent bien et vite ce que vous essayez de leur communiquer. Pour illustrer ce point, je vous propose de jeter un oeil au sommaire papier suivant :

hierarchie-visuelle-emplacement

Deux choses viennent sérieusement perturber la lecture et la compréhension du contenu :

  1. La répétition non nécessaire du mot « chapter ». On sait, a priori, qu’il s’agit de chapitres.
  2. L’éloignement du numéro de page et la difficulté de lecture que cela implique.

Après un petit passage sur Photoshop, j’ai réorganisé les éléments perturbateurs pour faciliter la lecture.

hierarchie-visuelle-emplacement-reorganisation

Le lecteur peut sans effort particulier se rendre à la page souhaitée. Bien que cet exemple ne soit pas digital, il montre que le positionnement d’un élément clé  par rapport au reste du contenu (peut avoir son importance.

Voici quelques concepts de placement à respecter :

La proximité

La distance entre deux éléments indique implicitement la relation qu’il peut exister entre eux. Si l’on reprend l’exemple du sommaire, la proximité entre le numéro de page et le nom de chaque chapitre est primordiale.

Espace Négatif (ou white space)  

Il s'agit de l’espace qui existe entre les différents éléments d’un site. Il ne faut pas le considérer comme un espace vide, mais plutôt comme un complément au contenu d’une page.

En voici un exemple avec une page que l’on connait tous : Google.
 

hierarchie_visuelle_espace-negatif

La page ne semble pas particulièrement vide. Ici, l’espace négatif permet au visiteur de se concentrer tout de suite sur le moteur de recherche.

Les schémas de lecture (ou scanning pattern)

Nos yeux fonctionnent de manière prévisible et sont automatiquement attirés par certains points d’intérêt. Si nous avons tous nos propres habitudes, on peut identifier deux tendances clés.

Le schéma Z : Cette règle de hiérarchie visuelle s’applique essentiellement aux pages qui ne contiennent que peu de texte et beaucoup d’éléments graphiques. Le visiteur lambda a le réflexe de parcourir les éléments de ce type de page en “Z”, souvent du à la présence d’un menu horizontal.


hierarchie_visuelle_schema_z

C’est une règle de design essentielle et vous devriez placer vos calls-to-action et autres incentives en fonction. Voici quelques bonnes pratiques :

  • Séparez si possible la couleur de fond de votre site du contenu du site pour cadrer le parcours visuel du visiteur.
  • Placez votre logo dans le coin supérieur gauche de vos pages. C’est la première chose que le visiteur voit.
  • Placez une incentive dans la diagonale du “Z” tout en prenant soin de placer le CTA dans la partie gauche de la page, pour suivre le regard des visiteurs.

  Le schéma F : Le schéma en “F” est davantage un constat qu’une règle de design. Une étude menée par le Nielsen Norman Group montre qu’un visiteur lambda va lire les premières lignes de contenu en entier. Puis, plus il scrolle, moins il lit de mots par ligne… jusqu’à décrocher complètement. Ce qui permet d’obtenir un semblant de comportement de lecture qui s’apparente à la lettre F.

hierarchie_visuelle_schema-f

Si les visiteurs de votre site lisent votre contenu en “F”, ils passent probablement à côté de l’essence même de votre contenu. Le schéma en “F” signale que votre contenu n’intéresse pas suffisamment ou qu’il n’est pas correctement hiérarchisé.

Si en revanche vous remarquez un schéma en “E”, cela signifie que vos lecteurs ne perdent pas leur intérêt au fur et à mesure qu’ils parcourent votre contenu.

Le nombre d’or (ou golden ratio) :

C’est un ratio mathématique qui permet d’obtenir les proportions et positions idéales des éléments d’une page pour qu’ils apparaissent au mieux à l’œil humain.

018_hierarchie_visuelle_nombre-or

Cet article d’UX Planet qui explique ce concept graphique de fond en comble.

L’alignement

Créer des lignes et casser ces lignes saura attirer le regard de vos visiteurs sur certains éléments de votre site. Concept que l’on peut à nouveau illustrer simplement :
 

018_hierarchie_visuelle_gold
Notre regard se porte automatiquement sur la bulle qui casse l’alignement des éléments.

Le sens de lecture

Vous pouvez aussi utiliser l’alignement naturel des éléments pour orienter le regard des lecteurs comme bon vous semble. Observez le visuel ci-dessous. hierarchie_visuelle_snes-lecture

Vous avez d’abord regardé la jeune femme qui se situe à droite, puis avez lu le texte de gauche à droite, puis vous êtes de nouveau arrêté·e sur la jeune femme. Pas vrai ? Avec cette technique, vous pouvez construire un parcours le regard de vos visiteurs vers les points.

5. L’utilisation d’une grille de design

La grille de design est un outil qui revient régulièrement dans le process de création graphique. Et la hiérarchie visuelle n’y échappe pas.

hierarchie_visuelle_grille

Une grille de design aide à structurer tous les éléments d’une page et à les afficher dans des tailles et proportions adaptées. Par ailleurs, le design en grille permet de :

  1. Prendre du recul et unifier l’aspect des différentes pages d’un site
  2. Mieux exploiter l’espace négatif
  3. Prendre en compte les contraintes liées à l’intégration responsive sur format mobile

Si un terminal desktop permet d’afficher un grand nombre de colonnes, le format mobile fonctionne différemment. D’où l’importance d’utiliser une grille de design pour déterminer l’ordre d’apparition des éléments de vos pages.

6. La répétition des éléments

La répétition des éléments est un aspect de la hiérarchie visuelle appuyé par le biais cognitif qu’est l’effet de simple exposition (que vous connaissez peut-être sous le terme anglais de mere exposure effect). C’est un principe sociologique théorisé par Robert Zajonc qui montre que la probabilité que l’on a d’apprécier quelque chose augmente à chaque fois que nous y sommes exposés.

Autrement dit, plus nous sommes familiers avec quelqu’un ou quelque chose, plus les chances que nous l’apprécions croissent. Or, quand on aime quelque chose, on y prête plus d’attention et notre capacité à absorber ou retenir des informations est plus importante.

Comment exploiter la répétition sur votre site ? Sur votre site ou votre application, vous pouvez l'appliquer à plusieurs éléments :

  • La police
  • Les couleurs
  • Les formes
  • Les CTAs

La répétition est un élément clé, voire vital, de la pertinence générale de votre site. Elle contribue également à placer des repères pour guider les visiteurs sur un terrain qu’ils connaissent déjà bien. Dans le cas contraire, vous risqueriez de les troubler … et de les agacer. Observez le sens de la répétition sur le site d’Apple.

hierarchie_visuelle_repetition

Chaque bloc est construit de la même façon.

  • Un titre (iMac, Macbook Pro, Macbook, etc.)
  • un sous-titre
  • deux calls to actions discrets (« en savoir plus » et « acheter ») sur lesquels notre regard s’arrête parce qu’ils sont répétés.
En répétant certains éléments de votre site, vous construisez une cohérence visuelle qui rend la navigation plus agréable et facilite la compréhension de la valeur ajoutée pour vos visiteurs.

Pensez fonctionnel avant design

Paradoxalement, la hiérarchie visuelle n’a que très peu de choses à voir avec la beauté. Elle est le résultat de votre capacité à combiner les règles énumérées dans cet article pour créer des signaux de différence entre les différents éléments de vos pages.

En gardant cela en tête, souvenez vous qu’il ne faut jamais faire confiance à votre intuition. Si vous souhaitez retravailler la hiérarchie visuelle de votre site, utilisez l’A/B testing. C’est l’unique façon d’optimiser de manière incrémentale l’expérience que vous proposez sur votre site en vous assurant de prendre des décisions qui plaisent à vos visiteurs.

 

checklist-conversion-optimisation

Thèmes traités dans cet article
Lauréline Kameleoon
Lauréline Saux
Lauréline est Content Manager, en charge du contenu chez Kameleoon. Elle analyse tous les retours de nos clients et consultants ainsi que les derniers rapports sur les tendances du marketing digital afin de vous livrer les meilleurs conseils en matière d'A/B testing et de personnalisation.
checklist-optimisation-conversion-fr
Recommandé pour vous