Optimiser son site avec la hiérarchie visuelle ?

La hiérarchie visuelle est indispensable pour avoir un site qui convertit. 

Sans hiérarchie visuelle, l'utilisateur ne sait pas où chercher et sur quoi se concentrer !

Une bonne hiérarchie va permettre de guider l'utilisateur et de lui fournir les éléments dont il a besoin. 

En jouant avec la taille des éléments, la couleurs et l'équilibre des éléments, vous verrez qu'un site bien conçu permet de convertir plus facilement. 

Dans cet article, nous allons découvrir la hiérarchie visuelle dans la conception UX et comment nous pouvons l'utiliser pour améliorer les sites et optimiser l'expérience de vos utilisateurs.

1. Qu'est ce que la hiérarchie visuelle en design ? 
2. Pourquoi la hiérarchie est importante pour l'expérience utilisateur ? 
3. C'est quoi une mauvaise hiérarchie visuelle ? 
4. C'est quoi une bonne hiérarchie visuelle ? 
5. Les 6 conseils pour créer une bonne hiérarchie visuelle
   

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

Il y a beaucoup de définitions, celle que nous utilisons est celle de Nielsen Norman Group.

"La hiérarchie visuelle d'un affichage 2D (page Web, graphique, impression, etc.) fait référence à l'organisation des éléments de conception sur la page afin que l'œil soit guidé pour consommer chaque élément de conception dans l'ordre d'importance voulu "

C’est un jeu d’affichage entre les différents éléments sur une page web ou autre.

Il vous sera plus facile d'assimiler des éléments hiérarchisés qu'un bloc d'information.

Pourquoi la hiérarchie visuelle est importante pour l’expérience utilisateur ? 

Le temps moyen que les gens passent à regarder un design est de 8 secondes, c'est pourquoi la hiérarchie visuelle est importante. 

Lorsqu’il y a trop d’éléments notre mémoire a du mal à assimiler les éléments.

Si la hiérarchie est trop confuse, un utilisateur sera frustré et quittera le site, tout simplement.
Lors de la création d'un design nous devons structurer correctement tous les éléments en fonction de leur importance pour donner au utilisateurs les informations principales.

Afin de réaliser la hiérarchie appropriée, il faut répondre à trois questions :

1) Sur quoi voulons-nous que les utilisateurs se concentrent ?

2) Quelle action souhaitons-nous que les utilisateurs réalisent ?

3) Où voulons-nous que l'œil aille ?

Lorsque vous avez ces réponses, il vous suffit de déterminer ce qui est :
- le plus important
- le deuxième plus important
- le troisième plus important
- et ainsi de suite...

C’est quoi une mauvaise hiérarchie visuelle ? 

Avant de vous donner des conseils sur les éléments pour créer une bonne hiérarchie nous allons voir ce qui ne faut pas faire.

Une mauvaise hiérarchie c'est lorsqu'il y a trop d'éléments, non hiérarchisés. 

Voici un exemple, pour un courtier en assurances :

Que voyons-nous ? 

• Trop d'informations, notre regard ne sait pas ou se poser !
• Quels sont les éléments importants ?
• On ne voit pratiquement pas le menu de navigation

Que faire ? 

La première chose à faire est de déterminer les éléments importants à mettre en évidence.

Est ce que ce sont les objectifs, les logos qui apportent la preuve sociale ou encore les services proposés ? 

Dans ce second exemple, c'est un cabinet d'expert comptable. 

Que voyons-nous ? 

• Le logo est trop gros et n'apporte aucune valeur
• Le texte en bloc avec 3 polices différentes ne permet pas de comprendre les spécialités du cabinet. 
• Il y a beaucoup trop de majuscules

Que faire ? 

La première chose à faire est de réduire le logo et de le mettre en haut à gauche, ensuite d'harmoniser les polices et enfin réduire la longueur des phrases. 
‍

‍
Désormais, vous avez une vision claire de ce qu'il ne faut pas faire. 
Avant de construire un design il faut déterminer les éléments importants et ne pas trop mettre d'informations. Mettre trop d'informations risque de vous desservir. 

Passons maintenant, à ce qu'il faut faire en terme de hiérarchie visuelle. 

C'est quoi une bonne hiérarchie visuelle ? 

Une bonne hiérarchie visuelle va être épurée et faciliter la lecture de l'utilisateur. 

Prenons par exemple, l'entreprise Primer. 

‍La grande taille et le contraste saisissant du texte nous aident à considérer le titre comme l'élément le plus important en premier.

‍
Nous avons immédiatement lu et compris que cette entreprise met en relation les enfants pour apprendre intelligemment. Ensuite, on remarque la belle illustration de deux enfants échangeant via tablettes; renforçant l'idée du produit. 

‍

‍

Dans ce second exemple, le message est fort. Le texte en violet aide à considérer le titre comme l'élément le plus important en premier !

Nous avons immédiatement lu et compris que cette entreprise permet l'accès de la crypto à tout le monde.

Ensuite, on remarque la photo de deux personnes faisant un pique nique, renforçant l'idée que l'accès à la crypto est simple.

‍

‍

Les 6 conseils pour créer une bonne hiérarchie visuelle ? 

Une bonne hiérarchie visuelle peut être créer en respectant 6 conseils

• Créer une hiérarchie en jouant sur la taille des éléments
• les couleurs et le contraste 
• l’alignement 
• la proximité des éléments 
• la répetition 
• Les espaces 
  

1. Créer une hiérarchie en jouant sur la taille des éléments

Nos yeux sont naturellement attirés par les éléments les plus gros.

En jouant sur la taille nous mettons les éléments les plus importants plus gros afin d’attirer le regard. 

• Cela peut être sur la taille du texte

• Cela peut être sur la taille des images

‍

Pour que cela soit plus concret, ci-dessous la page d'accueil de l'assurance santé Alan. 

‍

L’élément le plus important est la photo de l’application.


Puisqu'il s'agit d'une assurance vantant la simplicité, il est logique d'inclure une démonstration du produit.

Immédiatement, l'utilisateur sait que cette assurance santé est simple. 

2. Créer une hiérarchie visuelle en jouant sur la couleur

L’un des autres éléments en hiérarchie sera le jeu de couleur et du contraste.

L’oeil est attiré par les couleurs les plus vives.

De même, les couleurs avec un contraste plus élevé seront mises en évidences, ce qui leur donnera plus d'importance.

Pour que cela soit plus concret, ci-dessous la page d'accueil de Farmwise.

Le Call to action en orange ressort parfaitement bien. 



Les différentes nuances de vert permettent de donner de la profondeur au design et facilite la lecture. 

3. Créer une hiérarchie visuelle en utilisant la répétition

Créer une répétition dans le design permet d’être cohérent sur tout le site.

‍
Par exemple, si votre logo est rond, il faut que les icônes ou les bords des Call to Action soient arrondis !
‍

Pour que cela soit plus concret, les pages d'accueil de Aleada et de Komon Courtage. 

‍

4. Créer une hiérarchie visuelle avec l’alignement

L'alignement fait référence au placement d'éléments graphiques et de texte sur une page qui s'aligne sur le site web. 

Le meilleur moyen de créer une bonne hiérarchie est d’aligner les éléments afin que tout soit cohérent.
Si ce n’est pas le cas cela peut vite devenir chaotique et désorganisé. 
‍

‍

En plus concret, reprenons l'exemple de Komon Courtage. 

‍

5. Créer une hiérarchie visuelle avec la proximité des éléments

La proximité fait référence à la façon dont les éléments apparaissent les uns par rapport aux autres.

Le fait de rapprocher les éléments donnera de la cohérence au design et indiquera à l’utilisateur de continuer la lecture. 

‍
Créer une hiérarchie visuelle avec les espaces blancs 

Savoir comment utiliser correctement l'espacement dans la conception donne à votre mise en page un équilibre, une fluidité et une concentration.

En fait, vous ne voulez pas remplir entièrement votre toile avec du type, de la couleur, des photos et des illustrations.

Au lieu de cela, utilisez des espaces blancs pour créer une mise en page de conception agréable et attirez votre attention sur les éléments les plus importants.
‍

‍‍

Notre conclusion sur la hiérarchie visuelle

N'oubliez pas, un site doit vous amener des clients et pour cela il doit être bien pensé.

Chaque élément du site doit contribuer à améliorer l'expérience des utilisateurs et transmettre clairement ce message.

Une bonne hiérarchie visuelle et penser pour les utilisateurs permettra d'avoir des prospects, voir des clients. 

En mettant en place ces conseils votre site sera optimiser, si vous avez besoin d'aide et de conseils n'hésitez pas à nous contacter !