Produktablauf mit automatischen Screenshots auf dem Mac dokumentieren

Ein Produktablauf zeigt dem Leser, wie ein Ablauf von Anfang bis Ende aussieht: Registrierung, erstes Projekt, eine neue Funktion. Zeitgesteuerte Screenshots eignen sich besonders, wenn der Ablauf Scrollen, Animationen oder Wartezeiten enthält. Eine klickgesteuerte Aufnahme würde die Bildschirme dazwischen auslassen.

Dieser Beitrag verwendet Temposhot Auto Capture auf einem Mac. Die Aufnahme erfolgt in einem festen Intervall. Danach werden die brauchbaren Frames zu einer bearbeiteten Anleitung zusammengestellt.

Die Abschnitte folgen einem durchgehenden Beispiel. Der Ablauf heißt „Ersten Board erstellen und teilen“ in einer Web-App und dauert etwa 105 Sekunden. Ein Lauf mit 70 Frames im Abstand von 1,5 Sekunden ergab eine Anleitung mit 12 Seiten.

1. Einen Produktablauf auswählen

Wählen Sie einen Ablauf mit klarem Anfang und Ende, etwa „Ersten Board erstellen und teilen“. Ein Ablauf über das gesamte Produkt wird zu einer langen Galerie, die niemand vollständig durchsieht.

Notieren Sie neben dem Ablauf die Zielgruppe: einen Interessenten, der das Produkt bewertet, einen neuen Nutzer oder einen Kollegen, der ein Release kennenlernt. Die Zielgruppe bestimmt, welche Bildschirme wichtig sind und wie ausführlich Sie sie erklären.

Den Ablauf vor der Aufnahme abschätzen

Ein Ablauf mit 8 bis 15 Seiten lässt sich in einer Sitzung gut lesen. Zählen Sie die Bildschirme, die der Leser sehen muss, nicht die Klicks. Der Board-Ablauf hat 12 Bildschirme: leeres Dashboard, Dialog für ein neues Board, Boardname, Vorlagenauswahl, leeres Board, erste Karte, Kartendetails, Share-Schaltfläche, Einladungsdialog, Rollenmenü, Bestätigung der Einladung und das geteilte Board.

Liegt die Anzahl über etwa 20, teilen Sie den Ablauf auf. „Board erstellen“ und „Board teilen“ funktionieren als zwei Abläufe, die aufeinander verweisen. Jeder Teil hat dann einen eigenen Anfang und ein eigenes Ende. Ein Release, das das Teilen ändert, betrifft nur den zweiten Teil.

Die Tiefe an die Zielgruppe anpassen

Ein Interessent braucht das Ergebnis jedes Bildschirms und wenig Detail. Ein neuer Nutzer braucht die Feldnamen und die Werte, die er eingeben muss. Ein Kollege, der ein Release kennenlernt, braucht nur die geänderten Bildschirme, mit dem alten Verhalten in der Beschreibung.

Dieselben 70 Frames können alle drei Zielgruppen bedienen. Der Unterschied liegt darin, welche Frames zu Seiten werden und wie lang die Beschreibungen sind.

2. Eine saubere Testumgebung vorbereiten

Ein Ablauf zeigt viel vom Bildschirm auf einmal, deshalb ist der Inhalt der Daten wichtig.

• Verwenden Sie ein Demokonto mit realistischen Beispieldaten: Projektnamen, einige Elemente und ein Profilbild, das keine echte Person zeigt.
• Legen Sie eine Fenstergröße fest und behalten Sie sie bei. Ein Aufnahmebereich in einem gängigen Seitenverhältnis, etwa 16:9 mit 1600 × 900, passt auf Folien und in Dokumente.
• Schließen Sie andere Apps, blenden Sie das Dock aus, falls es in den Bereich ragt, und aktivieren Sie einen Fokusmodus in macOS.
• Proben Sie den Ablauf einmal, damit Sie die Pausen kennen.

Fenster und Bereich festlegen

Eine Anleitung wirkt geschlossen, wenn jede Seite dieselbe Größe und denselben Aufbau hat. Stellen Sie das Browserfenster einmal ein und ziehen Sie den Aufnahmebereich darüber mit der Voreinstellung 16:9 und 1600 × 900. Aktivieren Sie Lock aspect, damit eine spätere Anpassung das Seitenverhältnis beibehält.

Passt die Voreinstellung nicht auf das Display, skaliert Temposhot sie herunter und behält das Seitenverhältnis bei. Auf einem kleineren Laptop-Display prüfen Sie vor dem Start die Größe im Overlay, weil ein skalierter Bereich kleinere Frames erzeugt.

Benachrichtigungen und private Fenster ausschließen

Auto Capture speichert alles, was in der Quelle sichtbar ist. Ein Benachrichtigungsbanner, das während des Laufs in den Aufnahmebereich gleitet, landet in mehreren Frames. Ein Fokusmodus in macOS unterdrückt die meisten Banner. Das Schließen von Chat- und Mail-Apps entfernt den Rest.

Eine Quelle Windows erfasst ein einzelnes App-Fenster, auch wenn sich andere Fenster davor schieben. Ein Custom Area erfasst den Bereich so, wie er aussieht, einschließlich aller Fenster, die ihn verdecken. Bei einem Ablauf in einem Browserfenster ist Custom Area nur dann die bessere Wahl, wenn sich während des Laufs nichts über den Bereich öffnet.

Proben und Wartezeiten notieren

Die Probe zeigt, an welchen Stellen das Produkt den Leser warten lässt. Im Board-Ablauf lädt die Vorlagengalerie etwa 2 Sekunden, und die Bestätigung der Einladung erscheint etwa 1 Sekunde nach Send. Diese Wartezeiten bestimmen das Intervall und wie lange Sie auf jedem Bildschirm bleiben.

3. Zeitgesteuerte Aufnahme konfigurieren

1. Auto Capture öffnen

   Drücken Sie Command+1, um Auto Capture zu öffnen.

2. Quelle auswählen

   Wählen Sie Windows für ein App-Fenster oder Custom Area, um einen festen Bereich aufzuziehen. Die Bereichsauswahl bietet Voreinstellungen wie 16:9 1600×900 und Lock aspect.

3. Stoppbedingung festlegen

   Wählen Sie Screenshots mit einer Anzahl, die den Ablauf abdeckt, oder Duration für eine feste Dauer. Der Standard sind 5 Screenshots.

4. Intervall festlegen

   Ein Interval von 1 bis 2 Sekunden passt zu den meisten Abläufen. Der Standard ist 1 Sekunde.

5. Key press leer lassen

   Sie steuern das Produkt von Hand, daher muss zwischen den Aufnahmen keine Taste gesendet werden.

6. Countdown beibehalten

   Der Standard-Countdown von 3 Sekunden gibt Ihnen Zeit, zum Produktfenster zu wechseln.

Die Voreinstellung Quick Demo (5 Screenshots, 1 Sekunde, keine Taste, 3 Sekunden Countdown) ist ein Ausgangspunkt. Mehr als die kostenlose Anzahl an Screenshots pro Sitzung erfordert Pro. Der Leitfaden zur automatisierten Aufnahme erklärt jede Einstellung.

Einstellungen für den Board-Ablauf

Die Probe dauerte etwa 95 Sekunden. Bei einem Intervall von 1,5 Sekunden ergibt das etwa 63 Frames. Deshalb wurde die Stoppbedingung auf 70 Screenshots gesetzt, um einen Puffer zu haben. Der Countdown wurde auf 5 Sekunden erhöht, weil das Wechseln zum Browser und das Positionieren des Zeigers länger als 3 Sekunden dauert.

Geben Sie das Intervall als 1500 Millisekunden oder als 1,5 Sekunden ein. Beide Einheiten werden akzeptiert. Speichern Sie das Setup mit Save Current Setup unter einem Namen wie „Ablauf 70 Frames 1,5 s“. Eine Voreinstellung speichert Stoppbedingung, Intervall, Tastenbetätigung und Countdown, aber nicht die Quelle. Der Aufnahmebereich wird daher bei jedem Lauf neu gewählt.

Das Intervall anhand des langsamsten Bildschirms wählen

Das Intervall sollte kürzer sein als der kürzeste Bildschirm, den der Leser sehen muss, und lang genug, damit sich Frames nicht stapeln. Ein Intervall von 1 Sekunde bei einem Ablauf von 105 Sekunden ergibt etwa 105 Frames, die meisten davon nahezu identisch. Ein Intervall von 3 Sekunden ergibt 35 Frames, kann aber das Rollenmenü verpassen, das etwa 2 Sekunden geöffnet ist.

Für den Board-Ablauf erfasste ein Intervall von 1,5 Sekunden jeden Bildschirm mindestens einmal. Zählen Sie nach dem Lauf die Frames pro Bildschirm. Hat ein wichtiger Bildschirm nur einen Frame, verkürzen Sie das Intervall oder bleiben Sie beim nächsten Mal länger auf diesem Bildschirm.

4. Den Ablauf in gleichmäßigem Tempo durchlaufen

Wählen Sie Start Capture (im Aufnahmebereich-Auswahl: Start Auto Capture), wechseln Sie während des Countdowns zum Produkt und führen Sie den Ablauf durch. Bleiben Sie auf jedem wichtigen Bildschirm mindestens zwei Intervalle, damit ein Frame ihn vollständig geladen erfasst.

Verwenden Sie Pause capture in der schwebenden Symbolleiste, während Sie einen Fehler korrigieren, und Resume capture, um fortzufahren. Finish capture beendet den Lauf sofort.

Tempo des Beispiellaufs

Zwei Intervalle auf einem Bildschirm bedeuten bei 1,5 Sekunden Intervall etwa 3 Sekunden. Die Eingabe des Boardnamens dauerte länger und erzeugte deshalb 5 Frames. Der letzte zeigt den vollständigen Namen. Die Zeitleiste unten zeigt, wofür der Lauf seine Zeit verwendet hat.

Tastenkürzel während des Laufs

Die schwebende Symbolleiste bleibt sichtbar, während der Browser im Vordergrund ist. Auch die Befehle in der Menüleiste funktionieren. Sie können den Lauf daher starten und beenden, ohne zum Temposhot-Fenster zu wechseln.

In kurzen, gleichmäßigen Schritten scrollen

Scrollende Bildschirme sind der Fall, in dem zeitgesteuerte Aufnahmen am meisten helfen. Gleichzeitig erzeugen sie dort am häufigsten unscharfe oder halb verschobene Frames. Scrollen Sie jeweils etwa eine halbe Bildschirmhöhe und halten Sie zwischen den Scrollvorgängen mindestens ein Intervall an. Jeder Halt liefert dann einen sauberen Frame. Aufeinanderfolgende Frames überlappen, sodass nichts übersprungen wird.

Benötigt eine lange Seite ein einziges hohes Bild statt mehrerer Frames, exportieren Sie die Frames als PNG und fügen Sie sie mit Stitch Screenshots zusammen. Das Werkzeug verbindet die Bilder von oben nach unten und erkennt die Überlappung zwischen ihnen.

Einen Fehler während des Laufs behandeln

Öffnet ein falscher Klick den falschen Dialog, wählen Sie Pause capture, schließen Sie den Dialog, kehren zum letzten guten Bildschirm zurück und wählen Sie Resume capture. Die Frames des Fehlers bleiben in der Sitzung erhalten und werden beim Aufbau des Dokuments übersprungen. Bei einer Stoppbedingung mit Screenshots wird die Zählung dort fortgesetzt, wo sie gestoppt wurde. Die Pause verbraucht so das Budget von 70 Screenshots nicht.

Hat der Fehler die Demodaten verändert, etwa ein Board mit falschem Namen, beenden Sie den Lauf, korrigieren Sie die Daten und starten Sie neu. Ein sauberer zweiter Lauf lässt sich schneller bearbeiten als ein Lauf mit einer Korrektur in der Mitte.

5. Aus den brauchbaren Frames ein Dokument erstellen

Wenn der Lauf endet, zeigt der Ergebnisbereich Capture complete und die Frames. Zeitgesteuerte Aufnahmen erzeugen mehr Frames als Schritte. Wählen Sie deshalb die aus, die die Geschichte erzählen.

Es gibt zwei Wege zum Dokument:

• Create Document im Ergebnisbereich verwendet die gesamte Sitzung. Entfernen Sie überzählige Seiten anschließend im Bereich Pages.
• In Documents (Command+4) öffnen Sie das Menü New Document und wählen Capture History…. Klappen Sie die Sitzung auf, markieren Sie nur die gewünschten Frames und wählen Sie Add selected Frames.

Der zweite Weg ist schneller, wenn Sie weniger als die Hälfte der Frames behalten. Der Leitfaden zu Seiten und Importen behandelt beide Wege.

Welcher Weg bei 70 Frames passt

Der Board-Lauf behielt im ersten Durchgang 14 von 70 Frames, also 20 Prozent. 56 Seiten einzeln zu löschen dauert länger, als 14 Frames zu markieren. Die Auswahl über Capture History… war daher der bessere Weg.

Create Document verwendet immer alle Frames der Sitzung, auch die nicht markierten. Die Checkbox-Auswahl im Ergebnisbereich gilt für die Exporte ZIP, Images, PDF und MP4, nicht für das Dokument.

Den Frame für jeden Bildschirm wählen

Erscheint ein Bildschirm in 3 oder 4 aufeinanderfolgenden Frames, wählen Sie den letzten. Er zeigt den Bildschirm, nachdem das Laden abgeschlossen und der Zeiger zur Ruhe gekommen ist. Bei einem Dialog wählen Sie den Frame, in dem der Dialog vollständig geöffnet ist, nicht den Frame mitten in der Animation.

Nach dem ersten Durchgang waren 2 der 14 Seiten nahezu identische Duplikate des Bildschirms Kartendetails. Nach deren Löschung blieben 12 Seiten übrig, eine pro Bildschirm der Ablaufliste aus Abschnitt 1.

6. Die Seitenanweisungen schreiben

Jede Seite braucht einen Page title, der beschreibt, was der Leser sieht oder tut. Außerdem braucht sie eine kurze Beschreibung, warum der Schritt im Ablauf wichtig ist.

• „Board benennen“: was eingegeben wird und wo.
• „Teammitglieder per E-Mail einladen“: welches Feld und welche Rolle zu wählen sind.
• „Geteiltes Board prüfen“: worauf der Leser achten soll.

Verwenden Sie Framing (F) mit Custom, um jede Seite auf den Bereich des Bildschirms zuzuschneiden, den der Titel beschreibt. Setzen Sie einen Arrow (A) oder ein Rectangle (R) dorthin, wohin der Blick gelenkt werden soll. Zeitgesteuerte Frames enthalten keine Klickposition. Focus on action gilt daher nur für Seiten aus Action Capture.

Titel- und Beschreibungsmuster

Ein Titel benennt einen Bildschirm oder eine Aktion. Die Beschreibung ergänzt den einzugebenden Wert, die zu treffende Auswahl oder das erwartete Ergebnis. Halten Sie Beschreibungen auf zwei Sätze, damit der Screenshot oben auf der PDF-Seite bleibt.

Jede Seite zuschneiden und markieren

Ein Frame mit 1600 × 900 zeigt die ganze App. Die meisten Seiten betreffen aber nur einen Dialog oder ein Feld. Custom im Framing-Editor legt den sichtbaren Bereich fest, Frame size zeigt Breite und Höhe. Das Quell-Frame bleibt unverändert, Show full image stellt es wieder her.

Eine Markierung pro Seite reicht meist aus. Ein Arrow zeigt auf ein Bedienelement, das der Leser finden muss. Ein Rectangle umrahmt ein auszufüllendes Feld. Stellen Sie im Object Inspector Width so ein, dass die Umrandung in Exportgröße sichtbar ist, und verwenden Sie auf jeder Seite dieselbe Farbe.

7. Anleitung exportieren und prüfen

Wählen Sie Export PDF für ein Dokument, das Sie senden oder anhängen. Mit Pro ergänzt der PDF-Dialog eine Titelseite, Schrittnummern und Seitenzahlen. Öffnen Sie More export formats für PNG-, JPG- oder WebP-Seiten, die Sie in Folien oder ein Wiki einfügen. Alternativ exportieren Sie ein ZIP-Paket mit document.json.

Prüfen Sie den Export in der endgültigen Größe. Kontrollieren Sie, dass jeder Titel zu seinem Screenshot passt und kein echter Kundendatensatz in ein Frame gelangt ist. Der Leitfaden zu Dokument-Exporten listet alle Formate auf.

Das PDF in Endgröße prüfen

Die PDF-Vorschau im Exportdialog zeigt jede Seite so, wie sie gespeichert wird. Blättern Sie alle 12 Seiten durch und prüfen Sie drei Dinge: Der Titel passt zum Screenshot, der Zuschnitt zeigt das Bedienelement, und kein Demodatum wirkt wie echte Daten. Bei der Standardeinstellung Fit without enlarging bleibt eine eng zugeschnittene Seite in ihrer Größe, statt vergrößert und unscharf zu werden.

Die Fußzeile fasst das Ergebnis zusammen, zum Beispiel „12 steps · A4 · Landscape“. Weicht die Anzahl von der Ablaufliste ab, fehlt eine Seite oder eine Seite ist doppelt vorhanden.

Dateien aus dem Board-Ablauf

Die Anleitung zum Board wurde zweimal exportiert: einmal als PDF für E-Mails und einmal als PNG-Seiten für eine Folienpräsentation. Bilddateien werden nach den Seitentiteln benannt. Die Folien lassen sich daher über den Dateinamen in die richtige Reihenfolge bringen.

PNG-Seiten sind verlustfrei und halten Schrift in Folien scharf. JPG-Seiten sind kleiner und eignen sich für ein Wiki mit Upload-Limit. Für ein einzelnes PDF, das diese Anleitung mit anderen kombiniert, fügt das Browser-Werkzeug Merge PDF exportierte Dateien zusammen.

Dieselben Frames als kurzes Video

Der Ergebnisbereich exportiert MP4 aus den gewählten Frames in ihrer Reihenfolge. Die Bildrate bestimmt die Länge des Videos. Bei den 70 Board-Frames ergibt sich die Länge aus der Anzahl der Frames, geteilt durch die Bildrate.

Bei 5 fps, der niedrigsten Einstellung, bleibt jedes Frame 0,2 Sekunden sichtbar. Ein Bildschirm ist daher nur so lange zu sehen, wie er über mehrere Frames des Laufs reicht. Wenn Sie bei einem zeitgesteuerten Lauf 3 Sekunden auf jedem Bildschirm bleiben, ergeben sich 2 Frames pro Bildschirm, also 0,4 Sekunden Video.

Für eine langsamere Abfolge der 14 ausgewählten Frames wählen Sie sie aus und exportieren ein GIF über Export settings…. GIF frame delay erlaubt bis zu 1 Sekunde pro Frame, sodass 14 Frames 14 Sekunden laufen. Das Browser-Werkzeug Images to Video ist eine weitere Option für eine Diashow aus exportierten PNG-Seiten.

Die Anleitung aktuell halten

Anleitungen zeigen viele Bildschirme und veralten mit jedem Release. Bewahren Sie die Sitzung und das Dokument auf dem Mac auf, auf dem sie entstanden sind. Vermerken Sie die Produktversion auf dem Deckblatt und nehmen Sie nur die Bildschirme neu auf, die sich geändert haben. Der Beitrag über Screenshot-Dokumentation aktuell halten beschreibt eine Prüfroutine.

Ist ein Ablauf klickgesteuert, ohne Wartezeiten oder Scrollen, erzeugt Action Capture eine Seite pro Klick statt zeitgesteuerter Frames.

Nur geänderte Seiten aktualisieren

Ändert ein Release den Einladungsdialog, benötigen nur 3 der 12 Seiten neue Screenshots. Den gesamten Ablauf erneut zu starten und die Anleitung neu zu bauen, wiederholt die Arbeit an 9 Seiten, die sich nicht geändert haben.

Neue Seiten aus einer Aufnahme lassen sich nach der aktuell ausgewählten Seite einfügen. Wählen Sie deshalb vorher die Seite aus, die vor dem geänderten Abschnitt steht. Exportierte Dateien aktualisieren sich nicht von selbst. Exportieren Sie nach jeder Änderung erneut.

Das Aufbewahrungslimit der Sitzungen beachten

Capture History behält standardmäßig 30 Sitzungen. Die Obergrenze lässt sich unter Settings > History zwischen 1 und 500 einstellen. Das Dokument behält eigene Kopien jedes verwendeten Bildes. Die Anleitung bleibt daher erhalten, wenn ihre Quellsitzung entfernt wird. Die 70 Roh-Frames bleiben nicht erhalten. Exportieren Sie sie daher als ZIP, falls eine spätere Bearbeitung einen nicht ausgewählten Frame benötigt.

Häufig gestellte Fragen

Ist zeitgesteuerte oder klickgesteuerte Aufnahme für Abläufe besser?

Zeitgesteuerte Aufnahme eignet sich für Abläufe mit Scrollen, Laden und Animationen. Klickgesteuerte Aufnahme eignet sich für formulargesteuerte Aufgaben, bei denen jeder Klick ein Schritt ist. Siehe manuelle Screenshots im Vergleich zur klickgesteuerten Aufnahme.

Kann ich stattdessen ein Video aus den Frames erstellen?

Ja. Der Ergebnisbereich exportiert MP4 mit 5 bis 60 fps. Ein kurzes MP4 eignet sich für eine Demo. Ein Dokument eignet sich für eine Anleitung, die Leser in ihrem eigenen Tempo durchgehen.

Welches Intervall sollte ich verwenden?

Für die meisten Oberflächenabläufe 1 bis 2 Sekunden. Kürzere Intervalle erfassen Übergänge, erzeugen aber mehr Frames, die sortiert werden müssen.

Wie viele Screenshots sollte die Stoppbedingung zulassen?

Teilen Sie die Probedauer durch das Intervall und addieren Sie etwa 10 Prozent. Eine Probe von 95 Sekunden bei 1,5 Sekunden ergibt etwa 63 Frames. Mit 70 bleibt daher ein Puffer.

Kann der Ablauf eine Seite hinter einer Anmeldung aufnehmen?

Ja, in Auto Capture. Das Werkzeug erfasst den Bildschirm so, wie er angezeigt wird. Melden Sie sich daher vor dem Lauf im Browser am Demokonto an. Website Capture unterscheidet sich: Es lädt Seiten in einer privaten Sitzung ohne die Anmeldung Ihres Browsers.

Aus wiederholbaren Screenshots fertige Arbeit machen

Screenshot-Automatisierung auf dem Mac nimmt den Ablauf in einem festen Intervall auf und übergibt die Frames an ein bearbeitbares Dokument. Laden Sie Temposhot herunter und nehmen Sie Ihren ersten Ablauf auf.