Screenshots in der Dokumentation: aufnehmen, markieren, schwärzen

Wann ein Schritt einen Screenshot braucht

Ein Screenshot gehört in einen Schritt, wenn der Leser eines von drei Dingen tun muss:

• ein Bedienelement auf einem vollen Bildschirm finden (ein Symbol ohne Beschriftung, ein Menüpunkt drei Ebenen tief);
• vergleichen, was er sieht, mit dem, was er sehen sollte (der richtige Datensatz ist offen, der richtige Tab aktiv);
• ein Ergebnis bestätigen (der Dialog, der sich öffnet, der Hinweis „Gespeichert“).

Lassen Sie ihn weg bei Schritten wie „Drücken Sie Enter“ oder „Geben Sie die Bestellnummer ein“. Ein Bild bringt dort mehr Scrollen, keine Information.

Opensource.com warnt, dass ein Screenshot unklares Schreiben kaschieren kann, und rät, die Dokumentation zuerst ohne Screenshots zu schreiben und nur dort einen einzufügen, wo Worte nicht reichen. Der Test: Decken Sie das Bild ab. Ergibt der Schritt dann keinen Sinn mehr, muss der Satz besser werden, nicht das Bild.

Die Arbeitsteilung: ein Screenshot pro Schritt, der Satz trägt die Handlung, das Bild zeigt, wo. Wie dieser Satz geschrieben wird, ist ein eigenes Thema: Schritt-für-Schritt-Anleitungen schreiben.

Aufnehmen: was ins Bild gehört

• Das Fenster, nicht der Desktop. Nehmen Sie den sichtbaren Teil der Seite im Browser auf. Taskleiste, andere Fenster und die Uhr sagen dem Leser nichts und lassen das Bild schneller alt aussehen.
• Keine ganzseitigen Aufnahmen für einen Schritt. In einer 4000 Pixel langen Aufnahme der ganzen Seite geht die Schaltfläche unter, um die es im Schritt geht. Ganzseitige Aufnahmen gehören auf Referenzseiten, die einen ganzen Bildschirm beschreiben.
• Nach dem Klick aufnehmen. Warten Sie, bis die Seite fertig geladen ist, damit das geöffnete Menü oder der erschienene Dialog im Bild ist.
• Ein Testkonto verwenden. Nehmen Sie, wo es geht, mit Testkunden und einem Testbenutzer auf. Am einfachsten zu schwärzen sind Daten, die nie auf dem Bildschirm waren.
• Eine Fenstergröße und Zoomstufe für die ganze Anleitung. Screenshots mit 100 % und mit 125 % Zoom sehen nebeneinander aus wie zwei verschiedene Programme.

Screenshots in Chrome und auf dem Chromebook

Auf einem Chromebook drücken Sie die Screenshot-Taste oder Umschalt + Strg + Fenster anzeigen und wählen dann einen Screenshot des ganzen Bildschirms, eines Teilbereichs oder eines Fensters. Die Bildschirmaufnahme finden Sie laut Googles Chromebook-Hilfe auch in den Einstellungen unten rechts auf dem Bildschirm.

Chrome selbst kann eine ganze lange Seite aufnehmen: Im Gerätemodus der DevTools steht im Menü „Weitere Optionen“ der Befehl Capture full size screenshot (so heißt er in der englischen Oberfläche), wie Chrome for Developers beschreibt. Für eine Referenzseite ist das das richtige Werkzeug, für einen Schritt aus dem oben genannten Grund das falsche. Wo es scheitert, zeigt Screenshot der ganzen Seite in Chrome erstellen.

Auf den Arbeitsbereich zuschneiden

Schneiden Sie auf den Bereich zu, in dem der Schritt passiert, und lassen Sie genug drumherum, damit sich der Leser orientiert: eine Bereichsüberschrift, den Rand der Seitenleiste, die Schaltfläche neben dem Ziel. Archbee formuliert es als das Element, mit dem gehandelt wird, plus gerade genug Oberfläche drumherum zur Orientierung.

Hier derselbe Schritt, aus dem CRM einer erfundenen Firma, vor und nach dem Zuschneiden.

Zwei Arten, es zu übertreiben:

• Nur das Feld ausschneiden. Ein Auswahlmenü ohne Umgebung könnte überall sein.
• Das Bild so weit verkleinern, dass es auf die Seite passt und die Beschriftungen unlesbar werden. Schneiden Sie lieber enger zu.

Behalten Sie die Originalaufnahme. Einen Zuschnitt, den Sie rückgängig machen können, können Sie später neu setzen, ohne die Aufgabe noch einmal zu erledigen.

Eine Markierung pro Schritt

• Eine Markierung pro Schritt, auf dem, was angeklickt oder ausgefüllt wird. Trägt sie die Nummer des Schritts, sind Bild und Satz verbunden, wie die „3“ in den Screenshots oben.
• Ein Ring oder Rahmen um das Ziel ist besser als ein Pfeil quer über den Bildschirm. Pfeile nur für Dinge ohne klare Kante, etwa die Lücke zwischen zwei Spalten.
• Eine Farbe und eine Linienstärke in der ganzen Anleitung. Eine Markenfarbe geht, wenn sie sich von den Farben der App abhebt.
• Höchstens zwei oder drei Markierungen. Archbee rät, Markierungen auf das Nötigste zu beschränken („limit annotations to what's essential“). Braucht ein Screenshot mehr, sind es meist zwei Schritte.
• Kurze Beschriftungen oder keine. Der Satz des Schritts erklärt; die Markierung zeigt.

Vor dem Teilen schwärzen

Bevor eine Anleitung Ihre Hände verlässt, prüfen Sie jeden Screenshot auf:

• Namen von Kunden und Kollegen, E-Mail-Adressen, Telefonnummern, Kundennummern, also personenbezogene Daten im Sinne der DSGVO;
• Tokens, Sitzungs-IDs und Suchbegriffe in der Adresszeile;
• Lesezeichen, das Profilbild und die anderen offenen Tabs;
• Benachrichtigungen, die im Moment der Aufnahme eingeblendet wurden.

Weichzeichnen ist kein Schwärzen für Geheimnisse

Der übliche Rat lautet: „Sensible Stellen weichzeichnen.“ Für kurzen Text reicht das nicht. 2022 veröffentlichte Bishop Fox Unredacter, ein Werkzeug, das verpixelten Text zurückgewinnt: Es rät ihn Zeichen für Zeichen, verpixelt jeden Versuch auf dieselbe Weise und behält den, der passt. Weichzeichnen ist ein ähnlicher Filter: Es verschmiert die Pixel, statt sie zu entfernen, und ein kurzes Wort in einer bekannten Schrift lädt zum selben Raten ein.

Eine Faustregel:

• Geheimnisse (Passwörter, API-Schlüssel, Konto- und IBAN-Nummern, Einmalcodes): wegschneiden, in einem flachen Bild mit einer deckenden Fläche abdecken oder gar nicht erst aufnehmen (Testkonto verwenden).
• Namen, Gesichter und Hintergrund: Weichzeichnen genügt. Errät jemand aus einer unscharfen Zeile den Vornamen eines Kunden, ist wenig verloren.

Prüfen Sie, was die Unschärfe Ihres Werkzeugs tut, bevor Sie sich darauf verlassen. Bietet es nur Weichzeichnen und keinen deckenden Balken, sind Zuschneiden oder ein Testkonto die Antwort für Geheimnisse.

Einmal schwärzen, für jeden Schritt

Derselbe Name taucht in Schritt 2 auf, wieder in Schritt 3 und noch einmal in Schritt 7, in einer Liste, auf die Sie nicht genau geschaut haben. Wer Bild für Bild schwärzt, übersieht den dritten. Wenn Ihr Werkzeug es kann, ziehen Sie die Unschärfe einmal und lassen Sie sie für jeden Screenshot desselben Bildschirms gelten; sonst gehen Sie die fertige Anleitung nach jedem geschwärzten Namen durch.

Prüfen Sie das Ergebnis dann dort, wo der Leser es sieht: im exportierten PDF oder auf der Webseite, in voller Vergrößerung, nicht im Editor. In einem PDF kann unter einem schwarzen Kasten über echtem Text der Text markierbar bleiben; sicher ist nur ein flaches Bild.

Benennen, beschreiben und aktuell halten

• Alternativtext sagt, was der Screenshot für diesen Schritt zeigt, „Einstellungen, Schaltfläche Speichern markiert“, nicht „Screenshot“. Das Bilder-Tutorial des W3C verlangt die Information, die das Bild vermittelt, und das ist selten eine wörtliche Beschreibung.
• Dateinamen beschreiben den Inhalt, wie Documatt empfiehlt (disabled-save-button.png statt image3712.jpg). Ergänzen Sie ein Datum oder eine Version, damit veraltete auffindbar sind: billing-refund-step-3-2026-09.png.
• PNG oder WebP, kein JPEG. Documatts Begründung: Verlustbehaftete Kompression lässt Screenshots von Text verschwommen aussehen.
• Ein Aufnahmedatum und eine verantwortliche Person stehen in der Anleitung. Web-Apps ändern ihre Oberfläche ohne Vorwarnung; ändert sich der Bildschirm eines Schritts, nehmen Sie diesen Schritt neu auf, nicht die ganze Anleitung.
• Ein Satz pro Sprache. Eine deutsche Anleitung braucht Screenshots der deutschen Oberfläche. Documatt empfiehlt ein Sprachkürzel im Dateinamen (save-button.de.png).

Checkliste, bevor eine Anleitung rausgeht

1. Jeder Screenshot ist nötig: Der Schritt lässt sich nicht allein nach dem Satz ausführen.
2. Jeder ist auf den Arbeitsbereich zugeschnitten, mit genug Umgebung zur Orientierung, und in Seitenbreite lesbar.
3. Jeder hat eine Markierung, mit der Nummer des Schritts, wo das Werkzeug es erlaubt.
4. Kein Name, keine E-Mail, keine Nummer und kein Geheimnis ist zu sehen, das nicht zu sehen sein soll; Geheimnisse sind weggeschnitten oder nie aufgenommen.
5. Die Schwärzung wurde in der exportierten Datei geprüft, in voller Vergrößerung.
6. Alle Screenshots haben dieselbe Fensterbreite und Zoomstufe.
7. Jeder hat einen Alternativtext, der sagt, was er für seinen Schritt zeigt.
8. Dateinamen beschreiben den Inhalt und tragen ein Datum oder eine Version.
9. Die Anleitung nennt das Aufnahmedatum und die Person, die neu aufnimmt, wenn sich der Bildschirm ändert.

Ohne jedes Bild von Hand zu bearbeiten

Aufnehmen, Zuschneiden, Nummerieren und Schwärzen von Hand dauert länger als die Aufgabe, die Sie dokumentieren. Ein Klick-Rekorder, eine Browser-Erweiterung, die bei jedem Klick einen Screenshot macht, erledigt das meiste während der Arbeit: eine nummerierte Markierung auf dem Angeklickten, einen Zuschnitt und eine Unschärfe, die Sie einmal ziehen.

Prüfen Sie bei der Auswahl vier Dinge:

• ob seine Unschärfe dem Bildschirm in spätere Schritte folgt oder auf jedem Bild neu gezogen werden muss;
• welche Art Unschärfe es verwendet und ob es einen deckenden Balken für Geheimnisse hat;
• ob es pro Schritt das sichtbare Fenster aufnimmt oder die ganze Seite scrollt;
• wohin die Screenshots gehen: Werden sie auf den Server eines Anbieters hochgeladen, geschieht das Schwärzen erst, nachdem die Daten Ihren Rechner schon verlassen haben.

Quellen