Conversion et experience

Hiérarchie visuelle

La hiérarchie visuelle est l’ordre dans lequel une page est parcourue du regard. Elle décide de ce qui est vu, et donc de ce qui existe pour le visiteur.

Une page sans hiérarchie oblige à tout lire pour trouver l’essentiel. La plupart des visiteurs ne le font pas.

Les leviers qui l’établissent

Cinq, par force.

La taille. Le plus grand est vu en premier, avant même d’être lu.

Le contraste. Un élément qui tranche avec son environnement capte le regard, indépendamment de sa taille.

La position. Le haut et la gauche sont parcourus en premier dans une lecture occidentale. Ce qui est en bas d’écran n’existe que pour ceux qui défilent.

L’espace. Un élément isolé par du vide se remarque plus qu’un élément entouré. C’est le levier le plus efficace et le moins utilisé.

La couleur. Utile quand elle est rare. Une page à six couleurs d’accent n’en a aucune.

L’erreur du tout important

C’est l’échec le plus courant, et il vient d’une bonne intention.

Chaque service veut son bloc en évidence. Le résultat est une page où tout est mis en avant, donc où rien ne l’est. Le visiteur ne sait pas où regarder et traite la page comme un bruit.

Le test qui tranche : plisser les yeux devant la page jusqu’à ce que le texte devienne illisible. Ce qui reste visible est ce que le visiteur voit en premier. Si ce n’est pas ce que vous vouliez, la hiérarchie est fausse.

Son effet sur la conversion

Direct, et mesurable.

Un appel à l’action qui n’est pas dans les trois premiers éléments perçus est cliqué beaucoup moins. Une information décisive placée en bas de page ne lève aucune objection.

La carte de défilement, décrite côté heatmap, dit à quelle hauteur la moitié de l’audience a disparu. Tout ce qui compte doit être au-dessus.

Ce qu’elle suppose

Une décision préalable sur ce qui est prioritaire, prise avant le design. C’est ce que règle le wireframe, et c’est une décision de contenu avant d’être une décision graphique.

Elle rejoint aussi la structure des titres : une page dont les balises Hn suivent un ordre logique est plus facile à parcourir, pour le lecteur comme pour le moteur.

FAQ

Questions fréquentes

01

Combien d'éléments mis en avant ?

Un principal, deux secondaires au maximum par écran.
02

La hiérarchie change-t-elle sur mobile ?

L'ordre vertical devient le seul disponible. Ce qui était à droite passe en dessous, souvent hors du premier écran.
03

Est-ce mesurable ?

Indirectement, par le taux de clic sur l'action principale et par la carte de défilement.