Comment faire un tutoriel vidéo que l'on peut suivre
Comment faire un tutoriel vidéo qui serve vraiment ? Une tâche par film, chaque étape montrée sur le vrai écran, avec la recherche réellement saisie et le bouton réellement cliqué devant la caméra. Écrivez d'abord les étapes, donnez une scène à chacune, et préférez cinq films courts pour cinq tâches à un long enregistrement que personne ne retrouve.
Ce guide s'adresse au responsable support qui répond chaque semaine au même ticket « comment est-ce que je… ? » et voudrait envoyer un lien vers un film à la place. Il s'appuie sur un vrai tutoriel de 45 secondes et dit précisément ce que notre enregistreur sait faire à l'écran, et ce qu'il refuse de faire.
Terokai Melaka Bersejarah : un tutoriel de 45 secondes en 16:9, tiré d'un guide interactif du patrimoine de Malacca, 79 mots prononcés. L'enregistreur tape « Muzium » dans la barre de recherche, clique sur la catégorie Muzium et filme les résultats.
Choisissez la tâche avant d'ouvrir quoi que ce soit
Un tutoriel répond à une question que quelqu'un a tapée : « comment trouver un musée sur cette carte ? ». Le film porte cette question en titre et ne répond à rien d'autre ; qu'est-ce qu'un tutoriel vidéo trace la frontière avec la visite guidée et la vidéo explicative.
Trois tests avant d'écrire une ligne :
- Le titre commence par un verbe et nomme un seul résultat : « Filtrer les lieux par catégorie », pas « Les filtres ».
- Trois à six étapes. À partir de sept, ce sont deux tâches.
- La dernière étape montre un résultat que le spectateur peut vérifier sur son propre écran.
La meilleure liste de tâches, c'est votre boîte support : c'est pourquoi le cas d'usage vidéos d'aide et de support part du centre d'aide, pas de la page d'accueil.
Un vrai tutoriel : recherche, filtre, résultat en 45 secondes
Terokai Melaka Bersejarah est un guide interactif des sites historiques de Malacca, en Malaisie ; la page elle-même est en malais. Nous en avons tiré un tutoriel de 45 secondes : 16:9, 79 mots, voix anglaise.
La tâche tient en une phrase : trouver les musées. Après un carton titre, la voix annonce « Easily search for specific locations. » Vers la quinzième seconde, le curseur glisse jusqu'à la barre de recherche et tape Muzium, lettre par lettre. La scène suivante clique sur la puce de catégorie Muzium. Puis les résultats s'affichent en cartes dans une fenêtre de navigateur, sous « See results update immediately. »
Ce qui en fait un tutoriel :
- La voix prononce le libellé affiché. « Muzium », pas « museum » : le spectateur cherchera le mot qu'il a entendu.
- Deux chemins vers le résultat, une scène chacun. Saisie et filtre sont séparés ; on peut s'arrêter sur celui dont on a besoin.
- Le résultat a son propre plan. Les cartes filtrées prouvent que les étapes ont marché.
Pour un centre d'aide, nous finirions sur l'ouverture d'une fiche plutôt que sur la photo de la ville : un tutoriel s'arrête là où s'arrête la tâche.
Faire un tutoriel vidéo, étape par étape
La méthode que nous suivons. Elle marche depuis n'importe quelle page qui s'ouvre dans un navigateur.
Écrire les étapes en liste numérotée
Trois à six lignes à l'impératif, un verbe chacune, avec le libellé exact affiché : « Tapez Muzium dans la barre de recherche. » « Cliquez sur la catégorie Muzium. »
Partir de la page où se passe l'étape un
Une page de recherche, un écran de réglages, un formulaire ; pas votre page d'accueil. La page est filmée en direct dans un vrai navigateur : elle doit déjà montrer les éléments concernés.
Une scène, un élément, une action
Visez un élément par scène et choisissez son action dans le tableau ci-dessous. Mettez la liste dans le brief, et entre guillemets toute phrase à dire mot pour mot.
Compter les mots
La voix est une seule prise continue que les scènes se partagent : les mots font la durée (la narration fait la longueur). En français, comptez un peu plus que les 75 à 95 mots qui font 45 secondes en anglais, soit 12 à 16 par étape.
Vérifier la scène du résultat, puis regarder sans le son
La dernière scène filmée montre-t-elle le résultat ? Sans le son, les sous-titres et le curseur doivent suffire pour suivre.
Publier là où la question se pose
Intégrez le film dans l'article d'aide du même titre et ajoutez le lien dans la réponse type de votre équipe.
Le premier film d'un site est gratuit, sans carte bancaire. Ensuite, un rendu coûte 40 crédits sur un forfait, ou 3,90 $ pour un film à l'unité, sans abonnement (tarifs).
Ce que l'enregistreur sait faire à l'écran, et ce qu'il refuse
Un tutoriel vaut par l'action visible. Voici les plans qu'une scène filmée peut être aujourd'hui dans notre enregistreur.
| Plan | Ce que voit le spectateur | À utiliser pour |
|---|---|---|
Clic | Le curseur glisse vers l'élément, appuie, et le plan reste sur la réaction de la page | Menus, onglets, filtres, boutons |
Saisie | Le curseur clique dans le champ et tape le texte lettre par lettre | Recherche, filtre, fenêtre de discussion |
Survol | Le curseur se pose sur l'élément et la page réagit | Info-bulles, menus au survol |
Projecteur | Un zoom sur un seul élément | Un réglage ou une valeur à repérer |
Défilement | Un défilement calme, éventuellement depuis une section donnée | Longues listes de résultats |
Deux limites comptent. La saisie n'appuie jamais sur Entrée ni Tab, volontairement : elle tape sur votre vrai site et ne doit pas pouvoir envoyer un formulaire. Les résultats qui s'affichent pendant la frappe, ou après un clic sur un filtre, se filment bien ; sinon, faites du clic sur le bouton de recherche de la page l'étape suivante. Et une scène filme une action : une étape à trois clics fait trois scènes.
Pour une tâche qui traverse plusieurs pages, écrivez un parcours une fois dans l'extension VS Code (une URL et des étapes scriptées) ; l'extension Chrome le rejoue, l'enregistre et range chaque étape comme une scène. La comparaison avec l'enregistrement fait main : screencasts automatisés ou manuels.
Une série de films courts, ou un long tutoriel ?
Une série, presque toujours. Quelqu'un qui arrive d'une recherche « filtrer par catégorie » ne veut pas la quatrième minute d'une visite.
Exemple chiffré : cinq tâches dans un centre d'aide (rechercher, filtrer, enregistrer un lieu, partager une liste, changer de langue). En un seul film, cela approche les trois minutes, près du plafond de 15 à 180 secondes, et impossible de renvoyer vers l'étape quatre. En cinq films de 30 à 45 secondes, ce sont cinq rendus à 40 crédits chacun sur un forfait, un par article. Quand l'écran des filtres change, vous refaites un film, pas toute la formation.
Un film long convient à un parcours unique qui n'a de sens que dans l'ordre, de l'inscription à la première facture par exemple. Gardez-le sous deux minutes et dites le numéro d'étape à voix haute. La démarche complète est sur le cas d'usage vidéos tutoriels.
Les tutoriels d'une application derrière une connexion
Un navigateur dans le cloud ne peut pas se connecter à votre place, et une page qui répond par un écran de connexion est refusée sans rien vous coûter. La voie prévue est la session de capture : vous vous connectez une fois dans votre navigateur, et l'extension PageToVid (Chrome ou VS Code) transmet cette session à l'enregistreur. Elle est liée à l'origine de votre site, expire sous trois jours et s'obtient à partir du forfait Scale.
Filmez un compte de démonstration aux données plausibles. L'enregistreur capte tout ce qui est à l'écran, y compris le nom d'un vrai client dans la barre latérale.
Pour la toute première tâche après l'inscription, voyez qu'est-ce qu'une vidéo d'onboarding.
Les erreurs que nous voyons dans les rendus de tutoriels
- Commencer par la page d'accueil. Dix secondes de bandeau avant l'étape un.
- Des libellés reformulés. La voix dit « préférences », le bouton dit « Paramètres ».
- Deux étapes dans une scène. Coupez ; les mots prennent le même temps de toute façon.
- Pas de plan sur le résultat. Le spectateur ne sait jamais si cela a marché.
- Une application de bureau en 9:16. Le vertical filme la version mobile du site ; un tutoriel se regarde en 16:9.
Quand ne pas utiliser PageToVid pour un tutoriel
Une longue formation portée par la voix d'un expert. Si l'on vient pour une personne qui réfléchit à voix haute pendant dix minutes sur un tableur, enregistrez-vous avec OBS ou Loom ; PageToVid ou Loom dit où chacun l'emporte.
Une tâche qui se termine par un vrai envoi. Payer, supprimer, envoyer un e-mail : notre enregistreur n'appuie pas sur Entrée et ne doit pas cliquer sur un vrai bouton « Payer ». Filmez vous-même un environnement de test.
Un produit natif ou physique. Une application de bureau ou mobile, une machine sur un établi n'ont pas de page web à filmer. Passez par un enregistrement de l'appareil ou une caméra.
Transformez votre site en vidéo — gratuitement
Collez la page à filmer. PageToVid écrit le script, filme le vrai site, enregistre la voix et livre le MP4.
Questions fréquentes
Quelle durée pour un tutoriel vidéo ?
Le temps d'une tâche, soit 30 à 60 secondes pour la plupart des tâches produit. Un parcours qui n'a de sens que dans l'ordre peut aller jusqu'à deux minutes ; au-delà, découpez-le en série.
Le tutoriel peut-il montrer une saisie et des clics ?
Oui. Une scène peut cliquer sur un élément, le survoler, zoomer dessus, faire défiler la page ou taper un texte lettre par lettre dans un champ de recherche, de filtre ou de discussion. La saisie n'appuie jamais sur Entrée et ne peut donc pas envoyer un formulaire sur votre site.
Puis-je faire un tutoriel de mon application derrière une connexion ?
Oui, avec une session de capture depuis l'extension PageToVid pour le navigateur ou VS Code, à partir du forfait Scale. La session est liée à l'origine de votre site et expire sous trois jours. Utilisez un compte de démonstration.
Que se passe-t-il quand l'interface change ?
Vous relancez le rendu. Le film est fait depuis la page en ligne : le nouveau rendu filme les écrans du jour avec les mêmes étapes et la même narration. Dans une série, seul le film concerné est à refaire.