La hiérarchie, c’est le respect de l’ordre.

Mais vous êtes un graphiste, un communicant, un internaute, et dire “oui chef ” sur commande n’est pas spécialement votre style.

Pourtant, vous allez devoir apprendre à jouer avec les règles de la hiérarchie pour optimiser votre site. Voici les principales…

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

La hiérarchie visuelle c’est ce qui ordonne l’information sur les pages de votre site.

La hiérarchie visuelle est utilisée pour classer les éléments de votre site dans l’ordre dans lequel vous souhaitez que vos utilisateurs les voient. Vous allez, grâce à elle, mettre chaque élément à sa place et faire ressortir les éléments les plus importants à vos yeux. 

La hiérarchie visuelle consiste donc à utiliser différentes ressources comme :

• La couleur,
• Le contraste,
• Les typographies,
• L’espacement et d’autres principes de base pour organiser et hiérarchiser votre contenu.

Vous vous sentez perdu ? Pas de panique, c’est plus facile qu’il n’y paraît !

Pourquoi la hiérarchie visuelle est-elle si importante ?

Votre site se visite. Du moins, c’est ce que vous désirez. Il suffit d’une petite analogie avec le tourisme pour comprendre qu’un guide bien formé améliorera encore l’expérience de vos visiteurs. Et c’est là le rôle de la hiérarchie visuelle.

Naturellement, il y aura dans vos pages web des éléments plus importants que d’autres. En effet, le but est de tracer les grandes lignes, les points de repère qui indiqueront rapidement aux internautes les points sur lesquels ils doivent concentrer leur attention.

Notre cerveau préfère les informations quand elles sont bien ordonnées. Et mieux encore : la hiérarchie nous aide à nous y retrouver, nous donne envie de rester un peu plus pour entendre les explications de votre guide. Et nous donnera envie de revenir en ce lieu si bien organisé.

La hiérarchie visuelle vous permettra de mieux faire passer votre message, et donc de rendre votre site plus lisible. Si vous souhaitez vendre un produit ou un service, une bonne hiérarchie vous permettra d’augmenter votre taux de conversion.

Ça y est, vous commencez à comprendre l’intérêt de ce principe ? Bien, passons aux choses pratiques.

Les règles de la hiérarchie visuelle

La hiérarchie visuelle s’appuie sur la science pour savoir ce qui attire automatiquement l’œil. Et donc pour mieux aider les internautes à voir ce que VOUS désirez qu’ils regardent.

Pour cela, vous allez utiliser les astuces suivantes :

1. Jouer sur la taille des éléments

Plus un élément est de grande taille, plus il interpelle. C’est la loi de la jungle : les petits mangent les gros.

En design, cela implique que vous allez pouvoir utiliser des titres ou des phrases avec des typographies plus imposantes. Et cela vaut aussi pour les blocs d’image.

Vous allez très vite constater qu’en plus vos blocs de texte seront plus digestes. Mais vous allez faire encore mieux pour aiguiser l’appétit des internautes.

2. Mettre de la couleur

Dans une rangée uniforme, la petite partie en couleur se distingue tout de suite des autres. C’est le principe du mouton noir. Sauf que, vous, votre rôle sera plutôt d’injecter de jolies teintes au milieu du noir. Et si vous mettiez un seul mot en rouge au milieu de votre phrase ?

Trouvez différentes manières pour jouer avec la colorimétrie afin de guider les regards, tout en pensant à sélectionner des tons qui se marient bien entre eux.

3. Limiter la typographie

Vous savez déjà qu’il ne faut pas multiplier les typographies sur votre document ou votre site. Deux ou trois suffisent.

C’est d’autant plus le cas sur un support mobile : pour tout ce qui est smarphone, vous devrez vous contraindre à n’utiliser que deux niveaux typographiques.

Oubliez donc les sous-titres et condensez l’information. Ce n’est pas seulement une question d’esthétique, mais aussi une manière de construire un outil pratique pour ses utilisateurs.

À lire aussi : 15 règles d’or pour maîtriser la typographie

4. Trouver les bonnes places

L’espace blanc a du sens, quel que soit le support sur lequel vous l’appliquez. Il aide la hiérarchie en mettant en avant certaines parties de la page, en les faisant ressortir du lot.

Encore faut-il l’utiliser à bon escient : si deux éléments sont censés être liés l’un à l’autre, ne les éloignez pas trop, visuellement parlant.

Penchez-vous aussi sur les grilles de lecture : de la classique en Z à celle en F, qui s’applique de plus en plus sur le web, de manière intuitive, vous trouverez des pistes pour mieux construire vos pages et vos documents. Et pour placer chaque élément à l’endroit le plus adéquat pour qu’il se fasse bien voir.

Lorsqu’il s’agit de lire des mots, la plupart des cultures lisent de haut en bas et de gauche à droite. Même s’il y a des exceptions, il y a fort à parier que vous n’avez pas commencé cet article en bas de l’écran. La lecture d’informations visuelles fonctionne presque de la même manière et grâce au suivi oculaire. Nous savons maintenant comment sont appréhendées les pages web par les lecteurs.

5. Répéter et refaire

Une fois que vous aurez trouvé votre méthode d’alignement et de présentation, respectez-la.

Ce n’est pas la peine de changer la mise en page sur chaque page. Parce que vous allez à chaque fois perdre les internautes : la hiérarchie, c’est aussi une manière d’assurer leur stabilité. C’est un peu comme un refrain : on finit par le retenir sans s’en rendre compte. Et c’est le but que vous devez obtenir pour vos visuels.

Mais que faire si vous n’êtes pas sûr que votre hiérarchie visuelle fonctionne comme vous le souhaitez ? Il existe un moyen simple de tester son efficacité, que vous pouvez le réaliser à tout moment, sans outils spéciaux. Il s’agit du fidèle “test du strabisme”.

Prenez un peu de recul par rapport à l’écran de votre ordinateur et louchez sur votre conception pour que tous les détails s’estompent et que vous ne voyiez que des formes générales et floues.

Qu’est-ce qui ressort encore ? Est-ce ce que vous voulez que les spectateurs regardent en premier ? Si c’est le cas, vous êtes en bonne voie. Sinon, il est peut-être temps de revenir en arrière et d’essayer autre chose.

À lire aussi : Les 10 grandes tendances 2019 du web design

Conclusion

Nous espérons que ce guide vous a montré l’importance d’établir une hiérarchie visuelle claire dans tous vos projets de conception. Il est donc temps de mettre un peu d’ordre dans vos présentations et vos sites web. Oui, finalement, on y vient aux ordres. Et vous allez obéir ! Parce que c’est de cette manière que vous obtiendrez des sites qui feront campagne pour vous de manière efficace.

Faites appel à un graphiste freelance professionnel pour vous aider à hiérarchiser votre site web sur Graphiste.com ! 

L’article 6 astuces de hiérarchie visuelle pour améliorer votre site web est apparu en premier sur Graphiste.com.