Utilisation des cartes thermiques dans la page de tarification

Commençons "Le test A/B du mois" par un test qui n'est pas A/B. Avant de vous enfuir vers un autre coin d'Internet, laissez-moi vous expliquer pourquoi nous allons commencer par les cartes thermiques.

L'une des principales causes de la non-utilisation régulière des tests A/B sur votre site Web est de ne pas savoir par où commencer : quels changements dois-je essayer, où et pourquoi ? Telles sont les principales questions que vous vous poserez. Si vous ne savez pas comment y répondre, vous abandonnerez les tests.

Pour surmonter cela, ce que je recommande, c'est que la première chose que vous fassiez est de choisir une page de votre site Web pour commencer. Cette page doit être pertinente par rapport à vos objectifs. Cela signifie qu'il s'agit d'une page où vous recevez de nombreuses visites, ou qu'il s'agit d'une page clé pour votre activité ou votre entreprise.

Dans l'exemple d'aujourd'hui, nous avons choisi de commencer par les pages de tarification de nos plugins premium : Nelio A/B Testing et Nelio Content. Ces pages sont essentielles à notre activité, car les revenus de notre entreprise passent par les deux.

Maintenant que nous avons choisi les pages, pour savoir quelles modifications apporter et pourquoi, mieux vaut commencer par faire un test de heatmap. Nous le faisons parce que les cartes thermiques nous fournissent des données réelles sur la façon dont nos visiteurs interagissent avec notre site Web.

Lorsque nous voyons vraiment comment nos pages fonctionnent avec de vraies données d'utilisateurs, il est beaucoup plus facile d'avoir des idées pour de futurs tests à exécuter. C'est pourquoi les heatmaps sont toujours un bon début.

Comment créer un test Heatmap dans WordPress

Créer un test de carte thermique pour une page WordPress est très simple. Il vous suffit de sélectionner la page choisie et de lancer le test.

Dans Nelio A/B Testing, créez un nouveau test de carte thermique en sélectionnant ce type de test dans la boîte de dialogue qui s'ouvre lorsque vous cliquez sur le bouton pour ajouter un nouveau test.

Sur l'écran d'édition de test, vous définissez un nom pour votre test afin qu'il soit facile à identifier plus tard. Vous pouvez également ajouter une description de ce que vous voulez essayer dans le test. Enfin, vous devez sélectionner la page sur laquelle vous souhaitez effectuer le test de carte thermique :

Lorsque vous avez tout prêt (comme vous le voyez dans la capture d'écran précédente, c'est très simple), cliquez sur le bouton dans le coin supérieur droit de la fenêtre pour lancer le test. Il vous suffit d'attendre que vos visiteurs viennent pour que Nelio A/B Testing collecte les données de leur comportement sur la page et traite les résultats.

Résultats de la carte thermique

Dans notre cas, nous avions deux tests de carte thermique exécutés en même temps sur notre site Web : un pour la page de tarification de Nelio A/B Testing et un autre pour la page de tarification de Nelio Content.

Chaque test recueille des données depuis environ 20 jours et a analysé le comportement d'environ 500 visiteurs. C'est plus que suffisant pour pouvoir tirer certaines conclusions et réfléchir aux futurs tests A/B que nous pourrons exécuter dans ces pages.

Gardez à l'esprit que ces pages ne sont pas celles qui enregistrent le plus de visites sur notre site Web. Ils constituent la dernière étape de l'entonnoir de conversion, d'où la perte de trafic en cours de route. Mais rappelez-vous que nous les avons choisis en raison de leur importance pour notre entreprise. Dans de futurs tests, nous étudierons d'autres pages avec plus de trafic, pour d'autres raisons que nous expliquerons.

Page de tarification de Nelio A/B Testing

Commençons par les résultats obtenus pour la page de tarification de Nelio A/B Testing. Le test heatmap nous montre les données sous trois angles différents : heatmap, scrollmap et confettis. Incorporer ici les 3 images complètes est un peu trop, car elles sont assez grandes en termes de hauteur en pixels. Pour éviter de vous forcer à faire défiler de haut en bas tout le chemin, je les ai juste liés ici :

• Heatmap de la page de tarification de Nelio A/B Testing.
• Scrollmap de la page de tarification de Nelio A/B Testing.
• Confetti de la page de tarification de Nelio A/B Testing.

Examinons maintenant les fragments les plus pertinents des résultats précédents :

Comme vous pouvez le voir dans l'image précédente, une heatmap est une représentation graphique qui montre l'interaction des utilisateurs avec les éléments de la page, de manière agrégée et avec une échelle de couleurs où une couleur chaude indique une grande pertinence.

Dans la page de tarification de Nelio A/B Testing, le premier pli de la page est l'endroit où il y a plus de points chauds. Si on l'analyse en détail, les éléments du plan de base et du plan professionnel deviennent plus pertinents que ceux de l'entreprise. Compte tenu de cela, nous pourrions peut-être réorganiser les plans de tarification pour afficher le plan d'entreprise en premier. Notez que nous avons l'habitude de lire de gauche à droite, donc montrer le plan le plus cher en premier sur la page de tarification peut être un bon changement à essayer dans un test A/B.

Un autre élément qui reçoit beaucoup d'interaction de l'utilisateur est le lien pour faire défiler vers le bas pour voir la comparaison détaillée des plans. C'est bien, car cela signifie qu'il y a un intérêt à voir plus de détails sur les plans.

Ce qu'il n'est pas si bon, c'est qu'il y a beaucoup d'interactions dans les éléments non cliquables. Vous pouvez le voir dans les confettis, qui sont la représentation graphique où vous pouvez voir tous les clics effectués par les visiteurs :

Dans l'ensemble du bloc de plans que vous pouvez voir dans la capture d'écran précédente, seuls les boutons qui apparaissent dans chaque plan sont des éléments sur lesquels il est possible de cliquer. Gardez à l'esprit que cliquer sur tout le reste n'a aucun effet. Notre interface actuelle génère de la confusion.

Les visiteurs cliquent sur les textes et les icônes des fonctionnalités de chaque plan, qui sont des éléments non cliquables. À partir de là, nous pouvons comprendre qu'ils essaient de trouver plus d'informations à ce sujet, mais à la place, nous avons ces informations plus bas sur la page.

Un autre test A/B que nous pourrions essayer ici consiste à modifier chacune des fonctionnalités des plans afin qu'ils aient un élément flottant qui apparaît lors du survol du texte et fournit des informations plus contextuelles au visiteur. Nous pourrions tester cette version avec une aide contextuelle par rapport à la version actuelle pour voir laquelle finit par générer le plus d'achats.

Les confettis nous donnent également des informations agrégées sur les visiteurs, extraites des clics qu'ils ont effectués. Nelio A/B Testing comprend plusieurs types de filtres pour mieux comprendre les différentes caractéristiques des visiteurs, comme vous pouvez le voir ici :

De ces filtres, nous avons extrait les données suivantes :

• Chrome et Firefox sont de loin les navigateurs les plus utilisés par nos visiteurs. Par conséquent, nous devons faire en sorte que le Web soit beau, au moins, dans ces navigateurs.
• La moitié des visiteurs de cette page viennent des États-Unis. Cela correspond à nos données de ventes.
• Les visiteurs nous visitent plus les 3 premiers jours de la semaine. Connaître ces informations peut être utile pour, par exemple, faire des offres les autres jours dans d'autres zones du web, et ainsi attirer du trafic les jours à faible trafic.
• Près de 100% des visiteurs accèdent à la page depuis un ordinateur de bureau ou un ordinateur portable. Nous avons à peine des visites à partir d'appareils mobiles. C'est quelque chose à étudier à l'avenir.
• Windows 10 et Mac OS X sont les systèmes d'exploitation à partir desquels les gens nous visitent. Cela correspond aux données précédentes, car nous n'avons aucun visiteur de systèmes d'exploitation pour appareils mobiles.
• Nous avons plus de visiteurs pendant la journée de travail (le test a été effectué dans le fuseau horaire de Chicago). Cela a du sens, puisque notre principal client vient des États-Unis.
• Les visites se font sur des écrans d'une largeur minimale supérieure à 1500 pixels. Un autre fait qui confirme que les visites proviennent d'ordinateurs de bureau ou d'ordinateurs portables.

Si vous consultez les versions complètes de la carte thermique et des confettis, vous verrez que toutes les autres sections de la page de tarification de Nelio A/B Testing sont moins pertinentes. Dans cet esprit, vérifions le scrollmap suivant :

Si vous vérifiez la carte de défilement complète, vous pouvez voir que très peu de visiteurs dépassent le premier pli de la page. Cela me fait penser que nous devrions peut-être opter pour une version beaucoup plus courte de la page de tarification de Nelio A/B Testing, en condensant les informations pertinentes au-dessus du pli.

Les sections après le premier pli de la page contiennent beaucoup de texte et les visiteurs ne le lisent pas. Moins de 20% viennent voir et interagir avec le tableau détaillé comparant les plans, que vous pouvez trouver en bas du web. Toutes ces données sont fournies par le scrollmap :

Tester avec des versions plus courtes de la page comprenant plus de sections visuelles peut aider à convaincre l'acheteur potentiel et obtenir une page de tarification beaucoup plus efficace et efficiente. C'est une autre idée de changement possible à essayer avec un test A/B.

Nous avons déjà quelques idées que nous pourrions tester à l'avenir, il est donc clair que les informations que nous fournissent les heatmaps sont très utiles pour obtenir des idées que nous pourrons ensuite appliquer dans les tests A/B.

Page de tarification du contenu Nelio

Comme pour la page de tarification de Nelio A/B Testing, vous avez ici les images complètes avec les résultats de la carte thermique pour la page de tarification de Nelio Content :

• Heatmap de la page de tarification de Nelio Content.
• Scrollmap de la page de tarification de Nelio Content.
• Confettis de la page de tarification de Nelio Content.

La page de tarification de Nelio Content est plus simple et plus courte que celle de Nelio A/B Testing. Entre autres raisons, cette page n'a qu'un seul plan, alors qu'avec Nelio A/B Testing, nous avions 3 plans différents.

Si vous regardez la carte thermique complète et que vous la comparez à celle de Nelio A/B Testing, vous verrez que dans ce cas, il y a plus de points chauds dans d'autres parties de la page, en plus du premier pli.

Dans l'image précédente, nous voyons que les boutons d'action dans le tableau comparant les plans ont une pertinence particulière. C'est bien, parce que nous les avons là pour cette raison. Cependant, notez que le plan Starter dans le tableau, qui n'est rien de plus que la version gratuite de Nelio Content, revêt une importance particulière.

Ici, la question est de savoir si nous devrions avoir un lien vers le répertoire des plugins WordPress dans notre page de tarification afin que les visiteurs puissent télécharger la version gratuite de Nelio Content ou non. Nous l'avons maintenant, mais la carte thermique montre que plusieurs visiteurs quittent probablement notre page de tarification pour opter pour la version gratuite.

Ce sujet est controversé et la source de longues discussions dans nos réunions. D'une part, garder le lien n'est pas bon car vous perdez une éventuelle vente directe à l'intérieur de la page de tarification. Mais même si les visiteurs quittent notre site, il se peut qu'essayer gratuitement Nelio Content soit une bonne chose. Les utilisateurs peuvent aimer l'outil et finir par l'acheter plus tard une fois qu'ils l'ont testé. Chez Nelio, nous en avons discuté plusieurs fois et je suppose qu'aujourd'hui ne sera pas la dernière fois que nous le ferons ?. Pour l'instant, le lien reste. Qu'est-ce que tu en penses?

On voit aussi que la vidéo attire beaucoup l'attention. Nous avons créé une vidéo très cool, et peut-être pourrions-nous la montrer plus tôt dans la page. Nous pourrions essayer ce changement avec un test A/B car la section après le premier pli n'est pas non plus très pertinente.

En revanche, on voit sur le scrollmap que la perte de visiteurs est moins brutale au fur et à mesure que l'on fait défiler la page. Cela confirme qu'une page de tarification plus courte peut mieux fonctionner si nous voulons que le visiteur voie le plus de contenu possible.

De plus, combiné avec la carte thermique précédente, nous voyons que les deux sections après le premier pli, qui parlent de fonctionnalités spécifiques et montrent les opinions des gens, peuvent nécessiter une refonte. Ce sont des sections avec trop de texte et qui n'attirent pas trop l'attention. On pourrait essayer une version alternative plus visuelle et directe.

En ce qui concerne le graphique des confettis de clics, il est intéressant de voir le nombre de clics incorrects effectués dans les zones non cliquables du premier pli de la page :

Même si la plupart de ces clics ne peuvent être évités (oui, supposons que les gens cliquent sur les zones latérales, en particulier sur la droite, lors du défilement), il y en a d'autres qui sont le résultat de visiteurs confus. C'est le cas des clics sur le numéro de prix mensuel que vous voyez dans la capture d'écran précédente. Ce prix n'est pas un élément cliquable ; vous devez cliquer sur le bouton orange à la place. Cependant, le numéro de prix annuel indiqué ci-dessous est un lien approprié.

Nous devons chercher une autre manière moins confuse de montrer les deux prix, avec une interaction égale pour les deux cas. Ceci est un autre test A/B que nous pourrions exécuter sur cette page.

Et maintenant?

Nous avons commencé sans avoir aucune idée des tests A/B que nous pouvions exécuter sur notre site Web. Nous avons vu que les cartes thermiques nous aident à trouver facilement des idées à tester dans les tests A/B sur nos pages. Une fois que nous avons ces idées de tests, nous devons les hiérarchiser en fonction de nos besoins.

N'oubliez pas que les changements dans le premier pli de la page sont plus rapides à tester puisque plus de personnes les verront et ainsi vous obtiendrez des résultats plus rapidement. Vous pouvez commencer à prioriser les tests A/B qui tentent de modifier cette partie de la page.

Et la leçon la plus importante ici est : une fois que vous avez commencé à tester, ne vous arrêtez pas. Après chaque itération du processus de test, vous apprendrez quelque chose de nouveau à la fois de votre site Web et de vos visiteurs.

Rendez-vous le mois prochain avec un autre type de test dans lequel nous analyserons les résultats réels. N'oubliez pas de me laisser un commentaire avec votre avis sur ce post et tout ce que j'ai expliqué ici. Sur quelle page de votre site exécuteriez-vous une carte thermique ?

Image sélectionnée par Steve Halama sur Unsplash.