Vorher-Nachher-Vergleichsvideos erstellen

Manche Verbesserungen lassen sich schwer erklären, aber leicht zeigen. Eine Seite, die früher acht Sekunden brauchte, lädt jetzt in einer. Ein überladenes Dashboard ist plötzlich lesbar. Ein verwirrender Checkout hat drei Schritte verloren. Diese Veränderungen in Worten zu beschreiben, kostet einen ganzen Absatz — sie zu zeigen, kostet sechs Sekunden Video.

Vorher-Nachher-Vergleiche gehören zu den überzeugendsten Formaten, die du mit einem Bildschirmrekorder erstellen kannst — und zu denen, bei denen am meisten schiefgehen kann. Wenn die beiden Aufnahmen nicht zusammenpassen, achten die Zuschauer auf die Unterschiede, die du nicht beabsichtigt hast, statt auf den einen, den du zeigen wolltest.

Dieser Leitfaden zeigt, wie du Vergleichsvideos in Recorded planst, aufnimmst und schneidest, damit die Verbesserung für sich selbst spricht.

Wann sich ein Vergleichsvideo lohnt

• Performance-Verbesserungen: Ladezeiten, Build-Zeiten, Rendering-Geschwindigkeit, Sync-Dauer
• Redesigns: Ein neues Layout, eine neue Navigation oder Optik neben der alten
• Workflow-Änderungen: Sieben Klicks werden zu zwei
• Bugfixes: Erst das fehlerhafte Verhalten, dann das korrigierte
• Vorher/Nachher der eigenen Arbeit: Design-Aufräumen, Refactorings, Migrationen, überarbeitete Texte

Wenn deine Änderung auf dem Bildschirm unsichtbar ist — ein Backend-Refactoring mit identischer Ausgabe —, hilft ein Vergleichsvideo nicht. Setze es ein, wenn der Unterschied tatsächlich zu sehen ist.

Die goldene Regel: Ändere nur eine Sache

Die Überzeugungskraft eines Vergleichs entsteht daraus, dass außer der Verbesserung alles gleich geblieben ist. Beide Aufnahmen sollten deshalb teilen:

• Dieselbe Fenstergröße und Bildschirmauflösung
• Denselben Aufnahmemodus und dieselbe Bildrate
• Denselben Ausgangszustand (gleiche Seite, gleiche Daten, gleicher Account)
• Dieselben Aktionen, in derselben Reihenfolge, im selben Tempo
• Dasselbe Theme — nimm nicht das „Vorher” im hellen und das „Nachher” im dunklen Modus auf

Jede Abweichung gibt Zuschauern einen Grund, am Ergebnis zu zweifeln. Lege all das fest, bevor du das erste Mal auf Aufnahme drückst.

Den Vergleich planen

1. Schreibe das genaue Skript der Aktionen. Keine Sprechertexte — Klicks. „Dashboard öffnen, Berichte anklicken, letzte 30 Tage wählen, Export klicken.”
2. Lege fest, was du misst. Zeit, Anzahl der Schritte, Fehleranzahl oder subjektive Klarheit. Sprich es im Video aus.
3. Bereite identische Testdaten vor. Ein Demo-Account mit denselben Datensätzen in beiden Umgebungen entkräftet den Einwand „da waren ja auch weniger Daten drin”.
4. Setze eine feste Fenstergröße. Einmal anpassen und zwischen den Takes nicht mehr anfassen.
5. Probe jede Version einmal durch. Wenn du bei einem Take stockst und beim anderen flüssig bist, übertreibst du dein Ergebnis unbemerkt.

Beide Versionen aufnehmen

Nimm „Vorher” und „Nachher” als zwei getrennte Aufnahmen auf, nicht als einen langen Take. Getrennte Dateien lassen sich leichter zuschneiden, ausrichten und neu aufnehmen, wenn eine misslingt.

1. Richte die Aufnahme in Recorded ein — wähle für beide denselben Monitor, dasselbe Fenster oder denselben Bereich
2. Entscheide dich für eine Bildrate und behalte sie für beide Takes bei
3. Nimm die „Vorher”-Version genau nach deinem Aktionsskript auf
4. Wechsle die Umgebung — neuer Build, neues Design, Staging-URL
5. Prüfe, ob das Fenster noch dieselbe Größe hat
6. Nimm die „Nachher”-Version mit demselben Aktionsskript auf

Tipp: Wenn du Ladezeiten vergleichst, starte die Aufnahme kurz vor dem Klick, der das Laden auslöst, und stoppe kurz danach. Diese zusätzlichen Frames machen den Zuschnitt auf einen fairen Startpunkt viel einfacher.

Den Vergleich schneiden

Auf denselben Startpunkt zuschneiden

Öffne beide Aufnahmen im Editor und schneide sie so zu, dass sie exakt im selben auslösenden Moment beginnen — meist im Frame des Klicks. Ein Vergleich, der auf einer Seite eine halbe Sekunde früher startet, wirkt langsamer, selbst wenn er es nicht ist.

Beide Seiten klar beschriften

Markiere Vorher und Nachher mit Text-Overlays im Bild. Achte darauf:

• Gleiche Position in beiden Clips
• Während des gesamten Abschnitts sichtbar, nicht nur in der ersten Sekunde
• Hoher Kontrast, damit sie Kompression und kleine Handy-Displays überstehen

Ein zweites Overlay mit laufender Zeit oder Schrittzahl macht die Verbesserung messbar statt nur spürbar.

Zoom zur Aufmerksamkeitslenkung

Wenn der Unterschied in einer Bildschirmecke passiert — ein Spinner, ein Zähler, ein Menü —, setze in beiden Clips im selben Moment einen Zoom. Nur auf einer Seite zu zoomen bricht die Symmetrie, also spiegle deine Zoom-Bereiche über beide Aufnahmen.

Vorsicht bei Geschwindigkeitsänderungen

Speed Ramping ist großartig für Tutorials und riskant für Vergleiche. Sobald du einen Clip beschleunigst, können Zuschauer dem Timing nicht mehr trauen. Musst du eine lange Wartezeit kürzen, wende exakt dieselbe Geschwindigkeit auf beide Clips an und sage es im Bild dazu.

Ein Layout wählen

• Nacheinander: Erst „Vorher”, dann „Nachher”. Schlicht, ehrlich und in jedem Seitenverhältnis funktionsfähig — die sicherste Standardwahl.
• Nebeneinander: Beide Clips gleichzeitig, ideal bei ähnlicher Dauer und Bildschirmen, die auch auf halber Breite lesbar bleiben.
• Schnitt auf den Moment: Beide bis zum entscheidenden Augenblick zeigen, dann hin- und herschneiden. Wirkungsvoll bei dramatischen Performance-Unterschieden.

Für vertikale oder Social-Formate stapelst du die Clips besser oben und unten statt links und rechts, damit beide lesbar groß bleiben.

Ehrlich bleiben

Vergleichsvideos sind Marketing, aber auch Beweismaterial. Ein Ergebnis, das einer Nachfrage nicht standhält, kostet mehr Vertrauen, als das Video gewonnen hat.

• Leere nicht bei einem Durchlauf den Cache und beim anderen nicht
• Lass das „Vorher” nicht über eine gedrosselte Verbindung laufen
• Überspringe im „Nachher” keinen Schritt heimlich
• Nenne die Bedingungen: welcher Rechner, welches Netz, wie viele Daten
• Zeige einen typischen Fall, nicht deinen glücklichsten Durchlauf

Export und Weitergabe

• MP4 für alles, wo du ein Video einbettest oder hochlädst
• GIF für kurze Vergleiche in einer README, einem Changelog oder Chat — halte es bei wenigen Sekunden
• Vertikaler Zuschnitt für Social-Plattformen, mit dem oben beschriebenen gestapelten Layout

Gib der Datei einen Namen, der einen Download übersteht: checkout-flow-before-after-2026-09.mp4 schlägt comparison-final-v3.mp4.

Kurze Checkliste

[ ] Gleiche Fenstergröße, Auflösung, Bildrate und Theme in beiden Takes
[ ] Gleicher Ausgangszustand und gleiche Testdaten
[ ] Identisches Aktionsskript, für beide Versionen geprobt
[ ] Beide Clips auf denselben Auslöse-Frame zugeschnitten
[ ] Vorher/Nachher-Text-Overlays an gleicher Position
[ ] Zoom-Effekte in beiden Clips gespiegelt
[ ] Keine Geschwindigkeitsänderung nur auf einer Seite
[ ] Bedingungen im Bild oder in der Beschreibung genannt

Fazit

Ein gutes Vergleichsvideo behauptet nicht, dass etwas besser geworden ist — es lässt die Zuschauer sehen und selbst entscheiden. Gleiche die beiden Aufnahmen so weit wie möglich an, ändere nur das, was du demonstrierst, und beschrifte das Ergebnis klar. Wenn du das nächste Mal ein Redesign, eine Beschleunigung oder einen einfacheren Ablauf ausrollst, nimm beide Seiten auf, bevor die alte Version verschwindet. Diese Aufnahme kannst du später nicht nachholen.