Quelqu’un est sur le canapé, téléphone en main, et fait défiler un article. Entre deux paragraphes apparaît un sac à dos orange sous un film gris, avec une petite main qui s’agite dessus. Il glisse le pouce. Le film s’efface, le vrai produit apparaît, puis un bouton.
Cela a pris environ quatre secondes. Faire en sorte que ces quatre secondes paraissent naturelles sur tous les téléphones a demandé beaucoup plus. Voici ce qui se passe à l’intérieur d’une pub jouable, du premier octet au dernier tap.
La scène au cœur de cet article : un téléphone, un pouce, et quatre secondes pour tout réussir.
Un seul canevas, pas vingt mises en page
La première décision est la moins spectaculaire et la plus importante : chaque création est conçue sur un unique canevas de 320 × 480.
Il est tentant de dessiner une mise en page par écran. En pratique, cela multiplie le travail et les bugs. Un canevas fixe permet au designer de maîtriser chaque pixel, les animations ne dérivent jamais et la recette teste une seule composition au lieu d’une dizaine.
Le canevas est ensuite mis à l’échelle dans l’espace disponible, avec une seule règle : on regarde combien de fois il tient en largeur et combien de fois il tient en hauteur, et on garde le plus petit des deux. La création tient ainsi toujours, quel que soit le côté le plus contraint. Sur un téléphone en portrait, c’est la largeur qui décide. Sur un ordinateur ou un téléphone à l’horizontale, c’est la hauteur. L’espace restant devient un fond neutre.
Un détail compte beaucoup. L’échelle doit être recalculée dès que l’espace change, et sur mobile cela arrive bien plus souvent qu’on ne le pense. Tourner le téléphone est le cas évident. Le moins évident, c’est la barre d’adresse du navigateur qui se rétracte pendant le défilement et modifie la hauteur de l’écran. La création surveille son propre cadre et se réajuste dès qu’il change de taille.
Une création trop haute de deux pixels est rognée. Une création rognée a l’air cassée. L’ajustement n’est pas un bonus.
Le poids est une fonctionnalité
Une publicité est en concurrence avec la page qui l’entoure. Si elle charge lentement, le lecteur est déjà passé. Si elle est lourde, elle grève le budget performance de l’éditeur et personne ne veut la diffuser.
Le budget vient donc en premier, et le design s’y adapte :
- Deux images, pas vingt. Le ticket à gratter n’a besoin que de deux visuels : le produit sous son film et le produit révélé. Le cadre, le bouton et la mise en page sont en CSS.
- Aucun framework d’interface. La logique d’interaction est en JavaScript natif. Une petite bibliothèque d’animation anime l’indice, et c’est la seule dépendance.
- D’abord l’affiche, ensuite le mouvement. La première chose affichée est une image fixe. Les ressources plus lourdes, comme les boucles vidéo, ne se chargent qu’une fois la publicité réellement visible.
C’est aussi l’esprit des recommandations de l’IAB : un chargement initial léger, le reste en différé, et jamais de son sans un tap.
Pourquoi ne rien se passe-t-il tant que personne ne regarde ?
Une page peut facilement contenir dix créations, et la plupart sont hors écran la plupart du temps. Toutes les animer viderait la batterie et ferait saccader le défilement.
La solution consiste à laisser le navigateur nous dire quand quelque chose mérite de tourner. Il sait signaler quand un élément entre ou sort de l’écran, sans que la page ait à vérifier en permanence. Dès que 40 % de la création est à l’écran, elle s’anime. Quand elle sort, elle se rendort. C’est ce même signal qui alimente la mesure de visibilité : la publicité n’est « vue » que lorsqu’elle l’est vraiment.
Le grattage
Ce que le navigateur reçoit vraiment : un doigt qui glisse sur le verre, plusieurs fois par seconde.
Passons à la partie amusante. Le film est une surface de dessin posée sur la photo du produit. À chaque mouvement du doigt, on y passe une brosse douce, avec une astuce : la brosse est réglée pour effacer au lieu de peindre. Au lieu d’ajouter de la couleur, chaque trait perce le film et laisse apparaître la photo dessous. C’est la version numérique de la pièce sur un ticket de loterie.
Quelques petits détails séparent un grattage agréable d’un grattage bâclé :
- Revendiquer le geste. La zone à gratter indique au navigateur que les touchers à l’intérieur appartiennent à la publicité. Sans cela, le navigateur croit que le pouce veut faire défiler la page, et le grattage se bat contre le défilement.
- Combler les trous. Un doigt va plus vite que le rafraîchissement de l’écran. Si l’on tamponne la brosse seulement à chaque point mesuré, un geste rapide laisse une ligne pointillée. La tamponner à chaque pixel entre le point précédent et le point courant garde un trait continu.
- Savoir s’arrêter. Personne ne veut gratter jusqu’au dernier pixel. Après chaque trait, on mesure la part du film disparue. Au-delà d’un pourcentage fixé, le reste s’efface tout seul et la récompense apparaît.
Un indice, pas une consigne
Personne ne lit de consignes dans une publicité. En revanche, on réagit à un mouvement qui suggère un geste. Une main qui glisse de gauche à droite dit « fais-moi glisser » dans toutes les langues, et disparaît dès que le lecteur touche le canevas. Une création doit s’expliquer en moins d’une seconde, pour les raisons détaillées dans pourquoi on joue avec des pubs qu’on ignorerait d’habitude.
Comment fonctionne le plein écran sur mobile, sans mauvaise surprise ?
Quand quelqu’un ouvre une création pour l’explorer, on lui donne tout l’écran du téléphone. Cela paraît simple, mais suppose une courte liste de vérifications :
- Dimensionner la vue sur l’espace réellement visible, pour que la barre du navigateur ne masque jamais le bas de la création.
- Bloquer la page derrière pour qu’un geste ne fasse jamais défiler l’article à la place.
- Rester à l’écart de l’encoche et de la barre d’accueil.
- Garder chaque bouton à au moins 44 pixels de haut, la taille d’un bout de doigt.
- N’appliquer les effets de survol que sur les appareils capables de survoler, pour que les cartes ne restent pas figées après un tap.
Au final
Aucune de ces techniques n’est exotique. Un canevas fixe, une règle d’échelle en une ligne, un observateur, un mode de composition, une poignée de propriétés CSS. Le savoir-faire consiste à les assembler pour que la personne sur le canapé ne remarque rien. Pour une vue d’ensemble du format, notre article sur le rich media publicitaire couvre les autres formes que peut prendre une telle création, et notre article sur l’optimisation créative dynamique explique comment ce même canevas peut montrer un produit différent à chaque personne.
Elle glisse le pouce, voit le sac à dos et sourit. C’est tout l’enjeu.
FAQ
Qu’est-ce qui rend une publicité « jouable » ?
Une pub jouable réagit à un toucher ou un clic au lieu de rester figée. Gratter, retourner, faire glisser ou balayer comptent tous, du moment que le geste révèle quelque chose et que la publicité réagit en temps réel.
Pourquoi utiliser un canevas fixe plutôt qu’une mise en page responsive ?
Un canevas fixe permet de concevoir, animer et tester une seule composition, puis de la mettre à l’échelle pour qu’elle s’adapte à n’importe quel écran. Une mise en page responsive multiplierait le nombre de versions à construire et les façons dont l’animation pourrait se casser.
Une pub jouable ralentit-elle la page sur laquelle elle apparaît ?
Pas si elle est construite avec un budget de poids serré. Deux images au lieu de vingt, du JavaScript natif au lieu d’un framework d’interface, et des ressources plus lourdes différées jusqu’à ce que la publicité soit réellement visible gardent le chargement initial léger.
Que se passe-t-il si l’interaction ne tourne pas bien sur un téléphone ancien ?
L’animation ne démarre que lorsque le navigateur signale que la création est à l’écran, ce qui limite ce qui tourne en même temps. L’image fixe en dessous reste une publicité complète à elle seule, donc un appareil plus lent affiche quand même quelque chose de cohérent, même si l’animation est plus modeste.
Une pub jouable a-t-elle besoin de son ou de consignes écrites ?
Non. Un petit indice animé, comme une main suggérant de faire glisser, suffit à communiquer le geste. Le son ne doit jamais démarrer sans un tap, conformément aux recommandations de l’IAB sur le rich media.
Comment Arago aide
Creative est construit autour exactement du type d’expérience jouable décrit ci-dessus : les formats Scratch, Flip 3D, Reveal, Slider et Carousel, tous conçus sur le même canevas de 320 x 480 et personnalisés par personne avec le produit, l’offre et le magasin le plus proche. Il se lance avec le DSP, sans coût supplémentaire : gratuit, sans designer, sans frais par publicité, sans limite sur le nombre lancé. La vitrine permet d’essayer chaque format.
