ZZZ sous Zpip

Fil — 2009-11-13T23:16:11Z

Le squelette Zpip, qui vient de sortir sur SPIP-Contrib, est une nouvelle manière de concevoir un site sous SPIP.

La présentation de ce site, réalisée par Baroug, était essentiellement une feuille de style pour la « dist » de SPIP. Je viens de le transformer en un thème pour Zpip, le nouveau squelette proposé par Cédric et Marcimat pour remplacer la « dist ».

Qu'est-ce que ça change ? On avait déjà pris l'habitude de séparer, dans une même page Web, la structure de la page (son arbre HTML) de sa présentation (sa CSS). Zpip ajoute un étage à cette fusée en séparant la structure de la page (son « layout »), de sa fonctionnalité.

Ainsi par exemple, une « page article » a pour fonctionnalité d'« afficher un article ». Avec Zpip, elle ne fait que cela. Le « layout » (quel terme affreux) se chargeant de préciser où doit aller cette fonctionnalité dans l'arbre HTML.

La différence n'est pas censée être visible dans le rendu, qui reste, dans le cas de ce site, le même au pixel près. Mais dans la manière dont le code est composé.

Observons la page avec toutes ses inclusions, en ajoutant ?var_mode=inclure dans l'adresse.

Avec Zpip le sommaire ressemble à ceci :


Les inclusions de Zpip

Avec l'ancien squelette (dist), il ressemblait à cela :


Les inclusions de la dist

Quoi de neuf, au final ? Rien. Sauf que désormais pour ajouter un nouveau type de page, il suffit de se concentrer sur sa fonctionnalité (son « applicatif »), et l'on est sûr qu'il s'intégrera sans aucune adaptation à tous les layouts de Zpip.

Ce qui permet donc de développer cet applicatif indépendamment de toute considération de présentation. On pourra alors plus facilement partager un même développement d'un site à l'autre ; et on n'a plus le souci de mettre à jour 50 squelettes le jour où l'on décide de modifier la structure du site.

Dernier bonus, et non des moindres : il devient très facile de prendre un gabarit (HTML) et une décoration (CSS) existants — il en existe des milliers sur le net —, et de les appliquer à son site sans devoir encoder chaque applicatif (la page sommaire, la page article, la page rubrique, la page de login, etc.). Zpip est livré d'ailleurs avec un gestionnaire de thèmes, nommé Zen Garden, qui permet de visualiser instantanément son site sous différentes peaux.


Le thème BluePigment: design de styleshout, adapté pour Zpip par Cédric


Le thème Keep It Simple: design de styleshout, adapté pour Zpip par Cédric


Le thème FreshMedia: design de styleshout, adapté pour Zpip par Cédric

Tests A/B

Fil — 2009-10-27T08:52:42Z

Les tests A/B (aussi appelés split tests) sont une méthode d'aide à la mise au point d'une interface (par exemple, pour un site Internet) en comparant les usages réels. Voici un plugin SPIP destiné à ces tests.

Le principe des tests A/B est simple : on scinde les visiteurs en deux cohortes (d'où le nom A/B), et on leur donne à voir des pages différentes. On suit alors le parcours des deux cohortes, et on regarde laquelle des deux donne le meilleur résultat par rapport à un objectif donné.

Pour télécharger le plugin, il faut utiliser SVN et lancer la commande
svn co svn://zone.spip.org/spip-zone/_plugins_/ab_testing/

Ce plugin SPIP permet de définir deux dossiers de squelettes AB0/ et AB1/, qui seront affectés respectivement à la cohorte 0 et à la cohorte 1. Il monitore alors le parcours de ces deux cohortes sur une liste d'URLs, et permet de déduire le « taux de conversion » qu'apporte chaque squelette.

Par exemple, supposons que l'on souhaite placer sur la page d'accueil (URL = /) un bouton « Inscrivez-vous », mais qu'on hésite à mettre ce bouton en lien texte, ou en image. On va créer le test A/B de la façon suivante :

1. Dans sommaire.html, ajouter :
#INCLUDE{fond=bouton-inscrivez}

2. Dans AB0/bouton-inscrivez.html, on indique :

3. Dans AB1/bouton-inscrivez.html, on indique :
Inscrivez-vous

4. Dans le CFG du plugin A/B testing, indiquer qu'on veut monitorer les deux URLs :

Désormais la cohorte 0 voit l'image (squelettes AB0/), et la cohorte 1 voit le lien texte (squelettes AB1/).

Ensuite, on attend... jusqu'à observer au minimum quelques centaines de visites.

Après quelque temps, la page exec=ab_testing affiche alors :

Cohorte 0

URI	hits	%
/	1489	100%
/Inscrivez-vous.html	32	2.1%

Cohorte 1

URI	hits	%
/	1067	100%
/Inscrivez-vous.html	45	4.2%

Si l'on regarde le total, on voit que sur 1489+1067=2556 visiteurs de la page d'accueil, 45+32=77 sont allés sur la page d'inscription. Soit un ratio de 3%. Mais ceux de la cohorte 0 ont un ratio de 32/1489 = 2,1%, tandis que ceux de la cohorte 1 ont un ratio de 45/1067 = 4,2%.

On en déduit donc que le lien texte (présenté à la cohorte 1) est deux fois plus affordant au clic que l'image (présentée à la cohorte 0). On peut alors décider de mettre le lien texte pour tous... ou encore d'embaucher un graphiste pour améliorer l'image.

Spécificités du plugin

Ce plugin ne pose pas de cookie au visiteur : cela permet de faire notre test de manière totalement non intrusive. Les cohortes sont séparées par leur IP, avec une méthode d'affectation (très basique) de la cohorte en fonction de l'IP du visiteur, qui produit des cohortes de taille équivalente.

On peut faire du A/B/Z testing en augmentant le nombre de cohortes, fixé par la configuration (par défaut, n=2).

Le cache est multiplié par le nombre de cohortes.

On peut tester une variante d'un squelette présent dans un plugin, en plaçant une seule variante dans AB1/ (AB0/ restant vide).

Cependant pour des raisons techniques, il est impossible de tester ainsi une variante d'un squelette se trouvant déjà dans le dossier squelettes/ : pour le tester, il faut le recopier dans AB0/ et AB1/, et le supprimer temporairement de squelettes/. Ne pas oublier de le remettre avant de désactiver le plugin.

En cas de doute, vérifier avec le débugueur de SPIP si les squelettes testés sont bien pris dans les répertoires ABx/

Limitations et extensions possibles

Actuellement le découpage des visiteurs se fait en deux cohortes de tailles à peu près égales. Si l'on souhaite mener un test sur seulement 10% des visiteurs, il faut adapter un peu la ligne :
_ $ab = intval($ab)%intval($n);

Dans notre exemple, le système ne vérifie pas que le visiteur est passé par la page d'accueil avant d'aller sur la page Inscrivez-vous.html ; la page d'accueil sert en fait plus de variable de contrôle — pour savoir si les numéros IP sont bien répartis dans les cohortes — que de base pour le CTR 100%. (Il est possible de changer cela, en posant un cookie au visiteur, au risque toutefois d'alourdir le processus.)