Vorher-Nachher-Screenshot

Ein Vorher-Nachher-Screenshot ist ein Bildpaar desselben Motivs: eine Aufnahme vor einer Änderung und eine danach. Das Paar wird nebeneinander, übereinander oder als Überlagerung mit Schieberegler gezeigt, sodass der Unterschied auf einen Blick sichtbar ist.

Ein fairer Vergleich hält alles außer der Änderung konstant. Beide Bilder brauchen denselben Aufnahmebereich, dieselbe Viewport-Größe, Pixeldichte und Scrollposition sowie denselben App-Zustand, etwa dasselbe angemeldete Konto und dieselben Testdaten. Ist das zweite Bild auch nur um wenige Pixel verschoben, erscheinen in einem Pixelvergleich auch unveränderte Inhalte als verschieden.

Warum Vorher-Nachher wichtig ist

Ein einzelner Screenshot zeigt einen Zustand. Ein Paar zeigt eine Änderung, und genau die müssen Reviewer, Kunden und Vorgesetzte meist beurteilen. Zudem hält es fest, wie der Bildschirm vor der Änderung aussah, was sich später nur schwer nachstellen lässt.

Wo Vorher-Nachher-Screenshots eingesetzt werden

• Release Notes und Changelogs, die einen neu gestalteten Bildschirm zeigen.
• Fehlerberichte und Bestätigungen von Korrekturen.
• Design- und Barrierefreiheits-Reviews, etwa bei einer Kontrastkorrektur.
• Kundenberichte zu Website-Aktualisierungen.

So nehmen Sie aussagekräftige Vorher-Nachher-Paare auf

1. Nehmen Sie das „Vorher“-Bild zuerst auf, bevor eine Änderung live geht.
2. Notieren Sie die Einstellungen: Fenstergröße, Bereich, Zoomstufe, Design und Testdaten.
3. Nehmen Sie das „Nachher“-Bild mit denselben Einstellungen auf.
4. Exportieren Sie beide im selben Format und präsentieren Sie sie mit passenden Beschriftungen.

Für Webseiten führen Sie Website Capture in Temposhot zweimal mit derselben URL und denselben Einstellungen für Device und Area aus. Für Desktop-Apps verwenden Sie die Quelle Custom Area in Auto Capture. Die Auswahl öffnet sich erneut auf dem gespeicherten Bereich, sodass die zweite Aufnahme dasselbe Rechteck verwendet.

Häufige Fehler

• Eine Retina-Aufnahme mit einer 1x-Aufnahme vergleichen. Jeder Pixel unterscheidet sich in der Größe.
• Zwischen den Aufnahmen den Browser-Zoom, das Design oder die Fenstergröße ändern.
• Vergessen, das „Vorher“-Bild aufzunehmen, bis die Änderung bereits live ist.
• Die beiden Bilder unterschiedlich zuschneiden.

Immer wieder dieselben Screenshots?

Speichern Sie eine URL-Liste in der Website-Screenshot-Automatisierung und führen Sie sie vor und nach jedem Release erneut aus.

Häufige Fragen

Sollte ich für Vergleichspaare JPG oder PNG verwenden?

PNG. Verlustbehaftete Kompression erzeugt kleine Abweichungen, die in Pixelvergleichen sichtbar werden.

Wie finde ich kleine Unterschiede?

Laden Sie beide Dateien in Compare Images, um geänderte Pixel hervorzuheben.

Quellen

• Screenshot (Wikipedia)

Weiterführende Ressourcen

• Optionen für Website Capture: Geräte-, Bereichs- und Warteeinstellungen.
• Aufnahmequellen: eine gespeicherte Custom Area wiederverwenden.
• Stitch Screenshots: zwei Bilder zu einer Datei zusammenfügen.