3 étapes pour créer des boutons d'actions efficace

Aujourd’hui on va s’intéresser à un sujet stratégique pour vous : vos boutons d’actions !
Vos boutons sont juste ESSENTIELS dans vos sites, c’est ce qui vous permet de convertir un utilisateur en acheteur/client/contact/abonné, etc.

C’est ce qui va faire fonctionner votre business en ligne alors il est essentiel de bien les travailler, stratégiquement !
 


Aujourd’hui on va décortiquer ensemble les boutons et les regarder sous toutes les coutures pour que vous puissiez les rendre PARFAIT pour vos utilisateurs !


C’est quoi un bouton d’appel à l’action ?

➡️ Autrement nommé : “call-to-action” ou CTA

Un bouton d’appel à l’action, c’est un bouton, qui est claire, visible et incitatif et surtout qui converti.

👉 Ce que je vous propose cette semaine c’est de nous attarder sur la priorisation, la construction et le positionnement de vos boutons pour les rendre PARFAIT et que vous puissiez convertir davantage vos utilisateurs ! La semaine prochaine on s’intéressera d’avantage à la rédaction de vos boutons et des autres petits intitulés qui se trouvent sur votre site : on appelle cela la micro-copie ou micro-rédaction.

C’est quoi la méthode ?

✅ On va procéder par étape.

⏱ Durée : 2 heure max : suivez le temps indiqué à chaque étape, mettez un chrono !

🎯 Objectif : Convertir davantage vos utilisateurs en acheteurs/clients/contacts/abonnés, etc.

✍🏻 Outil : ordinateur ou papier et stylo.

Par exemple, au moment de la conception d’un site, chaque élément du site va être conçut de manière à s’adapter (en taille : s’agrandir ou se réduire) pour correspondre aux différentes tailles des divers supports.


A lire aussi : Comment concevoir efficacement sa version mobile ?


Nous allons nous intéresser à de nombreuses bonnes pratiques pour construire vos boutons d’appel à l’action (CTA). Celles-ci seront réparties en trois grandes étapes, à savoir : la construction de vos CTA, le design de vos CTA et l’emplacement de vos CTA à des endroits stratégiques.

Les différentes étapes qui vont suivre, vont vous permettre de retravailler vos CTA pas à pas.

➡️ Etape 1 : construire vos CTA

✔️ Vos boutons primaires, secondaires et tertiaires, doivent être différencier clairement pour guider vos utilisateurs là où vous souhaitez qu’ils aillent.

✔️ Les boutons d’actions secondaires et tertiaires à proximité d’un bouton primaire peuvent être présents mais doivent être visuellement différents, moins mis en avant et valorisés.⁣ (voir l’exemple ci-dessous).


LESS IS MORE ⁣⠀
Plus un internaute aura de choix moins sa navigation sera fluide. Il faut donc offrir à l’internaute le moins de choix possible afin de rendre sa décision plus rapide.

👉 Aide à la décision

Il est recommandé parfois d’écrire des phrases de précisions sous vos boutons pour clarifier encore plus l’action en cours.⁣⁣ En effet, bien souvent certaines choses paraissant évidente pour nous et nous ne pensons pas nos utilisateurs n’ont pas forcément lu, vu, eu l’information en question. Il est donc important de pouvoir préciser certains détails sous vos boutons d’actions (comme sur l’image ci-dessous) afin de pouvoir rassurer, inciter et guider davantage vos utilisateurs dans leur démarche.

Voici quelques exemples de phrase d’aide à la décision qui peuvent venir accompagner vos boutons d’actions :

– “je m’inscris” et dessous “c’est gratuit” ;⁣⁣⠀
– “je saisis mon e-mail” et dessous “pourquoi j’en ai besoin ?” avec un lien vers une page explicative ;⁣⁣⠀
– “je recherche” et dessous “par nom ou adresse uniquement” ;⁣⁣⠀
– “je remplis ma fiche” et dessous “vous pourrez la modifier à tout moment” ;⁣⁣⠀
– “j’inscris mon numéro de téléphone” et dessous “ne sera pas diffusé publiquement” ;
– etc.

EXTRA INFOS
Il est parfois nécessaire d’ajouter un surplus d’informations en dehors du texte des CTA. Ces informations servent généralement à orienter les utilisateurs dans le choix du clic.

⁣⠀

➡️ Etape 2 : le design de vos CTA

[⏱30 minutes] 

Pour que vos boutons soient le plus impactants possible, il est important de leur donner un aspect visuel  qui le soit aussi. Tout d’abord, il faut travailler sur la couleur, elle doit être facilement identifiable et par tous. Ensuite, il faut s’attarder sur la forme, il faut que vos utilisateurs le reconnaissent comme tel. Enfin nous parlerons d’interaction avec bouton, le fait qu’il s’anime au survol clarifie auprès de vos utilisateurs qu’ils peuvent cliquer dessus.

👉  Choisir un style, une couleur pour vos boutons d’actions

En plus de générer de l’empathie, la couleur permet de créer de l’affordance*. Les CTA les plus efficaces sont les plus visibles. Il faut donc privilégier une couleur qui se détache clairement du fond de la page. 

*L’affordance, c’est la capacité d’un objet, d’un élément de votre site à suggérer son utilisation, sa fonction.

Par exemple : un bouton. Dans la tête de vos utilisateurs, une représentation visuelle d’un bouton va suggérer à l’utilisateur qu’il doit cliquer dessus pour accéder à autre chose.

L’affordance c’est, en quelque sort, offrir à vos utilisateurs les moyens de se servir d’un élément sans mode d’emploi.

👉 Les affordances sont tous des appels à l’action comme : tirer, pousser, appuyer, tapoter, cliquer, effleurer, porter, etc. Ce sont tous des moyens d’interagir avec un objet ou une interface.

Certains vous diront de préférer des couleurs standards pour vos boutons, que cela permet de convertir davantage. Sachez que le “vert” a une connotation de “validation” et le rouge une connotation “d’annulation” ou d'”erreur”. Personnellement, j’ai pu tester les deux façons de faire sur des interfaces et j’ai une préférence pour l’adaptation à la charte graphique.

De même, dans le cadre d’une étude utilisateurs, j’ai pu poser la question aux principaux concernés. Les utilisateurs en général ont répondu qu’ils préfèrent voir des CTA en adéquation avec la charte graphique de la marque. Le design prime si on leur pose la question.

A vous de choisir, moi je préfère donner une priorité à l’expérience satisfaisante pour mes utilisateurs finaux plutôt que de convertir plus. Mais chacun ses objectifs !

TYPOGRAPHIE

Peu importe ce que vous choisirez comme stratégie, dans tous les cas ce qui est essentiel, c’est que vos couleurs soient assez contrastés avec votre arrière-plan pour être bien visible.

Vous devez retenir, que vos boutons doivent être surtout visible et lisible.

👉  Y-a-t’il une forme adéquate ?

Rectangulaire ou arrondis sur les bords ? Plein (fond coloré) ou vide (sans fond) ? Avec ou sans icônes ? Cela va surtout dépendre de la priorité du bouton concerné, du style de votre charte graphique et de votre ligne éditoriale.

Les arrondis peuvent être plus ou moins prononcés, cala apportent de la douceur ;

Les choses très droite et rectangulaire apportent plus de sérieux, certainement préférable pour un acte d’achat par exemple.

ICÔNE

Un CTA peut être accompagné d’icônes afin de rendre plus claire l’action qu’il engendre. C’est une option.

👉  Rendre vos boutons interactifs

Vos boutons doivent être interactif pour inciter davantage vos utilisateurs à cliquer dessus. L’interaction avec les boutons doit respecter certains codes pour rassurer et guider l’utilisateur.

C’est un détail, mais essentiel car ils permettent à vos utilisateurs d’interagir avec votre site, donc avec vous. C’est le genre de détail qui peut avoir un impact fondamental sur votre conversion et auquel on ne pense pas toujours.

☝️Par exemple, vos utilisateurs s’attendent à ce que le pointeur de leur souris change au survol d’éléments cliquables : pour devenir une petite main avec un doigt prêt à appuyer “”. De même, vos utilisateurs s’attendent à ce que vos boutons changent au survol. Cela peut être le contour, la forme, la couleur, l’icône, etc qui change, peu importe mais il s’attendent à une “animation” au survol.

Cela permet de porter plus d’attention sur l’élément et de leur montrer que l’élément est réellement cliquable. Cela les incite davantage à cliquer.

⚠️Attention cependant aux éléments de survol car le survol n’est pas possible sur mobile. Ce qui signifie que tout vos éléments de survol doivent être désactivé ou traité différemment sur mobile.

CONVENTION D’INTERACTIONS

Il existe des conventions d’utilisation des sites, c’est-à-dire des habitudes, des réflexes qu’on vos utilisateurs et qu’il faut essayer de respecter un maximum pour ne pas les perdre dans leur navigation et les guider jusqu’au bout de leur démarche.


Lire aussi : Les habitudes de vos utilisateurs créent des standards…ou l’inverse


➡️ Etape 3 : l’emplacement de vos CTA dans vos pages

[⏱15 minutes] 

Vos utilisateurs scannent votre contenu. Ils le lisent très rapidement et se concentre davantage sur certaines zones (voir l’exemple ci-dessous). Sur grand écran, ils scannent votre contenu comme un “F” parce qu’en France, on lit de gauche à droite. Sur smartphone, les utilisateurs se concentre sur ce qu’il y a au centre.

👉  Positionner vos CTA

En prenant en compte le schéma ci-dessus, on se rend compte, qu’il est préférable, de placer les éléments stratégiques tel qu’un CTA au centre.

Sur ordinateur, les CTA se placent stratégiquement de façon centré, ce qui permet aussi d’accompagner le mouvement de lecture, de la même manière que nous lisons de gauche à droite.

Sur mobile, les CTA se positionnent davantage en bas de l’écran et au milieu pour être plus facilement accessible par le pouce, que vous soyez droitier ou gaucher. Oui, évidemment à un moment donner on va scroller et il ne se retrouvera plus en bas, il sera au centre, donc repéré. Puis vos utilisateurs, une fois interpellé redescendront automatiquement le bouton vers le bas pour qu’il soit accessible par leur pouce et surtout pour lire l’intégralité du bloc concerné. Ces pratiques sont inconsciente et automatique pour l’utilisateur.

Un bloc peut être composé d’une image, d’un titre, d’une description courte et d’un CTA, par exemple. Dans ce cas votre utilisateur aura le réflexe de placer l’ensemble du bloc sur son écran et il faut que le CTA se retrouve positionné plutôt en bas de l’écran et au milieu.

TESTER

L’important c’est de tester. Encore une fois, selon votre typologie d’utilisateurs certaines des ses recommandations peuvent varier. Ce qu’il faut c’est tester, étudier, comparer et recommencer. Jusqu’a ce que vous trouviez ce qui est le plus impactant dans votre cas. Les cartes de chaleur sont un bon moyen de repérer les zones de votre site sur lesquels vos utilisateurs ont le plus tendance à déplacer leur souris. Vous pouvez utiliser des outils comme Hotjar pour réaliser des cartes de chaleur de vos sites.

👉  le cas des landing page : se concentrer sur 1 seul CTA pour 1 objectif précis

Une landing page égale un objectif bien précis. Il est nécessaire de se recentrer sur une action bien précise avec la présence d’un seul CTA bien mis en valeur pour atteindre l’objectif. Si d’autres CTA doivent être présents, veillez à les différencier du CTA principal qui doit toujours être considéré par l’internaute comme l’action principale. 

Une landing page est une page d’atterrissage stratégique et spécifique. Qui n’apparaît pas forcément à la vu de tous vos utilisateurs, ou même dans votre arborescence (menu de navigation) mais qui peut vous permettre de faire passer des messages ou de convertir des utilisateurs. Ces pages sont construire pour répondre à un objectif bien précis. Dans ce cas, il faut se contenter sur ces pages là, d’un seul et même CTA, disposé à plusieurs endroits.


👉 Vous avez combien de style de boutons différents sur votre site ?

Maintenant à vous de travailler et de prioriser vos boutons d’appel à l’action pour avoir un site qui est 10 fois plus efficace 🙌

2 réflexions sur “3 étapes pour créer des boutons d'actions efficace”

Laisser un commentaire

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