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. 

Le site de la mutuelle heyme (réalisé par Wexperience) utilise des couleurs différentes, notamment pour distinguer les éléments concernant la mutuelle santé, l’assurance, et la santé à l’étranger.
 

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.

Le site Renault utilise par exemple le gras sur sa police de caractère de manière à attirer le regard de l’utilisateur sur son offre CLIO. L’offre doit être la première chose à voir !
 

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.

Hiérarchie visuelle
Sur la page d’accueil du site Yves Rocher on peut y voir le contenu de droite affiché en plus grand, suivi d’un CTA « Je découvre » bien visible ! L’objectif est de concentrer l’attention de l’utilisateur vers leur nouveau produit !

La suite est à découvrir sur notre site partenaire, Wexperience, agence d’ergonomie Digitale.

cta-lire-suite-cc

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Merci de taper les caractères de l'image Captcha dans le champ

Merci de saisir ces caractères dans le champ
ci-dessous afin de valider votre commentaire.

Robin Commerce

Article de : Robin Commerce

Del, Robin ou encore Abdel ... certains pensent que je souffre d'un trouble dissociatif de l'identité haha. Vif et agile, votre Capitaine a fait de moi son compagnon d'armes dans sa quête sur le web :)