Un site web plus persuasif grâce à la hiérarchie visuelle
La hiérarchie visuelle est un élément fondamental en web design et j’avoue avoir pas mal tergiversé avant de commencer la rédaction de cet article.
Je ne voulais pas vous proposer un énième article du genre « Les 12 points clés d’une hiérarchie visuelle efficace », vu et revu sur le web. Mais alors, comment présenter la chose ?
Présenter les éléments et concepts qui entrent en jeu dans la hiérarchie visuelle est important, certes. Mais je pense que c’est encore plus parlant lorsque ceux-ci sont mis en action dans un projet réel.
C’est pourquoi j’ai décidé de prendre un site existant, et de l’optimiser point par point en termes de hiérarchie visuelle.
Voici le site : https://audasioux.fr/
Je n’ai rien contre Ester et mon but n’est pas de critiquer son travail. Elle a sans doute fait son site elle-même et c’est déjà très bien. Le but est de vous montrer qu’avec de simples petits ajustements, vous pouvez renforcer la hiérarchie visuelle de vos pages.
Ceci étant dit, voici ce que nous allons voir :
- L’importance de la hiérarchie visuelle
- Présentation du site
- Comment nous scannons une page web
- La hiérarchie visuelle par le texte
- La règle d’or du webmarketing : 1 page = 1 objectif
- Les variations de couleur au service de votre hiérarchie visuelle
- L’importance des espaces en webdesign
C’est parti !
L’importance de la hiérarchie visuelle
L’essence du web design est de communiquer efficacement. Le problème, c’est qu’une page web comprend souvent un grand nombre d’informations. Et quand toutes ces informations se battent pour capter l’attention, le rendu peut vite devenir chaotique.
C’est là qu’intervient la hiérarchie visuelle.
C’est l’art d’organiser les éléments d’une page web par ordre d’importance. Elle a pour but d’aider vos visiteurs à scanner vos pages et à trouver sans effort les contenus qui les intéressent. Une bonne hiérarchie visuelle renforce votre message et crédibilise votre site web. Enfin, c’est l’outil le plus efficace pour apporter une touche professionnelle à votre design.
La hiérarchie visuelle s’appuie sur des principes fondamentaux de la psychologie du design.
Observez cette image :
Normalement, vous ressentez le besoin inconscient de classer ces objets. Votre cerveau remarque des différences et des similarités (de taille, de couleur) qui lui suggèrent que tel cercle est plus ou moins important que tel autre par exemple.
Comprendre que vos visiteurs analysent votre page web en termes de relations est primordial. Le web design n’est pas un empilement hasardeux d’éléments visuels mais un tout cohérent qui s’articule autour de votre message et de vos objectifs.
Pour articuler tout ça et apporter clarté et cohérence, nous utiliserons des techniques de design de base :
- la taille
- la couleur
- le contraste
- l’alignement
- les espacements
Voilà pour la théorie, penchons-nous maintenant sur le site d’Ester.
Présentation du site
Voici une capture d’écran de la page d’accueil du site. Je l’ai découpée en sections :
1 C’est la section la plus importante du site car elle apparaît au-dessus de la ligne de flottaison. Le but ici est de faciliter au maximum la prise d’information par le visiteur.
2 Cet élément semble être le CTA (call to action ou appel à l’action) principal de la page d’accueil d’Ester. Le problème, c’est que la couleur de fond est similaire à celle des titres un peu plus bas. C’est également la même couleur que les CTA secondaires. De plus, le bouton n’est pas assez visuellement mis en avant.
3 Cette grande section comprend tous les contenus et CTA secondaires. Ce n’est peut-être pas le cas, mais c’est comme ça que je comprends cette page web en tant que visiteur.
Globalement, voici les points d’amélioration pour renforcer la hiérarchie visuelle de cette page :
- la hiérarchisation des titres et sous-titres : par exemple, le titre principal (H1) a le même poids visuel que les sous-titres (H2) et certains H2 sont plus petits.
- l’alignement de certains éléments : par exemple les images des articles de blog
- les espacements
- la variation colorimétrique
Voyons maintenant comment optimiser chaque section.
Comment nous scannons les pages web
SECTION 1
Dans son ouvrage de référence Don’t Make Me Think, Steve Krug nous explique que nous ne lisons pas les pages web, nous les scannons. Nous ne lisons pas l’intégralité des textes, mais nous « bondissons » d’une ligne à l’autre à la recherche de quelque chose d’intéressant :
Comment nous créons une page web VS la réalité – Dont’t Make me Think, Steve Krug
L’enjeu est donc de faciliter la prise d’information de vos visiteurs en leur présentant de manière claire et immédiate les informations importantes (et pertinentes pour votre stratégie).
Il faut également prendre en compte la ligne de flottaison, car c’est l’endroit le plus stratégique de toutes vos page web. Certaines études ont montrées que vos visiteurs décident si ils vont rester sur un site en 3 secondes.
Voici la ligne de flottaison du site d’Ester :
Au niveau du menu, il faut faire attention au sens de lecture d’une page web : du haut à gauche vers le bas à droite. Le logo permet de renseigner aux visiteurs qui se cache derrière ce site, il devrait être aligné à gauche. De plus, les internautes ont l’habitude de cliquer sur le logo pour revenir à la page d’accueil. En design, on appelle ces habitudes le principe d’affordance et celui-ci est souvent contraint par les originalités. Enfin, le « bienvenue » en vert distrait inutilement, car il s’agit d’un lien vers la page sur laquelle nous sommes actuellement.
Pour le reste de cette section, la présentation est bonne. Il y a juste quelques petits problèmes d’équilibre : le titre de niveau 1 ne ressort pas assez, l’espace blanc entre la proposition de valeur et le paragraphe qui suit est trop important entraînant une rupture du rythme accentuée par la photo alignée à gauche.
Voici le nouveau rendu :
Pour le menu, j’ai replacé le logo à gauche. J’ai enlevé la couleur sur le lien actif et j’ai ajouté un CTA sur l’élément « Newsletter » car comme nous l’avons vu au début de cet article, il semble que cela soit l’objectif principal d’Esther.
Pour le reste, j’ai transformé l’élément « Hola » en texte décoratif et la taille du titre 1 a été grossi. La proposition de valeur est désormais rattachée au paragraphe et la photo est alignée à droite. Les éléments textuels colorés en bleu turquoise ont été mis en gras car cette couleur est déjà utilisée pour les liens secondaires (Quora, Youtube etc.). Et cela peut entrainer une confusion chez le visiteur et un problème de cohérence dans le design général de la page.
La règle d’or du webmarketing : 1 page = 1 objectif
SECTION 2
Quel est l’objectif numéro 1 d’Ester ? Apparement, que ses visiteurs s’inscrivent à sa newsletter.
Cette section est donc importante et stratégique. Le problème, c’est qu’elle ne ressort pas par rapport aux autres éléments de la page (et notamment les titres des autres sections) :
Le CTA est également trop « timide », il ne faut pas avoir peur d’utiliser une couleur contrastée pour les appels à l’action principaux.
Voici la nouvelle version de cette section :
Pour conserver la cohérence avec le titre de la section précédente, j’ai mis en place un sur-titre. L’ensemble des éléments ont été centrés pour casser la monotonie avec la section précédente. Pour le fond, j’ai repris le bleu très foncé de la couleur des titres.
Enfin, j’ai opté pour un CTA jaune car c’est une couleur qui ressort beaucoup dans les contenus d’Esther (ses vidéos Youtube ou son guide par exemple). Des espaces généreux ont été également ajoutés, nous reviendrons sur ce point un peu plus tard.
La hiérarchie visuelle par le texte
SECTION 3
Le texte est un élément fondamental en hiérarchie visuelle. Il est tout à fait possible d’établir une hiérarchie forte rien qu’avec du texte :
Sur la page d’Ester, la hiérarchie des titres et sous-titres n’est pas optimale. La page manque de rythme, et on doit produire un effort pour la scanner.
Ici, on voit bien que la taille des titres de niveau 2 et 3 n’est pas cohérente.
Voici la nouvelle version :
Désormais, les titre de niveau 2 ont le même poids visuel (33 px).
Les titres (de niveau 3) des articles ont été passés en bleu foncé et un lien « Lire l’article » a été ajouté pour faciliter la compréhension des visiteurs.
Si ce sujet vous intéresse, j’ai écrit un article complet sur le design des textes pour vous aider à renforcer la lisibilité et l’impact de vos contenus.Enfin, j’ai réglé le problème d’alignement des images des articles de blog et j’ai ajouté un CTA contrasté sur l’appel à l’action pour le téléchargement de l’e-book.
Les variations de couleurs au service de votre hiérarchie visuelle
SECTION 3
Les liens secondaires et les fonds des titres ont la même couleur, cela entraîne un problème de cohérence.
Dans ces cas là, la variation colorimétrique peut vous être d’une grande aide car elle permet de différencier vos éléments sans casser la cohérence de votre design.
Le moyen le plus simple d’établir une variation colorimétrique, et de prendre votre couleur et de jouer sur sa saturation et sa luminosité. Pour ça, vous pouvez utiliser la fonction HSL de votre couleur.
Le problème, c’est que la plupart des logiciels de graphisme ne proposent pas ce système colorimétrique. Le plus simple est d’utiliser Figma. Vous pouvez vous créer un compte gratuitement. Vous n’avez plus qu’à créer une forme de votre couleur, puis de générer le code HSL :
Pour générer une couleur plus sombre, on baisse la valeur du S et du L, et on fait l’inverse pour des couleurs plus clairs.
La valeur HSL du vert d’eau d’Ester (forme de gauche) est de : 184 – 39 -48.
J’ai dupliqué cette forme, et changé la valeur pour avoir une variation plus claire (184 – 95 – 98) que j’utilise pour le fond de la section Youtube et pour le footer :
Les différentes sections sont séparées, mais sans empiéter sur le poids visuel de l’encart d’abonnement à la newsletter. J’ai également ajouté des sur-titres à tous les titres de niveau 2 pour conserver une certaine cohérence dans le design général de la page.
L’importance des espaces en webdesign
La bonne gestion des espacements est un art en webdesign. Personnellement, j’ai mis beaucoup de temps à le maitriser (et ce n’est pas encore parfait).
C’est un vaste sujet mais pour cet article on va aller au plus simple.
Pour en savoir plus sur les espacements en web design vous pouvez consulter mon article dédié.Les espacements entre vos éléments, vos colonnes, vos sections etc. doivent être suffisants et cohérents.
Pour vous faciliter la tâche, je vous recommande de définir une « échelle d’espacement » basée sur le concept de la grille à 8 points.
Derrière ce mot bizarre se cache en fait quelque chose de très simple : tous vos espacements doivent être un multiple de 8.
Cette image vous aidera à mieux comprendre :
- Les flèches vertes représentent le padding (la marge interne) de chaque section (56px).
- La flèche grise représente le padding de chaque rangée (32px).
- La flèche orange représente la marge du bas entre un sous-titre et le texte qui le suit (16px).
Toute la page a été conçue avec ce système d’espacement, qui repose sur la grille à 8 points.
Voici donc le rendu avant/après du site d’Ester :
J’espère que cet article vous à aider à comprendre le concept de hiérarchie visuelle et qu’il vous permettra de mettre en place des pages web professionnelles et efficaces.
N’hésitez pas à me dire quelle version vous préférez en commentaire, votre avis m’intéresse beaucoup !
Newsletter mensuelle sur le Web Design
PAR THIBAUT BROUARD
Pour apprendre à concevoir des pages web simples, élégantes et efficaces. En vous inscrivant, vous recevrez en cadeau de bienvenue mon guide du site Internet performant (PDF de 42 pages).
Le respect de votre vie privée est une priorité : votre email est en sécurité et ne sera jamais cédé à des tiers. Vous pourrez vous désincrire à tout moment en un clic. Consultez ma politique de confidentialité.
0 commentaires