Les éléments d’un haut de page efficace (le bloc de conversion d’Accroche – Partie 2)

ae-quote

La première fois que j’ai lu cette citation, j’étais à la fois amusé par sa malice et impressionné par sa profondeur.

Dans le monde du webmarketing, on aime la théorie. On pourrait se rouler dedans toute la journée. Dans ce monde, tout ce qui est logique marche. C’est merveilleux ! Absolument Fantastique !

Seulement voilà. En face, on a des humains. Et peu importe à quel point notre stratégie semble parfaite sur papier, on doit à un moment la confronter à la réalité concrète, et la parfaire peu à peu pour arriver à un résultat poli.

Jusqu’ici, nous avons discuté de théorie. Entrons maintenant dans la pratique !

 

 

3 structures solides pour vos blocs d’accroche

Si nous parlions un peu des structures concrètes que vous pouvez utiliser pour former votre bloc d’accroche ?

Précédemment, on a vu qu’il nous fallait trois éléments : le titre, le lead simplifié et l’action. Voici 3 structures que vous pouvez utiliser dès aujourd’hui pour construire votre bloc d’accroche. Elles sont toutes de solides bases pour baser votre design.

 

 

Le classique

structure-accroche-a

Voici la plus courante des structures pour le bloc d’accroche, et pour une bonne raison. Non seulement elle est simple, mais elle convient parfaitement à toutes les tailles d’écrans. Si vous voulez tester plusieurs variations, je vous conseille de commencer avec celle-ci.

Le fond d’écran est soit une couleur vive, soit une belle photo. Dans le cas où on décide d’utiliser une photo, nous devons nous assurer que la lisibilité soit excellente. Si votre fond rend votre texte difficile à lire, la majorité de vos visiteurs ne feront pas l’effort.

Centré dans ce fond, le titre (en rouge sur le schéma) suivi du lead (en bleu sur le schéma) et enfin de l’appel à l’acte (en jaune sur le schéma). Suivez les recommandations de l’article précédent pour former ces différents éléments, et cette structure ne vous décevra pas.

Passons à la suite.

 

 

L’exclu

accroche-b

L’idée derrière cette structure est d’éloigner le contenu et l’appel à l’acte. En plaçant le titre et le lead en haut à gauche, et l’appel à l’acte en bas à droite. J’utilise cette structure lorsque l’appel à l’acte est assez complexe, et que le lead a besoin d’être plus long. Si en plus l’appel à l’acte à besoin d’un contexte, c’est parfait.

bulle-3

Parce que nous avons dégagé beaucoup d’espace, en particulier à gauche de l’appel à l’acte. Typiquement on utilise cet espace pour ajouter une note pointant vers l’appel à l’acte. Cet élément en gris sur le schéma est là pour ajouter une raison rapide de cliquer sur le bouton.

Le point faible de cette structure est son adaptabilité mobile. Souvent, il faudra faire une version simplifiée pour l’affichage mobile, avec un lead plus simple et sans l’élément gris de contexte.

Je vous recommande cette structure si vous savez que la majorité de votre trafic sera non-mobile et que le produit/service vendu est compliqué.

 

 

Le biais vidéo

accroche-c

Encore une fois, il s’agit de séparer le texte et l’appel à l’acte. Cette fois, selon un axe diagonal. Cette structure est particulièrement intéressante lorsqu’on a une vidéo explicative ou une vidéo de vente à montrer au visiteur. Comme vous pouvez le voir, l’œil du visiteur passe par le titre, le lead, puis la vidéo avant de s’arrêter sur l’appel à l’acte.

En choisissant bien l’image statique de la vidéo (celle qui s’affiche avant que l’on clique sur lecture) vous pouvez obtenir un très bon taux de visionnage de votre vidéo.

Avec un bloc d’accroche comme celui-ci, il est très possible que votre visiteur ne regarde même pas la suite de la page avant de cliquer sur le bouton.

bulle-4

Déjà, quand vous avez une vidéo. Mais plus en particulier, quand vous travaillez avec des visiteurs qui ne comprennent pas le problème que vous résolvez. Si vous avez un site et que vous vendez quelque chose, vous résolvez un problème.

Si le visiteur n’est pas conscient qu’il a ce problème, ou que le problème peut avoir certaines conséquences graves, ou qu’il peut être résolu, on peut dire qu’ils ne comprennent pas le problème. Ils seront alors moins réceptifs aux arguments de votre page. Vous devez rapidement les « mettre à niveau ». Pour ça, une vidéo explicative de quelques secondes est une excellente solution.

 

 

pause

Arrêtons ici pour l’instant. Je ne veux pas vous surcharger d’informations. Essayez d’appliquer ce que vous avez appris aujourd’hui à votre site, même en partie.

Rappelez-vous : un pas à la fois. Pourquoi pas commencer par essayer de refaire le haut de votre page d’accueil en suivant le modèle d’accroche classique ?

Dans un prochain article, nous aborderons la suite de ce sujet : les horriblement mauvaises pratiques de design pour les hauts de pages – qui font littéralement FUIR les visiteurs dès le haut de page…

D’ici là, carpe diem !

À bientôt,

Baptiste