Etape #1 d’un design de site web qui convertit : La Hiérarchie Visuelle (avec exemples)

Imaginez que vous arrivez sur une page web avec beaucoup d’options qui se ressemblent toutes. Vous ne savez pas où vous êtes censé cliquer.

Si vous êtes particulièrement déterminé à utiliser ce site, vous passez peut-être une trentaine de secondes à balader votre curseur sur la page, à la recherche d’une solution.

Mais 95% des cas, le choix est automatique : vous fermez l’onglet. En langage Google Analytics, vous venez de « rebondir ».

Evidemment, nous voulons éviter que les visiteurs sur nos sites se trouvent dans cette situation. Nous voulons communiquer clairement quelle est la prochaine étape qui fera progresser le visiteur le long du processus d’achat.

Hiérarchie visuelle

Mais comment faire comprendre à un nouveau visiteur où il doit cliquer ensuite, en moins de 3 secondes ?

3 secondes ne suffit pas pour lire l’ensemble des options présentées dans nos menus.

Nous devons donc communiquer quels sont les éléments les plus importants à travers des signaux visuels : couleur, contraste, taille, etc…

L’avantage de ces signaux visuels est que le cerveau les assimile en une fraction de seconde, ce qui permet à notre visiteur de gagner une compréhension quasi-instantanée de l’organisation de notre page.

L’ensemble de ces signaux permet d’établir une Hiérarchie Visuelle : une façon de distinguer les éléments importants de la page, sans avoir à lire un seul mot.

Un bon design de site web reflète vos choix business

Pour maximiser vos taux de conversion, chaque page de votre site doit avoir UN objectif. C’est le rôle de votre design de communiquer clairement cet objectif n°1.

La décision des éléments à mettre en avant sur une page est donc un choix qui appartient au marketeur, pas au designer.

Si vous n’êtes pas clair sur l’action la plus importante sur chaque page, votre visiteur ressentira ce sens de confusion que nous avons tous connu. « Ou est-ce que je suis censé cliquer maintenant ? ».

Dans beaucoup de cas, une page confuse et encombrée est le résultat d’un manque de priorisation des objectifs marketing, pas un symptôme de l’incompétence du web designer.

D’un autre côté, une forte hiérarchie visuelle vous permet de communiquer un message plus clair, donc plus efficace. Le résultat est des meilleures conversions vers l’action la plus voulue (inscription, appel téléphonique, achat…). Et bien sûr, le véritable objectif : plus de ventes.

Les leviers de la hiérarchie visuelle

Voici les leviers que vous pouvez utiliser pour signaler l’importance relative des éléments d’une page :

1) La couleur

Utiliser une couleur en contraste avec le reste de la page est la façon la plus simple d’attirer l’attention de votre visiteur sur un CTA (Call To Action), comme par exemple un bouton.

Par exemple, quelle est l’action qu’Amazon veut que vous preniez quand vous êtes face à une page produit ? Ajouter ce produit au panier bien sûr !

Et donc, sur un site où les liens de navigation normaux sont bleus, le bouton « Ajouter au panier » est fièrement orange.

2) La taille

Plus un élément est gros, plus il est important !

3) Le placement

Un élément placé en haut de la page (vous le voyez sans avoir besoin de scroller) et vers le centre (vos yeux tombent directement dessus) est clairement plus important qu’un élément placé plus bas, ou sur le côté.

Les créateurs du logiciel de landing pages LeadPages sont très clairs sur leur page d’accueil : ils veulent que le nouveau visiteur clique sur le bouton pour regarder leur vidéo de présentation.

(Notez par ailleurs le bouton vert qui dirige vers la page de paiement : il combine les signaux de couleur et de taille pour signaler qu’il s’agit de l’étape suivante, dès  que la vidéo a été visionnée).

4) L’espace blanc

Entourer un élément d’espace blanc permet de le faire ressortir par contraste.

La page de l’Apple Watch laisse de grands espaces blancs pour diriger directement l’œil vers deux éléments : le nom du produit, et sa photo.

Comment utiliser la hiérarchie visuelle pour augmenter vos taux de conversions : Exemples

Air France

Commençons par un cas simple. Quelle est l’action la plus importante pour Air France sur sa page d’accueil ?

Que vous recherchiez un vol ! (La première étape dans le tunnel de vente).

C’est sur cette action précise qu’ils vous dirigent avec l’utilisation d’un bloc rouge vif :

(Cliquez sur l’image pour la voir en plus grand).

J’ai rajouté les numéros en jaune pour vous aider à suivre la hiérarchie des éléments :

1. Le bloc rouge permet de répondre à la question de la majorité des visteurs d’AirFrance.fr : « Où est-ce que j’achète un billet d’avion ? ».
2. Faire de ce bloc une flèche fait naturellement glisser le regard vers les champs de recherche (Objectif de la page).
3. Les actions secondaires sont signalées par le même rouge, mais en plus petite quantité.
4. Le même rouge est utilisé, avec des icônes encore plus petites.
5. Le choix de couleurs pastels pour ces blocs (versus le rouge vif de « Acheter un billet ») signale qu’il s’agit d’options secondaires.

Facebook

(Cliquez sur l’image pour la voir en plus grand).

On peut supposer sans risque que la grande majorité des gens qui verront la page d’accueil de Facebook sont déjà inscrits aux réseau social, et cherchent juste à se connecter.

Et pourtant, le champ de connexion est le 5ème élément mis en avant, derrière :

1. Le titre de la page, « Inscription »
2. La proposition de valeur
3. Une phrase pour soulager les doutes du nouveau venu : « C’est gratuit (et ça le restera toujours) »
4. Le bouton d’envoi du formulaire

Pourquoi mettre en avant l’inscription quand la grande majorité des visiteurs cherchent à se connecter ?

Probablement parce que Facebook sait que les membres existants sont déterminés à se connecter à leur compte, mais les visiteurs qui ne sont pas inscrit doivent être accueillis, rassurés et convaincus.

La page est optimisée pour servir les objectifs business de Facebook (grandir le nombre de membres).

Adopte Un Mec

Le célèbre site de rencontre utilise une priorisation des éléments particulièrement similaire à celle de Facebook :

(Cliquez sur l’image pour la voir en plus grand).

1. Ce slider communique implicitement la proposition de valeur du site : « Faites votre marché dans différentes catégories d’hommes ».
2. Le Call To Action : « Inscription rapide ». Notez la taille énorme des champs à remplir et la présence de pointillés autour du formulaire.
3. La phrase sous le logo permet de renforcer la promesse de « Rapide » et d’alléger les doutes avant l’inscription. Le rose ressort clairement sur le fond noir.
4. Similaire au slider, cette zone renforce implicitement la proposition de valeur : « C’est vous (la femme) qui faites votre marché ».
5. Finalement, on en arrive à la zone dédiée aux utilisateurs existants : le panier et le champ de connexion.

AirBnb

La page d’accueil du site de location de logement AirBnb est exemplaire en matière de hiérarchie visuelle :

(Cliquez sur l’image pour la voir en plus grand).

1. La proposition de valeur en deux temps : une headline pour capturer l’attention, et une phrase pour décrire précisément le service.
2. Voilà notre action la plus importante : le bouton « Rechercher » est clairement distingué du reste de la page par sa couleur rouge.
3. Si vous n’avez pas encore utilisé la fonction de recherche pour trouver votre logement, vous avez peut-être encore des questions : la prochaine étape est le « Mode d’emploi ».
4. Parmi les liens du menu, « Publiez votre annonce » est mis en avant par un bouton de couleur. Il s’agit probablement d’un objectif à forte valeur pour AirBnb.
5. Finalement, les boutons d’inscription et de connexion sont en retrait. Sur AirBnb, ils deviennent importants uniquement plus tard dans le tunnel d’achat,  une fois que le visiteur a déjà choisit un logement.

Exemples de sites eCommerce : Achetons un barbecue…

Barbecue & Co

Pour voir ce que ces principes peuvent donner sur un site de eCommerce, je me suis placé dans les sandales d’un acheteur potentiel de barbecue, et j’ai tapé dans Google « Acheter un barbecue ».

Le premier site que j’ai ouvert s’est révélé très différent des pages que je vous ai montré jusqu’ici.

Le site en question est barbecue-co.com et voici à quoi ressemble la page d’accueil :

(Cliquez sur l’image pour la voir en plus grand).

Vous remarquerez tout de suite l’absence de mes numéros jaunes. Et pour cause : je suis bien incapable de déterminer dans quel ordre je suis censé voir les éléments de cette page.

Le premier élément visible est la headline « Barbecue & Co passe à l’heure d’hiver », mais en tant que nouveau visiteur je ne suis pas sûr de quoi faire de cette information.

Tous les autres éléments sont des mêmes couleurs : orange, beige et marron.

Seule la bannière « Recettes » en bas à droite se fait remarquer avec un fond rouge. Mais est-ce délibéré ? Il semble peu probable que ce clic soit l’Objectif principal sur cette page.

Bien sûr, cette page est loin d’être inutilisable. Mais quand un shopper est en phase de recherche / comparaison, et a ouvert plusieurs onglets (comme je viens de le faire), vous n’avez en effet que trois secondes pour le convaincre d’inclure votre site dans son échantillon. La moindre confusion peut suffire à lui faire fermer l’onglet.

Ici, quelques changements simples dans la hiérarchie visuelle suffiraient à guider le nouveau visiteur vers une action spécifique, comme par exemple : afficher la liste des barbecue disponibles.

Par ailleurs, en navigant un peu plus longtemps sur le site, on découvre que d’autres pages importantes souffrent d’une pauvre hiérarchie visuelle.

Par exemple les pages produits :

(Cliquez sur l’image pour la voir en plus grand).

Passons sur le choix perturbant d’avoir fait du bouton « Ajouter au panier » un pictogramme plutôt que de l’écrire en toute lettre, et parlons plutôt de la question de la hiérarchie visuelle.

Certes, le bouton « Ajouter au panier », clairement l’action la plus importante sur une page produit, est orange, comme sur Amazon… mais tout le site est orange !

Changer la couleur de ce bouton pour du bleu créerait un contraste beaucoup plus fort, et permettrait de signaler au visiteur « Voilà le bouton le plus important sur cette page ».

Ce simple changement est virtuellement garanti d’augmenter le pourcentage de visiteurs qui ajouteront un produit au panier.

Rue du commerce

Le site suivant est la section « Barbecue » de Rue du commerce :

(Cliquez sur l’image pour la voir en plus grand).

Ici, les designers n’y ont pas été avec le dos de la cuillière en ce qui concerne la hiérarchie visuelle.

Il y a littéralement un chiffre géant EN FEU au millieu d’un design bleu… mais c’est efficace !

1. Le -4% fait le grand chelem : Couleur, Taille, Placement et Espaces blancs. Impossible de le manquer. Il s’agit aussi d’un code de réduction, qui représente a priori un avantage compétitif crucial à communiquer.
2. Passé le choc de la bannière rouge, l’oeil se pose sur un Call To Action plus subtil: un guide d’achat du barbecue. Pour beaucoup de visiteurs qui ne sont pas experts en la matière, ce sera le clic évident sur cette page…
3. … mais si vous n’avez pas besoin d’un guide d’achat, vous pouvez directement chercher un produit en plongeant dans les catégories proposées.
4. La navigation secondaire a choisi 3 options à mettre en avant, qui représentent probablement les choix les plus populaires et / ou profitables pour le site (Meilleures affaires, Cuisines d’extérieur, Barbecues au gaz).

Comparez cette page d’accueil avec celle du site Barbecue & Co : ici, l’étape suivante est claire en un clin d’œil pour le visiteur. Et surtout, toutes ces actions sont alignées avec l’objectif business : pousser le visiteur à sélectionner un produit.

Regardons maintenant la page Produit du même site :

(Cliquez sur l’image pour la voir en plus grand).

Je ne vais pas rentrer dans les détails, mais voici les grandes différences avec la page produit de Barbecue & Co :

• L’utilisation des espaces blancs permet de faire ressortir l’essentiel
• Les éléments mis en avant : bon de réduction, image produit, bouton d’ajout au panier, prix (c’est à dire les éléments indispensables à la décision d’achat)
• Les éléments volontairement mis en retrait : référence du produit, détails de livraison, dimensions, etc…

Augmenter les abonnés à la newsletter d’un blog

Pour terminer cet article, voyons un type de site qui recherche une conversion bien particulière : un blog qui cherche à générer des abonnés emails.

(Comme celui que vous êtes en train de lire d’ailleurs : cliquez ici pour être tenu au courant quand je publie un article en profondeur sur l’optimisation des conversions).

Thesis Blog : +51.7 % d’abonnés avec un simple changement

Commençons par l’exemple du blog de Thesis :

(Cliquez sur l’image pour la voir en plus grand).

Il s’agit d’une page d’accueil de blog classique… à un détail près : avant l’habituelle liste des articles se trouve un zone dédiée à la collecte des emails.

Est-ce efficace ? Oui, selon cet article dans lequel le responsable du blog explique que ce simple changement a augmenté le taux d’inscription sur le blog d’un incroyable 51,7 % !

VideoFruit

Le blog VideoFruit utilise différentes couleurs pour faire ressortir les actions les plus importantes :

(Cliquez sur l’image pour la voir en plus grand).

Ici, les éléments 1, 2 et 3 sont mis en avant par des couleurs qui contrastent fortement avec le thème bleu du blog.

Chacun de ces trois éléments redirige vers une landing page différente où le visiteur est incité à entrer son email en échange d’un bonus gratuit. La liste des articles (numéro 4) est visuellement dé-priorisée, tout en restant parfaitement lisible.

(Si cette stratégie vous semble familière : c’est normal ! J’utilise une méthode similaire sur Marketing Mania pour mettre en avant les actions les plus importantes de la barre de droite).

Téléchargez gratuitement « La Checklist de la Hiérarchie Visuelle »

La Checklist de la Hiérarchie Visuelle est un PDF de 8 pages qui vous permettra d’appliquer ce que vous avez appris dans cet article à votre site actuel, ou à votre prochain projet.

(Et vous découvrirez aussi une astuce étonnante pour évaluer en clin d’oeil la hierarchie visuelle de n’importe quelle page web).

Cliquez sur ce bouton pour la télécharger :

Téléchargez « La Checklist de la Hiérarchie Visuelle »