Une démo doit montrer le produit en action

Notre planificateur, le modèle qui transforme un site en scènes, avait un penchant naturel. La page d'accueil est la plus riche de la plupart des sites, alors il y construisait l'essentiel des scènes. Pour une promo, cela peut fonctionner. Pour une démo ou un tutoriel, non : le spectateur veut voir le produit faire son travail.

Nous l'avons vu le plus nettement sur notre propre produit. La page d'accueil de pagetovid.com intègre une bande démo et une galerie de films : une démo de PageToVid filmait surtout de la vidéo dans la vidéo. Notre juge qualité automatique lui donnait environ 45 sur 100, et il avait raison : le film était chargé et n'expliquait rien.

Notre premier essai était un conseil : privilégier les pages utiles de l'application. Le rendu suivant passait encore trois ou quatre scènes sur la page d'accueil. Un conseil perd quand la solution facile est sous la main, alors nous en avons fait des règles que le planificateur doit suivre en mode démo et tutoriel :

• une scène sur la page d'accueil au plus, et seulement comme plan d'ouverture
• toutes les autres scènes d'écran viennent de l'application : création, tableau de bord, éditeur, résultats
• si les pages de l'application manquent, le film utilise une animation, jamais un second plan de la page d'accueil
• chaque scène utilise l'adresse exacte d'une page, jamais la simple racine du site

Le parcours à filmer est concret : arriver dans l'application, faire l'action clé, montrer le résultat. Une règle ferme avec une solution de repli bat tous les conseils bienveillants.

Le second problème était la taille. Les scènes d'écran montraient la page entière, donc un texte trop petit pour être lu, surtout dans un film vertical sur téléphone. Désormais, chaque scène cadrée sur une section avance vers la zone exacte dont parle la narration.

L'enregistreur fait défiler cette section jusqu'à l'écran, la tient immobile et note son contour. Le mouvement de caméra se fait ensuite dans le moteur vidéo, ce qui sépare l'enregistrement de la réalisation. Un petit bouton reçoit une poussée forte, une section entière une poussée douce, et les deux restent dans la page. Le zoom arrive en douceur puis se fige, pour que le texte ne scintille jamais, et il reste net car l'écran est capturé à trois fois sa densité normale.

Pour chaque scène d'écran, le planificateur nomme maintenant la section ou l'élément dont il parle. Un plan pleine page sans cette précision compte comme une erreur.

Beaucoup de produits vivent derrière une connexion, et le film d'un formulaire de connexion n'est pas une démo. Notre réponse est une petite extension de navigateur, le Bridge. Elle fonctionnait déjà, mais seulement pour qui savait la charger depuis notre code source. Le 3 juillet, elle est devenue un téléchargement sur notre page extension, réglée sur pagetovid.com dès l'installation.

La personne qui possède le compte se connecte comme d'habitude dans son propre navigateur, et l'extension transmet cette session à notre enregistreur. Celui-ci ouvre alors chaque page du site déjà connecté : un tutoriel peut montrer le vrai tableau de bord et le vrai éditeur. Avec une session, le planificateur doit mettre en avant ces écrans intérieurs, et jamais une page de connexion.

Sans session, c'est l'inverse : un film doit rester sur les pages publiques. Nous en avons fait une garantie avec trois protections :

• le lecteur de pages ne propose jamais les chemins de connexion, d'inscription, de compte ou de tableau de bord comme pages à filmer
• pendant l'enregistrement, si une page affiche un champ de mot de passe ou une simple carte de connexion, l'enregistreur passe à la page principale du site et à une autre section
• le planificateur doit mettre en avant les pages publiques uniquement

Le même jour, les sous-titres ont reçu un léger fond sombre derrière chaque phrase, et les libellés de chiffres ont adopté la couleur d'encre du thème : le texte reste lisible sur les sites clairs comme sur les sites sombres.

Une démo s'ouvre maintenant sur un seul plan d'ouverture, puis entre dans le produit : le formulaire de création, l'éditeur, le résultat. Le texte à l'écran est lisible, parce que la caméra va le chercher. Et quand un produit se trouve derrière une connexion, le film peut quand même montrer l'intérieur, dès lors que la personne qui possède le compte ouvre la porte.

Le principe tient en une ligne : une démo montre le produit qui fonctionne. Découvrez comment les équipes utilisent les films de démo et les tutoriels sur la page des cas d'usage, ou essayez avec votre application.