Tests fractionnés avec des feuilles de style CSS

Le moyen le plus rapide de fractionner de manière significative le test d'un site Web consiste à apporter des modifications audacieuses à la feuille de style en cascade (CSS) dans le cadre d'une expérience à l'échelle du site.

Pourquoi les feuilles de style CSS sont importantes

Le fichier CSS principal d'un site Web est un point de référence central qui contrôle les styles, les positions et les comportements communs de tous les éléments sur chaque page Web.

Dans le fichier CSS principal se trouvent les paramètres de toutes les polices, marges, couleurs, alignements et bien plus encore. C'est le fichier le plus important sur la plupart des sites Web modélisés et peut changer radicalement l'apparence d'un site Web avec juste une petite modification.

Tests fractionnés à l'échelle du site que vous devriez effectuer à chaque fois

Il existe de nombreux éléments communs sur un site Web qui jouent un rôle important dans la facilité de lecture, d'utilisation, de navigation, de mise en évidence des appels à l'action et d'affichage de toutes les informations clés.

Lorsqu'un utilisateur décide de prendre contact ou peut-être d'effectuer un achat sur un site Web, l'un des éléments ci-dessus peut être un facteur décisif pour arrêter cette conversion. Vous trouverez ci-dessous quelques considérations clés pour les éléments à l'échelle du site :

Boutons d'appel à l'action

Toutes les conversions en ligne commencent par un bouton, un lien ou un widget d'appel à l'action (CTA). La taille, la couleur, la formulation et même la position de ces CTA font une grande différence dans les taux de conversion. Certaines couleurs des boutons CTA, par exemple, peuvent trop se fondre dans l'arrière-plan ou peuvent inconsciemment dissuader l'utilisateur de cliquer dessus, selon ce qu'il perçoit comme une couleur négative. Le texte utilisé sur les liens et les boutons fait également la différence. Par exemple, le simple fait de changer le bouton « ENVOYER » d'un formulaire pour dire « ENVOYER » donne de meilleurs résultats car « soumettre » est perçu comme un mot puissant. Vous pouvez en savoir plus à ce sujet dans le guide ultime des CTA ici sur VWO.com.

Taille de police

Cet élément rarement testé joue un grand rôle dans l'accessibilité pour de nombreux utilisateurs. Les polices sont souvent trop petites pour que certains utilisateurs puissent les lire, ils devront donc peut-être utiliser la fonction de zoom s'ils la connaissent bien, mais ce n'est pas toujours possible, ou facile, sur les appareils mobiles. Des tailles de police trop grandes peuvent également être préjudiciables car elles peuvent ralentir la vitesse de lecture, en particulier sur les versions de sites Web adaptées aux mobiles. En savoir plus sur la science derrière les tailles de police ici sur imarc.com.

Type de police

Encore une fois, le style de police est rarement testé sur de nombreux sites Web, il semble être décidé lors de la phase de conception initiale du développement, puis oublié sur de nombreux sites Web. Différents styles de police ont différents niveaux de lisibilité. De plus, certaines polices ne sont disponibles que sur certains appareils et certaines s'affichent très mal sur certains appareils à certaines tailles sans la pixellisation des polices. Vous pouvez utiliser une famille de polices pour utiliser une série de polices, en commençant par votre préférée et en passant par des polices plus simples, telles que Arial, qui sont toujours présentes sur chaque appareil De nouvelles polices peuvent être incluses sur un site Web via JavaScript ou un service tel que Polices Google. Vous pouvez en savoir plus dans cet article sur TypeWolf.com sur les dix meilleures polices Web de 2016.

Le style de police

Les styles de police tels que la hauteur de ligne, le soulignement, le gras, la couleur et les marges affectent également l'accessibilité et la lisibilité. Les liens sont plus susceptibles d'être cliqués lorsqu'ils sont bleus et soulignés, ce qui a été méticuleusement testé par Google et eBay au fil des ans, Google testant même les liens noirs en 2016. Si les liens ne ressortent pas clairement comme des liens sur votre site Web , alors ils doivent être testés et vous constaterez qu'ils montrent souvent un plus grand engagement après avoir été modifiés.

Couleurs d'arrière-plan

Souvent, les sites Web sont créés sur un fond blanc, mais si vous regardez votre site Web d'actualités ou votre plate-forme de médias sociaux préféré, il s'agit souvent d'une légère nuance de bleu ou de gris. Les couleurs d'arrière-plan peuvent aider certaines zones de la page Web à se démarquer, comme une zone d'information ou une bannière d'offre spéciale. De plus, la couleur d'arrière-plan peut renforcer la marque ou le type de produit affiché et cette corrélation améliore les taux de conversion, car le contenu semble plus pertinent. Apprenez-en plus sur la psychologie des couleurs pour les sites Web dans cet article sur Jimdo.com et voyez comment des couleurs telles que l'orange signifient une bonne affaire (pensez à Amazon) et le bleu signifie la neutralité et la technologie (pensez à Facebook ou Twitter).

Repositionner ou masquer des éléments

Le fichier CSS contrôle les marges et le remplissage de tous les éléments communs sur les pages Web et vous permet également de supprimer complètement certains éléments à l'aide de la commande « display : none ». Vous pouvez utiliser cela en essayant de réduire l'espace gaspillé verticalement, en supprimant les informations inutiles, en modifiant l'espacement entre les CTA importants ou en expérimentant la suppression de certains blocs de contenu. Parfois, moins c'est mieux sur les pages Web (le principe du garder-le-simple-stupide) et c'est une bonne pratique de voir combien peut être retiré d'une page Web tout en améliorant le taux de conversion.

Plates-formes pour le test fractionné des fichiers CSS à l'échelle du site

Il est vraiment important de garder les modèles sur un site Web cohérents pour chaque utilisateur individuel lorsqu'il passe d'une page à l'autre. Cela pourrait être préjudiciable (et certainement une mauvaise expérience) si une seule page était fractionnée A/B testée tandis que les autres restaient les mêmes.

Un logiciel de test fractionné spécial est nécessaire pour que les modifications du fichier CSS soient cohérentes d'une page à l'autre pour chaque utilisateur individuel. Malheureusement, les « tests de contenu » gratuits de Google Analytics ne prennent pas en charge ces types de test fractionné. Voici quelques outils que vous pourriez vouloir utiliser :

• Optimiseur de site Web visuel (VWO) - vwo.com - Nous avons trouvé que c'était le logiciel de test fractionné le plus simple à mettre en œuvre. Il gère tous les types de tests fractionnés sur HTML, CSS ou JavaScript et génère également des cartes thermiques utilisateur si nécessaire. Les structures de prix peuvent être trouvées ici
• Optimizely – Optimizely.com – Cela gère également tous les types de tests fractionnés sur HTML, CSS ou JavaScript et peut effectuer des tests fractionnés très avancés si nécessaire. Les informations sur les prix peuvent être trouvées ici

Conclusion

La configuration d'un test fractionné CSS à l'échelle du site est simple et efficace, mais vous aurez peut-être besoin de l'aide d'un développeur pendant 15 minutes si vous n'êtes pas familier avec CSS.

Une fois que le site Web a les bonnes polices, styles et CTA, vous pouvez alors vous concentrer sur les pages de destination clés du site Web et sur d'autres éléments plus spécialisés. Cela augmente les taux de conversion et rend le site Web beaucoup plus efficace sans aucun trafic supplémentaire requis.

Si vous avez besoin d'aide avec votre n'hésitez pas à nous contacter.