Tutorial-Video erstellen, dem man folgen kann
Wer ein Tutorial-Video erstellen will, braucht vor allem eine Regel: eine Aufgabe pro Film, jeder Schritt auf dem echten Bildschirm, mit der Suche wirklich getippt und dem Button wirklich geklickt. Schreib zuerst die Schritte auf, gib jedem Schritt eine eigene Szene und mach lieber fünf kurze Filme für fünf Aufgaben als eine lange Aufnahme, die niemand wiederfindet.
Dieser Leitfaden ist für dich, wenn du im Support jede Woche dasselbe „Wie mache ich …?“-Ticket beantwortest und lieber einen Link zu einem Film schicken würdest. Er zeigt ein echtes 45-Sekunden-Tutorial und sagt genau, was unser Rekorder auf dem Bildschirm kann – und was er bewusst nicht tut.
Terokai Melaka Bersejarah: ein 45-Sekunden-Tutorial im Format 16:9 aus einem interaktiven Führer zu den historischen Stätten von Malakka, 79 gesprochene Wörter. Der Rekorder tippt „Muzium“ in die Suchleiste, klickt die Kategorie Muzium und filmt die Ergebnisse.
Erst die Aufgabe wählen, dann alles andere
Ein Tutorial beantwortet eine Frage, die jemand eingetippt hat: „Wie finde ich ein Museum auf dieser Karte?“ Der Film trägt diese Frage als Titel und beantwortet nichts anderes. Wo die Grenze zur Produkttour und zum Erklärvideo liegt, steht in Was ist ein Tutorial-Video.
Drei Tests, bevor du eine Zeile schreibst:
- Der Titel beginnt mit einem Verb und nennt genau ein Ergebnis: „Orte nach Kategorie filtern“, nicht „Filterfunktionen“.
- Drei bis sechs Schritte. Ab sieben sind es zwei Aufgaben.
- Der letzte Schritt zeigt ein Ergebnis, das man am eigenen Bildschirm prüfen kann.
Die beste Themenliste ist dein Support-Postfach. Deshalb beginnt der Anwendungsfall Hilfe- und Support-Videos beim Hilfecenter, nicht bei der Startseite.
Ein echtes Tutorial: Suche, Filter, Ergebnis in 45 Sekunden
Terokai Melaka Bersejarah ist ein interaktiver Führer zu den historischen Stätten von Malakka in Malaysia; die Seite selbst ist auf Malaiisch. Wir haben daraus ein 45-Sekunden-Tutorial gemacht: 16:9, 79 Wörter, englische Stimme.
Die Aufgabe passt in einen Satz: die Museen finden. Nach einer Titelkarte sagt die Stimme „Easily search for specific locations.“ Bei etwa Sekunde 15 gleitet der Cursor zur Suchleiste und tippt Muzium, Buchstabe für Buchstabe. Die nächste Szene klickt den Kategorie-Chip Muzium. Dann erscheinen die Ergebnisse als Karten in einem Browserfenster, unter „See results update immediately.“
Warum das als Tutorial funktioniert:
- Die Stimme sagt das Label, das auf dem Bildschirm steht. „Muzium“, nicht „museum“: Man sucht nach dem Wort, das man gehört hat.
- Zwei Wege zum Ergebnis, je eine Szene. Tippen und Filtern sind getrennt, du kannst bei dem anhalten, den du brauchst.
- Das Ergebnis bekommt eine eigene Einstellung. Die gefilterten Karten belegen, dass die Schritte funktioniert haben.
Für ein Hilfecenter würden wir mit dem Öffnen eines Eintrags enden statt mit dem Stadtfoto: Ein Tutorial endet dort, wo die Aufgabe endet.
Tutorial-Video erstellen, Schritt für Schritt
So gehen wir vor. Es funktioniert mit jeder Seite, die sich im Browser öffnen lässt.
Schritte als nummerierte Liste schreiben
Drei bis sechs Zeilen im Imperativ, je ein Verb, mit dem exakten Label vom Bildschirm: „Tippe Muzium in die Suchleiste.“ „Klicke die Kategorie Muzium.“
Auf der Seite von Schritt eins starten
Eine Suchseite, eine Einstellungsseite, ein Formular – nicht deine Startseite. Die Seite wird live in einem echten Browser gefilmt und sollte die Elemente der Schritte schon zeigen.
Eine Szene, ein Element, eine Aktion
Richte jede Szene auf ein Element und wähle die Aktion aus der Tabelle unten. Die Liste kommt ins Briefing, wörtlich zu sprechende Sätze in Anführungszeichen.
Wörter budgetieren
Die Stimme ist eine durchgehende Aufnahme, die sich die Szenen teilen: Wörter sind Zeit (die Narration bestimmt die Länge). Auf Englisch tragen 75–95 Wörter 45 Sekunden; auf Deutsch brauchst du rund 10 % weniger, also etwa 9–13 pro Schritt.
Ergebnisszene prüfen, dann stumm ansehen
Zeigt die letzte gefilmte Szene das Ergebnis? Ohne Ton müssen Untertitel und Cursor reichen.
Dort veröffentlichen, wo die Frage gestellt wird
Bette den Film in den gleichnamigen Hilfeartikel ein und verlinke ihn in der Standardantwort deines Teams.
Der erste Film jeder Website ist kostenlos, ohne Karte. Danach kostet ein Render 40 Credits im Abo oder 3,90 $ für einen einzelnen Film ohne Abo (Preise).
Was der Rekorder auf dem Bildschirm kann – und was nicht
Ein Tutorial lebt davon, dass man die Aktion sieht. Das sind die Einstellungen, die eine gefilmte Szene in unserem Rekorder heute sein kann.
| Einstellung | Was man sieht | Wofür |
|---|---|---|
Klick | Der Cursor gleitet zum Element, klickt, und die Einstellung bleibt auf der Reaktion der Seite | Menüs, Tabs, Filter, Buttons |
Tippen | Der Cursor klickt ins Feld und tippt den Text Buchstabe für Buchstabe | Suchfelder, Filter, Chat-Eingaben |
Hover | Der Cursor ruht auf dem Element, die Seite reagiert | Tooltips, Hover-Menüs |
Spotlight | Ein Zoom auf ein einzelnes Element | Eine Einstellung oder ein Wert, den man finden muss |
Scrollen | Ruhiges Scrollen, auf Wunsch ab einem bestimmten Abschnitt | Lange Ergebnislisten |
Zwei Grenzen zählen. Das Tippen drückt nie Enter oder Tab, mit Absicht: Es tippt auf deiner echten Website und darf kein Formular abschicken. Ergebnisse, die beim Tippen oder nach einem Klick auf einen Filter erscheinen, lassen sich gut filmen; sonst mach den Klick auf den Such-Button der Seite zum nächsten Schritt. Und eine Szene filmt eine Aktion: Ein Schritt mit drei Klicks sind drei Szenen.
Für eine Aufgabe über mehrere Seiten schreibst du einmal einen Flow in der VS-Code-Erweiterung (eine URL plus geskriptete Schritte); die Chrome-Erweiterung spielt ihn ab, nimmt ihn auf und legt jeden Schritt als eigene Szene ab. Der Vergleich mit der eigenen Aufnahme: automatisierte vs. manuelle Screencasts.
Eine Serie kurzer Filme oder ein langes Tutorial?
Fast immer eine Serie. Wer über die Suche nach „nach Kategorie filtern“ kommt, will nicht Minute vier einer Tour.
Ein Rechenbeispiel: fünf Aufgaben in einem Hilfecenter (suchen, filtern, Ort speichern, Liste teilen, Sprache wechseln). Als ein Film sind das knapp drei Minuten, nahe an der Obergrenze von 15 bis 180 Sekunden, und auf Schritt vier kann niemand verlinken. Als fünf Filme zu 30–45 Sekunden sind es fünf Renders zu je 40 Credits im Abo, einer pro Artikel. Ändert sich die Filteransicht, renderst du einen Film neu, nicht den ganzen Kurs.
Ein langer Film passt zu einem einzigen Ablauf, der nur in der Reihenfolge Sinn ergibt, etwa von der Registrierung bis zur ersten Rechnung. Bleib unter zwei Minuten und sag die Schrittnummer laut. Das ganze Vorgehen steht im Anwendungsfall Tutorial-Videos.
Tutorials hinter einem Login
Ein Cloud-Browser kann sich nicht in deinem Namen anmelden, und eine Seite, die mit einer Login-Maske antwortet, wird abgelehnt, ohne dass es dich etwas kostet. Der vorgesehene Weg ist eine Capture-Session: Du meldest dich einmal in deinem Browser an, und die PageToVid-Erweiterung (Chrome oder VS Code) übergibt diese Sitzung an den Rekorder. Sie ist an die Origin deiner Website gebunden, läuft spätestens nach drei Tagen ab und ist ab dem Tarif Scale verfügbar.
Filme ein Demokonto mit plausiblen Testdaten. Der Rekorder nimmt alles auf, was auf dem Bildschirm ist – auch den Namen eines echten Kunden in der Seitenleiste.
Für die allererste Aufgabe nach der Registrierung lies Was ist ein Onboarding-Video.
Fehler, die wir in Tutorial-Renders sehen
- Start auf der Startseite. Zehn Sekunden Hero vor Schritt eins.
- Umschriebene Labels. Die Stimme sagt „Präferenzen“, der Button heißt „Einstellungen“.
- Zwei Schritte in einer Szene. Teil sie auf; die Wörter brauchen ohnehin dieselbe Zeit.
- Keine Ergebnisszene. Man erfährt nie, ob es geklappt hat.
- Eine Desktop-App im Seitenverhältnis 9:16. Hochkant filmt das mobile Layout; ein Tutorial gehört in 16:9.
Wann du PageToVid für ein Tutorial nicht nutzen solltest
Ein langer Kurs, der von der Stimme einer Expertin lebt. Wenn man für eine Person kommt, die zehn Minuten laut über ein Tabellenmodell nachdenkt, nimm dich selbst mit OBS oder Loom auf; PageToVid vs. Loom zeigt, wo welches Werkzeug gewinnt.
Eine Aufgabe, die mit einem echten Absenden endet. Bezahlen, löschen, eine E-Mail senden: Unser Rekorder drückt kein Enter und sollte keinen echten „Bezahlen“-Button klicken. Nimm eine Testumgebung selbst auf.
Ein natives oder physisches Produkt. Eine Desktop- oder Handy-App, eine Maschine auf der Werkbank haben keine Webseite zum Filmen. Nutze eine Geräteaufnahme oder eine Kamera.
Verwandle deine Website in ein Video — kostenlos
Füge die Seite ein, die gefilmt werden soll. PageToVid schreibt das Skript, filmt die echte Website, vertont sie und liefert das MP4.
Häufige Fragen
Wie lang sollte ein Tutorial-Video sein?
So lang wie eine Aufgabe, bei den meisten Produktaufgaben 30 bis 60 Sekunden. Ein Ablauf, der nur in der Reihenfolge Sinn ergibt, darf bis zu zwei Minuten dauern; darüber teilst du ihn in eine Serie.
Kann das Tutorial Tippen und Klicken zeigen?
Ja. Eine Szene kann ein Element klicken, darüber hovern, darauf zoomen, scrollen oder Text Buchstabe für Buchstabe in ein Such-, Filter- oder Chatfeld tippen. Das Tippen drückt nie Enter und kann daher kein Formular auf deiner Website abschicken.
Kann ich ein Tutorial meiner App hinter einem Login erstellen?
Ja, mit einer Capture-Session aus der PageToVid-Erweiterung für Browser oder VS Code, ab dem Tarif Scale. Die Sitzung ist an die Origin deiner Website gebunden und läuft spätestens nach drei Tagen ab. Nutze ein Demokonto.
Was passiert, wenn sich die Oberfläche ändert?
Du renderst den Film neu. Er entsteht aus der Live-Seite, also filmt der neue Render die heutigen Bildschirme mit denselben Schritten und derselben Narration. In einer Serie muss nur der betroffene Film neu.