Les bonnes pratiques pour organiser et designer les CTA en e-commerce

Le terme « call to action » (CTA) désignent les « boutons d’actions » présents sur un site internet ou une publicité. Dans le cadre d’un site ecommerce, ils jouent un rôle crucial dans la conversion (comme par exemple l’incontournable bouton d’ajout au panier). C’est en cliquant sur ces boutons que vos potentiels clients avancent dans le tunnel de conversion. Optimiser l’organisation et le design de vos CTA est la technique la plus simple pour améliorer rapidement le taux de conversion et les revenus de votre site ecommerce.

Quelles sont les bonnes pratiques ? Comment organiser vos CTA sur les pages d’atterrissage, les pages de recherche dans le catalogue, les pages produits et les pages de paiement ? On vous explique comment créer des CTA efficaces sur les différentes pages de votre site.

Pages d’atterrissage (landing pages)

Une page d’atterrissage, comme par exemple la page d’accueil, a deux objectifs : expliquer de manière claire et concise la proposition de valeur ET inciter les internautes à entrer dans le tunnel d’achat. Pour remplir ce deuxième objectif, vous devez travailler sur l’emplacement et le design du CTA principal. C’est en cliquant sur ce CTA que vos internautes entreront dans le tunnel de conversion.

Un CTA, pour être efficace, doit utiliser une couleur contrastant par rapport au reste de la page. Il faut choisir une couleur qui ressorte, de telle sorte que l’internaute n’ait pas à chercher une seule seconde le bouton. Dans l’idéal, le bouton ne doit être présent qu’une seule fois sur la page, pour ne pas créer de la confusion dans l’esprit de vos internautes. Vous devez autant que possible garder le même CTA sur vos différentes pages (même couleur, même police…) pour que l’internaute puisse le reconnaître tout de suite.

Dans la plupart des cas, en e-commerce, le bouton redirige vers une page de résultat qui permet à l’internaute de faire son choix parmi les produits que vous proposez. Soignez bien le wording du bouton. Il doit être aussi clair et direct que possible. Par exemple : « Acheter maintenant » ou « Rechercher ». Evitez les formules du type « En savoir plus ». Exemple (Homeaway) :

Dans l’exemple ci-dessus, le CTA ressort parfaitement sur la page. C’est l’élément qui attire l’attention du visiteur en premier. L’éditeur du site a choisi à dessein une couleur qui n’apparaît nul par ailleurs sur la page. Si, comme dans cet exemple, l’utilisateur doit remplir des paramètres de recherche (lieu, période, type de produit…), le CTA peut s’intégrer au module du moteur de recherche, mais cela ne doit pas nuire à sa visibilité. Assurez-vous qu’il ressort parfaitement.

Evitez de dupliquer les CTA sur la page

Il peut être très tentant d’intégrer le même CTA (le CTA principal) plusieurs fois sur la page, en pensant par là augmenter sa visibilité et le taux de clic. En fait, il en résulte un effet de confusion pour l’internaute, qui ne sait plus sur quel bouton cliquer, si ce sont des boutons identiques ou différents, etc. C’est donc absolument contre-productif. Cela complexifie votre page et sa compréhension par les internautes.

Découvrez 30 exemples de design ecommerce vraiment réussis.

Pages de recherche

Vos clients potentiels utilisent les pages de recherche pour naviguer à travers votre catalogue et trouver les produits qui répondent à leurs besoins / attentes. Une page de recherche réussie permet à l’internaute de voir rapidement les différents produits que vous proposez et délivre suffisamment d’informations pour qu’il puisse comparer les produits entre eux. Par définition, une page de recherche contient beaucoup de liens, et donc potentiellement beaucoup de CTA. Comment ne pas surcharger vos pages de recherche de CTA ?

Découvrez les clés pour améliorer le dispositif de filtres de votre catalogue produits.

Si vos pages de recherche affichent les visuels de vos produits, inutiles d’utiliser des CTA « Voir le produit » car l’internaute sait de lui-même qu’il peut accéder à la fiche produit en cliquant sur l’image. Après tout, Google n’affiche pas un CTA « Voir le site » au-dessus de chacun de ses résultats. Une page de recherche, on le voit avec l’exemple ci-dessous (Net-a-porter) peut très bien ne contenir aucun CTA :

Beaucoup de sites ecommerce utilisent un bouton « Ajouter au panier » sur les pages de recherche. Ces CTA sont-ils pertinents, ou est-ce qu’ils devraient uniquement être présents sur les pages produits ? Cela dépend. Vous devez vous poser deux questions :

• Est-ce que les produits que vous vendez sont des produits souvent achetés par les internautes ?
• Est-ce vos clients ont tendance à acheter plusieurs produits d’un seul coup ?

Si la réponse à ces deux questions est « oui », alors oui, intégrer un CTA « Ajouter au panier » sur vos pages de recherche est pertinent. Les sites ecommerce des marques de grande distribution  (exemple : Auchan Drive) ont raison d’intégrer ces CTA. En revanche, ce serait une erreur de le faire sur le site d’une marque de luxe par exemple.

Voici 6 conseils pour optimiser votre tunnel de conversion ecommerce.

Pages produits

Une page produit doit remplir plusieurs critères et objectifs :

• Présenter le produit sous son meilleur jour (via notamment des visuels HD, voire de la vidéo).
• Expliquer les fonctionnalités et caractéristiques du produit.
• Rassurer l’internaute, via les avis-clients et les autres éléments de réassurance. Sur ce sujet, découvrez nos 7 conseils pour améliorer la réassurance de son site ecommerce.
• Faciliter le processus de paiement. Il ne faut pas que l’internaute se demande comment faire pour acheter le produit.

Le CTA principal, sur une page produit, concerne le dernier objectif : faciliter le processus de paiement. Sur quasiment tous les sites ecommerce, c’est le bouton « Ajouter au panier » qui remplit ce rôle. Exemple (Jules) :

Dans cet exemple, le CTA est particulièrement visible. Encore une fois, c’est le choix d’une couleur très contrastante qui permet cette visibilité. Remarquez la présence d’un CTA secondaire, situé sous le CTA principal. Quand vous avez deux CTA, l’enjeu est de ne pas créer de la confusion chez l’internaute. Il ne faut pas non plus que le CTA principal perde en visibilité à cause du CTA secondaire. C’est votre CTA principal qui doit ressortir le plus. Pour cela, utilisez une couleur plus fade, plus terne pour le CTA secondaire.

Découvrez 15 exemples de fiches produits réussies.

Même s’il faut que l’internaute choisisse les options du produit (la taille, la couleur…) avant de pouvoir cliquer sur le bouton, ne grisez /désactivez jamais le CTA principal. Sinon, certains internautes croiront que le produit n’est pas disponible. Utilisez un système de pop-up pour inviter les internautes qui ont cliqué sur le bouton sans avoir choisi leurs options à le faire. Si votre produit est en rupture de stock, il peut être pertinent d’utiliser un CTA qui redirige vers un formulaire de contact qui permettra à l’internaute d’être notifié lorsque le produit sera à nouveau disponible.

Sur les CTA secondaires

Même si l’internaute qui arrive sur une page produit aime le produit, il n’est pas toujours prêt à acheter. Le tunnel d’achat peut dans ce cas conduire à une impasse. C’est particulièrement vrai lorsqu’il s’agit de produits onéreux. Les internautes préfèrent prendre le temps de la réflexion et en discuter avec des personnes de leur entourage avant d’acheter.

Plutôt que de laisser à l’internaute le choix entre acheter ou quitter le site, il peut être pertinent de proposer un CTA secondaire. Par exemple un bouton « Ajouter à la wish list », qui vous permettra de récupérer le mail de la personne et de la relancer le moment venu (c’est ce que fait Leroy Merlin par exemple). Ou bien le CTA « Poser une question » : si l’internaute a des doutes ou des interrogations sur le produit, ce CTA lui permet de lui apporter une réponse et d’améliorer de votre côté la conversion de votre site.

Si vous faites le choix de proposer un CTA secondaire, pensez à respecter les conseils listés dans le paragraphe précédent. Il ne faut pas que le CTA secondaire fasse de l’ombre au CTA principal.

Découvrez comment utiliser les témoignages clients pour booster la conversion d’un site e-commerce.

Pages de paiement

Les pages de paiement sont celles sur lesquelles l’internaute est invité à renseigner ses informations personnelles et ses informations de paiement afin de finaliser sa commande. Ce sont essentiellement des pages de formulaire.

Dans cette ligne droite, les CTA ont une grande importance car l’internaute doit nécessairement cliquer sur eux pour finaliser sa commande. Si vous utilisez un formulaire en plusieurs étapes, vos CTA doivent avoir la même apparence sur toutes les pages. Si vous utilisez le mot « Suivant » sur les deux premières pages, vous devez utiliser ce même mot sur la troisième page. Evitez de singulariser les CTA, en utilisant par exemple « Continuer vers l’étape « Livraison », « Continuer vers l’étape « Paiement ». La meilleure solution est d’utiliser toujours exactement le même CTA, et de le positionner à la même place sur toutes les pages. Cela permet à l’internaute d’agir de manière instinctive, sans avoir à lire le texte du bouton. Evidemment, il y a une exception sur le dernier bouton qui permet de finaliser la commande. Ce dernier bouton doit se différencier des CTA des pages précédentes (wording et éventuellement forme et couleur différents).

Pour résumer : vous devez choisir avec soin le texte à afficher sur les CTA, pour que vos boutons soient le plus clair possible pour vos internautes. Les CTA doivent décrire précisément ce qu’il se produira si l’internaute clique dessus. Nous vous recommandons de n’utiliser qu’un seul CTA principal par page – sauf sur les pages de recherche, qui peuvent contenir plusieurs liens. Enfin, choisissez bien les couleurs de vos boutons, et veillez à ce qu’ils aient des dimensions suffisantes pour être bien visibles. En appliquant ces bonnes pratiques, vous devriez constater rapidement une amélioration de votre taux de conversion ecommerce. Pour poursuivre votre réflexion, nous vous conseillons la lecture de cet article.