Comment rendre votre AB Test (vraiement !) responsive ?

Vous venez de vous servir votre 2ème Expresso Orgin Brazil lorsque votre téléphone sonne. A l’autre bout du fil votre ami Martin, membre illustre de l’équipe Merchandising a l’air contrarié :

Martin : « Ton test ne fonctionne pas ! On avait dit que le bouton ‘ajout au panier’ devait être uniquement visible uniquement sur mobile dans le menu et là je suis sous PC et je le vois ! Et c’est hyper moche, ça surcharge le menu ! »

Vous : « Bizarre j’avais pourtant bien recetté ce test sur tous les devices ; tu as modifié la taille de la fenêtre de ton browser ? »

Martin : « Maintenant que tu m’en parles oui : je me suis connecté avec une fenêtre réduite puis je l’ai agrandi pour pouvoir être plus à l’aise ! »

Vous : « Eh bien c’est pour ça ! Tu as été reconnu comme étant un utilisateur sur navigateur mobile lors du chargement de ta page ; et l’ab test est resté actif quand tu as modifié la taille de ton écran ! »

Martin : « … »

Vous : « D’ailleurs si tu recharges la page tu ne vas plus voir le bouton »

Martin : « …ah oui tu as raison… mais tu pourrais corriger ce point ? Ce serait quand même mieux qu’on ait un AB Test vraiment responsive ! Là ce que j’ai sous les yeux ça fait un peu désordre ! Si les UX s’en aperçoivent je ne donne pas cher de ta peau ! »

Le système de déclenchement des AB Test est au coeur de ce problème. Lorsque l’utilisateur charge une page, votre outil d’AB Testing va vérifier si les conditions à respecter sont réunies. 2 situations sont d’ailleurs possibles : votre outil peut vérifier une fois que les conditions sont réunies ou faire une boucle et « attendre » jusqu’à ce que les conditions soient réunies Article à venir à ce sujet.

Votre AB Test apparaît donc sur la page dès que les conditions définies sont remplies. Jusqu’ici tout vas bien.

Là où les choses se corsent : l’AB Test ne cessera pas d’apparaître dès que les conditions ne sont plus respectées. Il faudra attendre que l’utilisateur charge une nouvelle page pour que les conditions soient à nouveau évaluées et donc que l’AB Test ne soit plus visible. Ce qui peut tout particulièrement poser problème si votre site a des parcours en single page application, où l’utilisateur ne va pas recharger sa page.

Donc, si vous avez paramétré votre AB Test pour se déclencher sur une taille d’écran inférieure à 500px, l’ab test sera toujours visible pour un visiteur qui arrive sur votre site puis agrandis la fenêtre de son navigateur.

Pour contourner le problème, vous allez donc devoir gérer l’affichage de la fonction que vous ab testez (le fameux bouton « j’ajoute au panier » pour reprendre notre exemple). Votre bouton ne doit ainsi plus apparaître dès que l’utilisateur ne respecte plus les conditions souhaitées.

Pour cela vous pourrez vous servir des media query. Les médias query sont des instructions en css permettant de conditionner le style sur une page à une taille d’écran.

Pour rendre invisible un bouton dont l’id est abtest122 pour tous les devices de plus de 500px, vous pouvez donc utiliser le code CSS suivant (1) :

@media screen and (min-width: 500px) {
	#abtest122{
			display:none;
		}
}

A l’inverse, si vous souhaitez afficher une fonctionnalité sur plus grands écrans, vous allez pouvoir utiliser min-width. L’affichage de l’élément abtest122-1 nous donne ainsi (2) :

@media screen and (max-width: 500px) {
	#abtest122{
			display:none;
		}
}

Exemple ci-dessous avec 2 boutons utilisant ces codes (1) et (2)

Bouton Mobile

Bouton PC et Tablette

Mise en place dans l’outil

Les media query sont des requêtes css ; et comme l’ajout de requête de ce type n’est pas fréquent lors de la création d’AB Test, je vous met ici la marche à suivre.

Sous AB Tasty, il vous suffit pour les ajouter d’aller dans Variation editor > puis dans « Add CSS » pour chaque variation

Sous Kameleoon, même logique, vous avez la possibilité d’ajouter directement du css pour chaque variation

Pour aller plus loin…

Idéalement l’ensemble des composants avec lesquels vous interagissez doivent être responsive. Cela concerne donc les éléments que vous ajoutez avec l’ab test (on l’a vu) mais aussi ceux que vous cachez.

Pour mener à bien un AB Test responsive, vous ne devez donc pas supprimer d’élément mais le masquer via une Media Query. De cette manière, l’élément pourra redevenir visible si l’utilisateur modifie la taille de son navigateur et sort du périmètre de l’AB Test.

Étiquettes: