La hiérarchie visuelle en UX, c’est quoi ?

La hiérarchie visuelle en UX, c’est quoi ?

Vous êtes-vous déjà retrouvé face à une page web bondée d’éléments, à tel point que vous ne sachiez plus où donner de la tête ? A vrai dire, on connaît déjà la réponse… Évidemment ! Ça nous est tous déjà arrivé ! Le coupable ? Le manque de hiérarchie visuelle ! 

La hiérarchie visuelle d’une page permet à l’utilisateur de savoir où concentrer son attention, son regard. Cette hiérarchie ordonne l’information, et permet de guider l’utilisateur lors de son parcours !

Pour hiérarchiser les informations, plusieurs techniques peuvent être utilisées. Les voici :

• Les couleurs et les contrastes
• Les tailles des éléments
• Les emplacements

1/ Les couleurs et les contrastes

Une bonne conception visuelle comprend de la couleur et des contrastes afin de créer une hiérarchie sur la page. Ces deux éléments permettent de faire ressortir certains éléments, et donc d’attirer l’attention de l’utilisateur ! Et comme vous le savez, nous accordons une importance toute particulière aux éléments qui nous sautent aux yeux ! 😉

Mais en réalité, ce n’est pas vraiment la couleur en elle-même qui attire l’attention, c’est plutôt le contraste qu’elle joue avec le reste de la page, c’est-à-dire avec les autres éléments qui l’entourent, mais aussi l’arrière-plan. 

Ce qui fonctionne aussi très bien, c’est de jouer avec le contraste des caractères ! Il peut par exemple s’agir d’un traitement spécial de la police. Les polices de caractères ayant une graisse plus importante se distinguent bien plus facilement des polices plus légères.  Et il en est de même pour les textes soulignés ou en italique, cela attire le regard.

Voici quelques pratiques que l’on peut vous donner 😉 

• Tenez-compte de la saturation des couleurs. Les couleurs vives se distinguent naturellement, c’est pourquoi il est préférable de les appliquer sur des éléments importants. Le rouge par exemple ! Ce n’est pas pour rien que bien souvent il est là pour vous signaler un avertissement, une erreur, ou pire encore… un danger ! 

• N’utilisez pas trop de couleurs. Les mélanges de couleurs, c’est parfois beau à regarder, mais ça peut aussi “piquer” les yeux ! Et lorsque trop de couleurs apparaissent sur une page web, la hiérarchie des éléments se trouve brouillée. Il s’avère alors difficile de distinguer les éléments les + importants. L’astuce ? 2 couleurs primaires, 2 couleurs secondaires 🎨
  
• N’utilisez pas trop de variations de contraste. Si tout est contrasté, rien ne ressort ! Un design efficace comprend bien souvent des contrastes différents pour les titres, les sous-titres et le corps du texte. 

• Ne comptez pas que sur la couleur pour créer une hiérarchie visuelle. Les personnes atteintes de daltonisme peuvent ne pas percevoir les différences entre certains éléments de couleur. 

2/ La taille des éléments

La taille des éléments est un point essentiel dans la hiérarchie visuelle d’une page web. Les éléments plus grands se distinguent davantage et attirent l’attention. Excellent moyen pour marquer l’importance !

Voici les meilleures manières de jouer sur les tailles : 

• N’utilisez pas plus de 3 tailles : petite, moyenne et grande. Trois tailles, c’est parfait ! Cela vous offre suffisamment de possibilités pour travailler.  Toutefois, il est important d’avoir une certaine homogénéité. En règle générale, sur une interface, les tailles peuvent aller de 14 à 16px pour le corps d’une page, de 18 à 22px pour le sous-en-tête, et jusqu’à 32 px pour l’en-tête. 

• Faire en sorte que l’élément le plus important soit le plus grand. Et à contrario, réduisez la taille des éléments moins importants. Mais attention ! Limitez le nombre d’éléments de grande taille à deux maximum, afin de renforcer la hiérarchie visuelle de votre page. 

3/ L’emplacement des éléments

L’emplacement des éléments aide les utilisateurs à voir la structure d’une page, et permet d’attirer l’attention sur certaines zones de l’écran, notamment sur les plus pertinentes. Sans ces emplacements prédéfinis, il est difficile de comprendre où se trouvent les zones standards telle que la navigation, le contenu, les publicités, etc. 

Les publicités sont par exemple, dans la majorité des cas, situées sur le bloc de droite d’une page web, et c’est bien souvent pour cela que les utilisateurs ont tendance à ignorer cette partie ! 

Prenons un exemple !

Sur l’application Spotify, l’utilisateur voit d’emblée plusieurs blocs ! Les espaces entre ces différents blocs permettent de les rendre individuel et bien distincts. Les espaces également situés entre les titres et le contenu apporte plus de clarté, et rend la hiérarchie bien plus compréhensive pour l’utilisateur. 😉

Découvrez les meilleures pratiques pour les emplacements :

• Laissez les éléments respirer ! Plus un élément est entouré d’espace blanc, plus il sautera au yeux de l’utilisateur. De cette manière, si vous souhaitez mettre en avant un bloc de votre page web, vous connaissez la technique !
  
• Pensez aux encadrés ! Si l’ajout d’espace blanc ne suffit pas pour accentuer la hiérarchie de votre page web, ajoutez des éléments tels que des bordures, ou des arrières-plans. Toutefois utilisez ces éléments avec parcimonie, pour ne pas encombrer votre page 😉

Le test du strabisme 👁

Une technique imparable apprise dans les écoles de design, c’est le floutage ! Appliquer un léger flou à une page web permet d’avoir une idée des emplacements et de la hiérarchie visuelle.

Pour conclure, n’oubliez jamais, avant de concevoir une interface, de définir la hiérarchie visuelle et donc les éléments importants que vous souhaitez que l’utilisateur retienne ! Ensuite, à vous de jouer en appliquant les différents éléments tels que la couleur, la taille ou l’emplacement 😉

Via : Visual Hierarchy in UX : Definition.