Boutons «appel à l'action» directives, meilleures pratiques et exemples

Les boutons d'appel à l'action sur les sites Web sont souvent négligés. Parfois, les concepteurs ne comprennent pas exactement ce qui fait qu’un bon appel à l’action est plus qu’attrayant et qu’il s’intègre parfaitement dans le projet. Mais les boutons d’appel à l’action sont trop importants pour pouvoir être conçus sans comprendre en quelque sorte ce qui les rend efficaces. Après tout, l’essentiel d’un bouton d’appel à l’action est d’amener les visiteurs à faire quelque chose.

Il est important d'acquérir au moins une compréhension de base de l'influence de la couleur, de l'échelle, de la langue et d'autres facteurs sur le taux de conversion d'un bouton d'appel à l'action. Les concepts présentés ici ne sont pas compliqués, mais ils nécessitent un peu de prévoyance et de planification pour créer le plus efficace des boutons d’appel à l’action au sein d’une conception donnée. Lisez la suite pour plus d'informations sur chacun de ces points et plus.

Le but des boutons "Call to Action"

Les boutons d'appel à l'action peuvent remplir diverses fonctions. Après tout, “appel à l'action” est vraiment un peu vague. Tout ce que cela signifie, c’est que son objectif principal est d’amener un visiteur de votre site à: faire quelque chose. Quelque chose pourrait être d'ajouter un produit à leur panier, de télécharger quelque chose, de demander des informations ou à peu près n'importe quoi d'autre.

Étant donné que les boutons d’appel à l’action ont des objectifs si variés, il faut tenir compte de ses objectifs. Le type de site, le marché cible et l'action souhaitée peuvent tous jouer un rôle dans la meilleure conception d'un bouton d'appel à l'action..

Types de boutons "Call to Action"

Il existe différents types d'appels aux boutons d'action. Alors que chaque type vise à amener les visiteurs à effectuer une action donnée, celle-ci peut varier considérablement. Vous trouverez ci-dessous la liste des types d’appels aux boutons d’action les plus courants, en fonction de l’action qu’ils vous demandent..

1. Ajouter au panier boutons

Les sites de commerce électronique utilisent généralement un certain nombre de boutons d’appel à l’action, mais le plus utilisé est le “ajouter au panier” bouton. Ces boutons apparaissent généralement sur des pages de produit individuelles. Leur objectif est d'inciter les clients à acheter un article. Les éléments de conception courants dans les boutons Ajouter au panier incluent une formulation simple (telle que “Ajouter au panier” ou “Ajouter au panier” ou “Acheter maintenant“) et l'utilisation d'icônes (généralement un sac ou un chariot).

2. Boutons de téléchargement

Les boutons de téléchargement sont similaires aux boutons d’ajout au panier en ce qu’ils tentent d’attirer un visiteur de prendre possession d’un article. Dans le cas des boutons de téléchargement, de nombreux concepteurs choisissent d'inclure plus d'informations que d'autres types de boutons (telles que les informations de version ou la taille du téléchargement)..

3. Boutons d'essai

Certains sites tentent d'inciter leurs visiteurs à essayer leurs offres, généralement sous la forme d'un essai gratuit. Cela pourrait être un téléchargement gratuit ou un compte gratuit, en fonction du site. Certains sites utilisent le “moins est plus” philosophie et minimiser la langue sur leurs boutons, tandis que d’autres aiment offrir plus d’informations sur le contenu de l’essai..

4. En savoir plus de boutons

En savoir plus Les boutons sont généralement utilisés à la fin d’un bloc d’informations (souvent sur la page d’accueil). Ces boutons sont généralement simples, mais souvent surdimensionnés pour attirer l’attention des visiteurs..

5. Boutons d'inscription

Les boutons d’inscription apparaissent le plus souvent dans deux versions différentes. Le premier type est généralement associé directement à un formulaire d'inscription. Le second type est généralement utilisé de la même manière que “ajouter au panier” boutons, permettant aux utilisateurs d'acheter ou de s'inscrire à un service ou à un compte avant qu'ils n'atteignent un formulaire d'inscription.

Il existe d'autres types d'appels aux boutons d'action, mais ceux-ci sont les plus courants. Les directives qui s'appliquent à celles mentionnées ci-dessus s'appliqueront probablement également à tout autre type de bouton d'appel à l'action que vous pourriez concevoir..

Utiliser efficacement l'espace négatif

Vous souhaitez que vos boutons d'appel à l'action se démarquent du contenu environnant et attirent vraiment l'attention des visiteurs de votre site. Pour ce faire, vous devez utiliser un espace négatif autour de ces boutons. Incorporer un espace vide entre votre contenu et votre bouton d'appel à l'action. Bien que cela soit moins important (et moins courant) sur certains boutons, tels que les boutons Ajouter au panier, d'autres, comme ceux permettant d'en savoir plus, fonctionnent mieux avec plus d'espace..

Il est important d'équilibrer la quantité d'espace négatif autour des boutons avec la taille des boutons eux-mêmes. C'est à propos de proportion. Vous voulez que votre bouton, l'espace autour de lui et le contenu qui l'entoure donnent l'impression qu'ils vont ensemble, même avec des disparités de taille. Vous devrez peut-être bricoler un peu les choses pour les faire paraître parfait.

Quelques lignes directrices:

• Assurez-vous qu'il y a suffisamment d'espace autour de votre bouton pour qu'il ne soit pas encombré
• Tenez compte de principes tels que la règle des tiers ou le nombre d'or lorsque vous déterminez l'espace à inclure.
• L'espace négatif donne à votre appel à la salle des boutons d'action de se démarquer de votre autre contenu et le distingue

Taille et couleur

La taille de votre appel aux boutons d’action est très importante. Un bouton trop gros va dominer tout ce qui se passe autour de lui. Un bouton trop petit se perdra dans la lecture aléatoire de tous les autres contenus d'une page. Vous voulez que votre bouton soit assez grand pour se démarquer sans surcharger le design.

La couleur peut être utilisée à bon escient pour aider à équilibrer la taille de vos boutons. Pour les gros boutons, choisissez une couleur moins visible dans votre conception (tout en rappelant l'arrière-plan). Pour un bouton plus petit, vous pouvez choisir une couleur plus vive et plus contrastée pour que le bouton saute vraiment. Dans les deux cas, assurez-vous que la couleur que vous utilisez sépare le bouton sans heurter la conception générale du site..

Quelques lignes directrices:

• Les boutons d’appel à l’action devraient idéalement être les plus gros boutons d’une page donnée.
• Utilisez des couleurs contrastantes pour faire ressortir davantage les boutons plus petits
• Utilisez des couleurs moins distinctes pour que les boutons surdimensionnés s'adaptent mieux
• Vous appelez les boutons d’action à attirer l’attention sans surcharger votre conception

La langue

Le libellé exact que vous choisissez d’utiliser pour votre appel à des boutons d’action peut avoir un effet considérable sur la conversion. Comparer “Acheter maintenant” avec “Ajouter au panier“. L'un est beaucoup plus urgent que l'autre. Ou que diriez-vous “Essayez-le gratuitement” avec “Essai gratuit“? L’un est beaucoup plus percutant que l’autre et se distingue davantage.

La langue que vous utilisez pour vos boutons d’appel à l’action doit être aussi simple et directe que possible. Vous voulez que les visiteurs sachent d'un simple coup d'œil exactement ce qu'ils obtiendront en cliquant sur un bouton. S'ils le remettent en question, cela signifie qu'ils ont fait une pause, ce qui peut entraîner une baisse des taux de conversion..

N'oubliez pas vos tailles de police, aussi. Le texte de votre bouton d'appel à l'action doit être large et gras, et adapté à la taille et à la couleur du bouton. Assurez-vous que le contraste est suffisant et que le texte est facile à lire.

Quelques lignes directrices:

• Utilisez un langage simple et direct
• Utilisez une grande police en gras sur le bouton pour le texte principal
• Assurez-vous que le langage appelle clairement une action spécifique

Créer une urgence

Vous souhaitez que les visiteurs de votre site effectuent les actions souhaitées avec le moins de réflexion possible. Même si vous ne voulez pas tromper vos visiteurs, plus vous leur donnez l'occasion de vous arrêter et de réfléchir à ce qu'ils font, plus vous leur donnez l'occasion de dire “non”.

Vous voulez que vos boutons leur donnent l'impression qu'ils doivent agir immédiatement. Vous voulez les encourager à prendre leur décision immédiatement, sur un coup de tête. Bien que cela ne fonctionne pas pour chaque bouton d'appel à l'action (en particulier ceux permettant d'acheter des articles coûteux), pour des actions gratuites ou à faible coût, il est souhaitable que les visiteurs cliquent sans trop y penser..

Quelques lignes directrices:

• Encouragez vos visiteurs à agir immédiatement
• Ne donnez à vos visiteurs aucune raison de faire une pause
• Bien que l'urgence soit importante, n'induisez jamais vos visiteurs en erreur.

Fournir des informations supplémentaires

Le cas échéant, utilisez les boutons d'appel à l'action pour donner aux visiteurs des informations supplémentaires sur ce qu'ils vont obtenir s'ils cliquent sur le bouton. Cela se voit le plus souvent avec les boutons d'essai ou les boutons de téléchargement. Des exemples courants d'informations supplémentaires incluent la durée d'une période d'essai gratuite ou la taille d'un téléchargement de fichier. Les informations de version sont aussi souvent vues.

Lorsque vous incluez des informations supplémentaires, n’oubliez pas que vous devez rester concentré sur l’appel à l’action. Assurez-vous que le texte incitant les visiteurs à agir est le plus important, les autres informations étant beaucoup moins visibles..

Quelques lignes directrices:

• Inclure des informations supplémentaires uniquement lorsque cela ajoute à l'expérience utilisateur
• Les informations supplémentaires ne sont appropriées que sur certains types d'appels aux boutons d'action, notamment les boutons de téléchargement ou d'essai.
• Assurez-vous que l'appel principal à l'action est toujours le texte le plus en évidence sur votre bouton.

Prioriser

Il est important de hiérarchiser les boutons d’appel aux actions de votre page s’il en existe plusieurs. Cela peut être fait de différentes manières, mais la plus courante consiste à utiliser des couleurs et des tailles.

Utilisez la couleur pour mettre en surbrillance le bouton le plus important sur une page ou pour rendre les moins importants moins visibles. Ou utilisez la taille pour faire ressortir le bouton le plus important (en le rendant plus grand) et en mettant moins l'accent sur les moins importants.

Icônes et images

L'inclusion de repères visuels dans vos boutons d'appel à l'action peut également contribuer à augmenter les taux de conversion. Une icône d'un panier sur un “ajouter au panier” bouton, par exemple, ou une flèche sur un bouton de téléchargement sont deux bons exemples. Pensez également aux icônes uniques à utiliser, mais assurez-vous que l'icône ajoute à l'expérience utilisateur en expliquant à quoi sert le bouton, sans créer de confusion..

Quelques lignes directrices:

• Assurez-vous que les icônes que vous utilisez aident à clarifier la signification de votre bouton, plutôt que de le confondre.
• Des icônes facilement identifiables peuvent immédiatement indiquer un sens à vos visiteurs
• N'ayez pas peur d'utiliser des icônes moins couramment utilisées, tant que leur signification est toujours claire

Exemples

Voici quelques-uns exemples de grands boutons d'appel à l'action. Bien qu'ils ne soient pas tous parfaitement conformes aux directives ci-dessus, ils remplissent suffisamment de critères pour être considérés comme excellents..

Direct - Différencier les boutons "acheter maintenant" (pour les options payantes) et "s'inscrire" (pour les options gratuites) est une bonne stratégie.

Windows 7 - Le grand bouton vert "Get Windows7" ​​est facile à repérer pour les visiteurs.

QG Fileshare - Le bouton vert clair se démarque vraiment ici du fond blanc.

Registre - L'utilisation de couleurs différentes pour les boutons "Télécharger" et "Acheter" les différencie et donne la priorité au bouton "Acheter".

TasteBook - Ce bouton utilise beaucoup les icônes et utilise un texte plus gros et gras pour se démarquer..

GoodBarry - Un autre bouton vert vif d'appel à l'action.

Lifetree Creative - Le maintien du même caractère de la copie de corps au bouton d’appel à l’action crée un sentiment de cohésion.

Le résumateur - Un bouton d'appel à l'action rouge vif avec des caractères gras se détache sur le fond bleu.

Bloc-notes - Un bon exemple d'inclusion d'informations supplémentaires dans un bouton d'appel à l'action.

Inkd - Un excellent exemple de la priorité des boutons avec la taille.

Thèmes élégants - Un autre excellent exemple d'utilisation de la couleur pour se démarquer sans se heurter aux éléments de design environnants.

ZenDesk - Un autre bon exemple de faire ressortir un bouton en utilisant la couleur.

Storenvy - Un bouton rond est inattendu et se démarque, surtout lorsqu'il est entouré d'une bordure blanche.

Bara'Mail - Parfois, un bouton qui se fond bien fonctionne mieux dans la conception globale de votre site, surtout lorsque l'action est moins urgente..

Plus de ressources

• Boutons d’appel à l’action: exemples et meilleures pratiques - de Smashing Magazine
• Bons boutons d'appel à l'action - de UX Booth
• Boutons d'appel à l'action: la taille importe-t-elle? - De Get Elastic
• 10 techniques pour une efficacité “Appel à l'action” - De Boagworld
• 5 astuces pour créer un bouton d'appel à l'action efficace - à partir de SitePoint