Comment analyser les heatmaps et créer des tests A / B avec Crazy Egg –

Il était une fois, avoir une entreprise en ligne, c'était juste avoir un site web. Mais maintenant, les entreprises en ligne prennent de l'ampleur, évoluent plus vite et deviennent de plus en plus complexes de jour en jour. Ce qui était autrefois une façon de dire "c'est ce que nous sommes et c'est ce que nous faisons", est maintenant une opportunité pour une variété de modèles d'affaires différents – abonnements, services, produits et ainsi de suite.

Pour atteindre ces conversions, vous devez utiliser les bons outils pour votre entreprise – des outils qui vous permettent d'identifier les points faibles de votre site Web en termes d'UX, puis de les corriger avec une solution viable. Les outils de test Heatmap et A / B sont essentiels pour cela, et ils vous aident à comprendre vos utilisateurs, à développer votre activité et à améliorer l'UX.

What Heatmaps?

Heatmaps raconte une histoire de votre site Web. Un heatmap suivra l'activité des utilisateurs sur votre site de la même manière que Google Analytics, mais il se concentrera sur le déplacement de vos visiteurs à travers leurs clics de souris et leur activité de défilement via l'enregistrement d'écran. Où Google Analytics peut vous dire ce qui se passe, les heatmaps peuvent vous montrer pourquoi

Qu'est-ce que le test A / B?

Les outils de test A / B vous permettent d'essayer différentes variantes de votre site web ( ou même des éléments individuels), pour voir qui convertit le mieux. Alors que les heatmaps peuvent identifier où et pourquoi les utilisateurs deviennent confus, le test A / B peut alors vous aider à jouer avec certaines solutions. C'est pourquoi avoir ces deux fonctionnalités dans une seule application est une idée gagnante. Entrez Crazy Egg .

Démarrer avec Crazy Egg

Une fois que vous avez créé votre compte Crazy Egg cliquez ici pour obtenir votre code de suivi. . Ce code de suivi enregistre l'activité de vos utilisateurs et représente ces données avec des analyses, des heatmaps et des enregistrements d'écran. L'extrait JavaScript que Crazy Egg crée pour vous doit être inséré dans la section du code de votre site Web. Après cela, nous pouvons lire les données

Les trois différents types de cartes thermiques

Crazy Egg crée trois types différents de heatmaps.

Vous pouvez trouver ces cartes en cliquant sur Snapshots du

Clickmaps (alias Confetti)

Clickmaps est le type de heatmap qui vous montrera les zones d'une page web qui sont cliquées. Cela peut indiquer un problème avec votre CTA, ce qui n'est évidemment pas souhaitable, mais il indique également des zones de votre interface utilisateur (telles que les catégories) qui intéressent les utilisateurs, à votre grande surprise.

Considérez ce scénario également: l'utilisateur essaie de cliquer sur une image ( supposons qu'il s'agit d'une photo de produit ), s'attendant à ce qu'il agrandisse / agrandisse. À partir de ce comportement, vous pouvez décider d'implémenter le zoom d'image.

Vous pouvez associer ces clics avec des métriques telles que Time to Click . ] Hovermaps (aka Heatmaps)

Hovermaps mieux connu sous le nom de heatmaps, identifie les zones de l'écran que les utilisateurs survolent le plus avec leur curseur actuel. Les heatmaps vous aideront à comprendre les zones les plus intéressantes pour les utilisateurs, en soulignant leur intention, même s'ils n'ont pas cliqué dans cette zone. Par exemple, disons que les utilisateurs survolent votre navigation et attendent un troisième niveau (par ex. Mens → Smart → Shirts où Shirts est le niveau qui manque), mais ils ne cliquent pas puisque votre navigation n'a que deux niveaux. Vous pouvez ensuite apporter des modifications en fonction de ces informations.

Vous pouvez également constater que les utilisateurs naviguent entre deux modèles de tarification, ce qui indique qu'un coût «quelque part au milieu» pourrait être plus approprié.

Scrollmaps

Scrollmaps vous montrera dans quelle mesure vos visiteurs font défiler une page Web, et dans quelles sections ils passent le plus clair de leur temps.

Scrollmaps affichera ceci avec Popularité et Impressions . Cela peut vous aider à affiner votre catalogue sur votre site de commerce électronique ou à réorganiser les sections de votre page de destination en fonction des sections sur lesquelles l'utilisateur fait défiler. Il se pourrait que le contenu le plus précieux soit coulé au fond, tandis que le contenu au-dessus de la ligne de flottaison n'obtient pas autant d'attention que vous le pensiez. Les sections «chaudes» seront plus chaudes (rouge / orange), tandis que les sections moins importantes seront plus froides (bleu / vert). D'une manière générale, vous ne voulez pas que l'utilisateur fasse défiler pour trouver votre meilleur contenu!

Enregistrements: Heatmaps pour des utilisateurs spécifiques

Pouvez-vous zoomer sur des utilisateurs spécifiques? Oui.

Une fois que le code de suivi a été diffusé pendant 30 minutes, et en supposant que vous ayez eu des visiteurs sur ce site, accédez à Enregistrements dans la barre latérale pour voir toutes les versions enregistrées de vos utilisateurs. comportement sur le site. De là, vous pouvez voir les confettis, heatmap et scrollmap d'un utilisateur spécifique. Crazy Egg enregistrera la session de chaque utilisateur par défaut.

Test A / B: Essayer des solutions

Que se passe-t-il lorsque nous avons identifié des sujets de préoccupation? Passons-nous à un outil qui nous permet de tester des solutions possibles? Nan. Crazy Egg nous permet également de créer des tests A / B! Disons que votre confetti / clickmap indique que deux catégories sont cliquées sur plus que toutes les autres catégories, et nous voulons tester si le déplacement de ces catégories au début de la navigation aide à augmenter les conversions. Avec le test A / B, nous pouvons le faire.

Dans la barre latérale, cliquez sur Editor . L'éditeur visuel nous permet de créer des variations depuis Crazy Egg, sans code requis

Cliquez sur le bouton Faites votre premier montage maintenant sélectionnez le site Web que vous souhaitez modifier, puis cliquez sur l'appareil que vous souhaitez expérimenter. Votre site Web va maintenant apparaître. Cliquez sur un élément et, dans la liste déroulante qui apparaît, choisissez les aspects de l'élément que vous voulez modifier

Une fois l'édition terminée, cliquez sur le bouton Publier mes modifications dans le coin inférieur droit, et ces modifications seront ensuite mises en ligne sur une variante d'URL (par exemple: http://www.example.com/?variant=1 ). Avec la segmentation de Google Analytics vous pouvez ensuite déterminer laquelle des variantes est la plus utile pour convertir les utilisateurs (vous pouvez créer autant de variantes que vous le souhaitez), puis prendre la décision d'appliquer cette variation de manière permanente. Vous pouvez également utiliser les snapshots (confetti, heatmaps, scrollmaps) pour analyser le résultat de l'expérience

WallMonkeys: une étude de cas d'oeufs fous

Bon, voici un exemple de test A / B dans la vraie vie – comment WallMonkeys ont augmenté leur taux de conversion de 550% avec des heatmaps et des tests A / B.

WallMonkeys savait que le premier "message" et l'expérience visuelle auraient le plus grand impact sur leur taux de conversion. Ils ont fait des recherches sur le comportement des utilisateurs et la psychologie UX, et ont essayé de corréler les résultats avec la façon dont les utilisateurs agissaient sur leur site Web (comme représenté par les heatmaps et scrollmaps dans Crazy Egg). Puis ils ont commencé à tester A / B diverses choses, un changement à la fois. (Faire plusieurs changements à la fois ne fera que vous demander quel changement a eu un effet sur les conversions.)

Au total, il y avait trois tests A / B. Au cours de tous les tests A / B, ils ont supprimé le curseur sur lequel personne ne cliquait (ou ne s'y intéressaient) et ont rendu l'image principale plus "amusante". Le menu et la barre de recherche étaient également plus visibles, car Wallmonkeys suspectait que les utilisateurs recherchaient vraiment leur objet.

Variation originale

Variation n ° 1: ** Hausse de 27% des revenus

Variation n ° 2: augmentation de 550%

Conclusion

Crazy Egg peut vous aider à révéler les sections les moins performantes de votre site Web via des clickmaps, des heatmaps et des scrollmaps, puis vous pouvez exécuter divers / B tests comme un acte d'amélioration continue UX. Si l'étude de cas WallMonkeys nous a montré quelque chose, c'est qu'il y a toujours de la place pour l'amélioration, et que cette amélioration ne peut pas arriver tout à la fois.

Crazy Egg a les caractéristiques pour vous aider à identifier les mauvaises expériences. Puis confirmez comment l'UX devrait vraiment être.

Consultant en commerce électronique et fondateur de Digital Develop, un e-commerce créatif agence aidant les entreprises de commerce électronique avec des solutions axées sur la conversion. Également fondateur de Checkoutify, un système de récupération des caisses abandonné.