Comment créer des vidéos comparatives avant/après

Certaines améliorations sont difficiles à expliquer et faciles à montrer. Une page qui mettait huit secondes à charger n’en met plus qu’une. Un tableau de bord surchargé devient lisible. Un tunnel de paiement confus a perdu trois étapes. Décrire ces changements avec des mots demande un paragraphe ; les montrer demande six secondes de vidéo.

Les comparatifs avant/après font partie des formats les plus convaincants que vous puissiez produire avec un enregistreur d’écran — et de ceux qu’il est le plus facile de rater. Si les deux enregistrements ne correspondent pas, les spectateurs concentrent leur attention sur les différences que vous n’aviez pas prévues plutôt que sur celle que vous vouliez montrer.

Ce guide explique comment planifier, enregistrer et monter des vidéos comparatives dans Recorded pour que l’amélioration parle d’elle-même.

Quand utiliser un comparatif

• Gains de performance : temps de chargement, temps de build, vitesse de rendu, durée de synchronisation
• Refontes : une nouvelle mise en page, navigation ou identité visuelle à côté de l’ancienne
• Changements de flux de travail : sept clics ramenés à deux
• Corrections de bugs : le comportement défaillant, puis le comportement corrigé
• Avant/après de votre propre travail : nettoyages de design, refactorisations, migrations, réécritures

Si votre changement est invisible à l’écran — une refactorisation backend au résultat identique —, un comparatif n’aidera pas. Utilisez-le quand la différence est réellement visible.

La règle d’or : ne changez qu’une seule chose

Toute la force d’un comparatif vient du fait que tout est resté identique, sauf l’amélioration. Les deux enregistrements doivent donc partager :

• La même taille de fenêtre et la même résolution d’écran
• Le même mode de capture et la même fréquence d’images
• Le même état de départ (même page, mêmes données, même compte)
• Les mêmes actions, dans le même ordre, au même rythme
• Le même thème — n’enregistrez pas l’« avant » en mode clair et l’« après » en mode sombre

Le moindre écart donne au spectateur une raison de douter du résultat. Verrouillez tout cela avant le premier enregistrement.

Préparer votre comparatif

1. Écrivez le script exact des actions. Pas la narration : les clics. « Ouvrir le tableau de bord, cliquer sur Rapports, sélectionner les 30 derniers jours, cliquer sur Exporter. »
2. Décidez ce que vous mesurez. Le temps, le nombre d’étapes, le nombre d’erreurs, ou la clarté ressentie. Dites-le à voix haute dans la vidéo.
3. Préparez des données de test identiques. Un compte de démonstration avec les mêmes enregistrements dans les deux environnements élimine l’objection « celui-là contenait moins de données ».
4. Fixez une taille de fenêtre. Ajustez-la une fois et n’y touchez plus entre les prises.
5. Répétez chaque version. Hésiter sur une prise et être fluide sur l’autre exagère discrètement votre résultat.

Enregistrer les deux versions

Enregistrez l’« avant » et l’« après » comme deux captures distinctes plutôt qu’une longue prise. Des fichiers séparés sont plus simples à découper, à aligner et à refaire si l’un rate.

1. Configurez la capture dans Recorded — choisissez le même écran, la même fenêtre ou la même zone pour les deux
2. Choisissez une fréquence d’images et conservez-la pour les deux prises
3. Enregistrez la version « avant » en suivant exactement votre script d’actions
4. Changez d’environnement — le nouveau build, le nouveau design, l’URL de préproduction
5. Vérifiez que la fenêtre a toujours la même taille
6. Enregistrez la version « après » avec le script d’actions identique

Astuce : si vous comparez des temps de chargement, lancez l’enregistrement juste avant le clic déclencheur et arrêtez-le juste après la fin. Ces images supplémentaires facilitent grandement le découpage à un point de départ équitable.

Monter le comparatif

Découper au même point de départ

Ouvrez chaque enregistrement dans l’éditeur et découpez-les pour qu’ils démarrent exactement au même instant déclencheur — en général l’image du clic. Un comparatif qui commence une demi-seconde trop tôt d’un côté paraît plus lent, même quand il ne l’est pas.

Étiqueter clairement chaque côté

Utilisez des textes en surimpression pour marquer Avant et Après à l’écran. Veillez à ce qu’ils soient :

• À la même position dans les deux clips
• Affichés pendant tout le segment, pas seulement la première seconde
• Très contrastés, pour survivre à la compression et aux petits écrans mobiles

Ajouter une durée qui défile ou un compteur d’étapes en second calque rend l’amélioration mesurable plutôt que simplement ressentie.

Utiliser le zoom pour guider l’attention

Si la différence se joue dans un coin de l’écran — un indicateur de chargement, un compteur, un menu —, ajoutez un zoom au même instant dans les deux clips. Zoomer d’un seul côté casse la symétrie : reproduisez vos zones de zoom à l’identique.

Attention aux changements de vitesse

L’accélération est excellente pour les tutoriels et risquée pour les comparatifs. Dès que vous accélérez un clip, le spectateur ne peut plus se fier au timing. Si vous devez compresser une longue attente, appliquez exactement la même vitesse aux deux clips et indiquez-le à l’écran.

Choisir une disposition

• Séquentielle : l’« avant » puis l’« après ». Simple, honnête, compatible avec tous les formats — l’option par défaut la plus sûre.
• Côte à côte : les deux clips ensemble, idéal quand les durées sont proches et les écrans assez simples pour rester lisibles en demi-largeur.
• Coupe sur l’instant clé : montrer les deux jusqu’au moment décisif, puis alterner. Efficace pour des écarts de performance spectaculaires.

Pour les formats verticaux ou sociaux, empilez les deux clips en haut et en bas plutôt qu’à gauche et à droite, afin que chacun garde une taille lisible.

Rester honnête

Un comparatif, c’est du marketing, mais c’est aussi une preuve. Un résultat contesté qui ne tient pas la route coûte plus de confiance que la vidéo n’en a gagné.

• Ne videz pas le cache d’un côté seulement
• Ne lancez pas l’« avant » sur une connexion bridée
• Ne sautez pas discrètement une étape dans l’« après »
• Précisez les conditions : quelle machine, quel réseau, quel volume de données
• Montrez un cas typique, pas votre essai le plus chanceux

Exporter et partager

• MP4 partout où vous intégrez ou téléversez une vidéo
• GIF pour les comparatifs courts dans un README, un changelog ou un message — restez sous quelques secondes
• Recadrage vertical pour les réseaux sociaux, avec la disposition empilée décrite plus haut

Donnez au fichier un nom qui survit au téléchargement : checkout-flow-before-after-2026-09.mp4 vaut mieux que comparatif-final-v3.mp4.

Petite checklist

[ ] Même taille de fenêtre, résolution, fréquence d'images et thème sur les deux prises
[ ] Même état de départ et mêmes données de test
[ ] Script d'actions identique, répété pour les deux versions
[ ] Les deux clips découpés sur la même image déclencheuse
[ ] Textes Avant/Après aux mêmes positions
[ ] Effets de zoom reproduits à l'identique sur les deux clips
[ ] Aucun changement de vitesse appliqué d'un seul côté
[ ] Conditions indiquées à l'écran ou dans la description

Conclusion

Une bonne vidéo comparative n’affirme pas que les choses se sont améliorées : elle laisse le spectateur le voir et en juger. Alignez les deux enregistrements autant que possible, ne changez que ce que vous démontrez, et étiquetez clairement le résultat. La prochaine fois que vous livrez une refonte, un correctif de performance ou un parcours simplifié, filmez les deux côtés avant que l’ancienne version ne disparaisse. C’est le plan qu’on ne peut plus rattraper.