Wir machen Sie darauf aufmerksam, dass unsere Website über Cookies personenbezogene Daten von Ihnen erhebt. Mehr Informationen Zustimmen und fortfahren

Fachzeitschrift 'technische kommunikation' Ausgabe 2/2017

Online-Information

Screenshots mit Effekt

Ute Mitschke

In vielen technischen Produkten steckt Software. Kein Wunder also, wenn in Anleitungen Screenshots auftauchen, um Bedienschritte zu erläutern. Nicht immer ist die grafische und inhaltliche Qualität besonders gut. Doch mit einigen Handgriffen lassen sich umfangreiche Verbesserungen erzielen.

Beinahe jeder Technische Redakteur nutzt Screenshots oder kleine grafische Darstellungen. Mit deren Hilfe lassen sich einfache Sachverhalte erklären, ein Ablaufplan oder die Zuordnung von Komponenten darstellen. Das Wesentliche an diesen Abbildungen ist der Einsatz von inhaltstragendem Text gemeinsam mit grafischen Elementen. Häufig werden dafür Pixelgrafiken verwendet, die weder im Dokumentationsprozess leicht handhabbar sind, noch für moderne Medien ausreichen.

Screenshots sind Darstellungen von Dialogfeldern oder Bildschirmoberflächen, die trotz technischen Fortschritts immer noch auf dieselbe Art entstehen wie vor 25 Jahren. Ihr Erscheinungsbild wird zwar vom Betriebssystem mitbestimmt, hat aber den eigentlichen Informationsgehalt nur wenig verändert. Mit einem Snipping Tool oder einer Tastenkombination entstehen die Screenshots. Sie können so viele Pixel darstellen, wie auf dem Bildschirm abgebildet werden.

Screenshots definieren

Bei Screenshots handelt es sich um Reihen von Bildpunkten mit klar abgegrenzten Farbflächen, Symbolen und Text. Und genau daraus ergeben sich die Herausforderungen an die Darstellung der grafischen Information:

  • Der Text muss unverwechselbar und klar lesbar sein. Das verlangt nach einer Detailschärfe im Bereich einzelner Pixel.
  • Die Grafik sollte sich in mobilen Medien responsiv verhalten und automatisch an die Bildschirmgröße anpassen.
  • Der komplette Inhalt sollte barrierefrei interpretierbar, der Text vorlesbar sein.

Zusätzlich ergeben sich Anforderungen an die Handhabung von Grafiken, die inhaltstragend zur Beschreibung in der Dokumentation genutzt werden:

  • Sie werden häufig und kurzfristig geändert. Deshalb müssen sie in der Technischen Dokumentation leicht auffindbar, austauschbar und überprüfbar sein.

Da in den Grafiken Text als wesentlicher Inhalt genutzt wird, müssen sie in viele Sprachen übersetzt dargestellt werden. Auch die Grafiken, deren Inhalt übersetzt wurde, müssen sich leicht auffinden lassen und ihre Position im Text muss jederzeit überprüfbar sein. Aus diesen ganzen Anforderungen lassen sich mehrere Maßnahmen für Vorbereitung und Erstellung von Screenhots und ähnlichen Abbildungen ableiten.

Pixelqualität verbessern

Vergleicht man die Bildschirmauflösung von Geräten, auf denen Dokumentation dargestellt wird, dann lässt sich erkennen: Die Auflösung (die Anzahl der Bildpunkte pro Maßeinheit) hat sich gravierend weiterentwickelt. Das führt dazu, dass Screen­shots, die auf einem normalen Computerbildschirm aufgenommen wurden, auf mobilen Geräten zu kleinen Farbklecksen verwandelt werden. Dazu ein Beispiel: Ein Full-HD-Monitor hat eine Bildschirmdiagonale von 27 Zoll (66 Zentimeter), 1.920 x 1.080 Pixel, Auflösung 72 Pixel per Inch – kurz „ppi“ oder auch Punktedichte pro Inch. Ein Smartphone-Display hat bei einer Bildschirmgröße von 4,8 Zoll (12 Zentimeter) mit 1.280 × 720 Pixeln eine Auflösung von 306 Pixeln per Inch. Grob gerechnet heißt das, dass auf dem Smartphone dieselbe Pixelgrafik nur noch ein Drittel so groß ist (Abb. 01). Daraus ergibt sich das erste Ziel: Verbessern der Darstellung und Vergrößern der Anzahl Pixel eines Screenshots, damit die Grafik für den Betrachter ausreichend groß ist.

Abb. 01 Fehlende Anpassung bei zu kleinen Pixelgrafiken.
Quelle Ute Mitschke

Aufnahmequalität erhöhen

Auf Bildschirmen, die von einem Windows-Betriebssystem angesteuert werden, kommt das so genannte Cleartype zum Einsatz. Die Funktion soll Oberflächentexte visuell verbessern. Mit Cleartype werden allerdings die Pixel farbig, die einen Buchstaben ergeben. Möchte der Redakteur die vom Bildschirm aufgenommenen Pixel nachträglich vervielfachen und die Buchstaben in Kontrast und Kantenschärfe verbessern, dann ist es schwierig, wenn ein Buchstabe aus vielen farbigen Pixeln zusammengesetzt ist. Wird Cleartype deaktiviert, dann werden alle Bildpunkte der Buchstaben nur in Graustufen angezeigt. Sie finden die Einstellungen zu Cleartype in der Systemsteuerung unter „Erweiterte Anzeige-Einstellungen“.

Abb. 02 Vergrößerte Darstellung von Text mit und ohne Cleartype.
Quelle Ute Mitschke

Anzahl der Pixel vergrößern

Die Herausforderung besteht darin, nicht einfach nur ein Pixel durch mehrere Pixel zu ersetzen. Dieser Schritt würde dazu führen, dass die Pixel, die die Buchstaben des Textes darstellen, wie Treppenstufen in der Abbildung stehen. Vielmehr ist es die Aufgabe, die Buchstaben mit mehr Pixeln darzustellen und gleichzeitig die Kanten zu glätten. Die Rundungen sollen dadurch deutlicher erkennbar und der Kontrast der Buchstaben vor dem einfarbigen Hintergrund höher sein.

Um die Anzahl der Pixel zu vergrößern, bieten sich unterschiedliche Programme an. Selbst mit Microsoft Paint kann die Aufgabe erledigt werden. Adobe Photoshop bietet unterschiedliche Methoden an, um Pixel zu vervielfältigen und die Konturen zu schärfen. Außerdem lohnt sich ein Test mit Adobe RoboScreenCapture. Dieses Programm wird mit jeder RoboHelp- oder FrameMaker-Version installiert und findet sich im jeweiligen Programmordner.

RoboScreenCapture kann ähnlich wie das Programm SnagIt Bildschirmausschnitte von Programmen, Videospielen oder Filmen aufzeichnen und weiterverarbeiten. Seine Funktion zum Skalieren eines Bildes liefert gute Ergebnisse für die Darstellung von Buchstaben. Mit einem Bildbearbeitungsprogramm lassen sie sich anschließend weiter verfeinern.

Farbmodus umwandeln

Grafiken im RGB-Farbmodus werden beim Drucken oft nicht farbgetreu wiedergegeben. Das liegt daran, dass der Druckertreiber selbstständig aus einer Kombination von Rot, Grün und Blau die Zusammenstellung von Cyan, Magenta, Yellow und Schwarz berechnen muss. Das führt dazu, dass alle Grautöne und die schwarzen Bild­anteile aus allen vier Farbkanälen zusammengesetzt werden. Besonders bei der Ausgabe mit einem Tintenstrahldrucker oder im Offsetdruck bedeutet das, dass auf einfachem Papier zu viel Farbe auf kleinstem Raum aufgetragen wird. Die schwarzen Pixel, zum Beispiel für Text, werden mit vierfacher Farbe übereinander gedruckt und die Kanten verlaufen. Detailschärfe geht verloren, im schlimmsten Fall ist eine Abbildung nicht mehr lesbar und verliert ihren Zweck.

Will ein Technischer Redakteur eine Anleitung mit Screenshots drucken, dann empfiehlt es sich, sie von RGB nach CMYK zu konvertieren. Adobe Acrobat übernimmt zum Beispiel diese Aufgabe. Für die Umwandlung nutzt der Redakteur die Konvertierungsfunktion aus dem Werkzeugbereich der Druckvorstufe und aktiviert die Checkboxen für die Konvertierungsoptionen. Sie sind für die richtige Umwandung der schwarzen Bild­anteile zuständig (Abb. 03).

 

Abb. 03 Die Konvertierung in Acrobat bewirkt, dass Schwarz und Grautöne ausschließlich im Schwarz-Kanal landen.
Quelle Ute Mitschke

Ohne Verluste komprimieren

Nicht nur das Datenformat, in dem eine Grafik gespeichert wird, komprimiert eine Abbildung. Das Gleiche kann beim Erzeugen eines PDFs passieren. Wird ein dafür ungeeignetes Distiller-Profil verwendet, dann leiden Qualität und Detailschärfe deutlich.

Hat der Technische Redakteur die Bildqualität durch Vervielfachen der Pixel und Umwandeln in CMYK mit Schwarzaufbau verbessert, kann das Standard-Profil von Distiller seine Bemühungen wieder zunichte machen. Durch dieses Profil wird die Auflösung reduziert, die Bildqualität auf mittleres JPG-Niveau komprimiert und die Farbe nach sRGB umgewandelt. Abbildung 4 macht dies besonders deutlich.

Abb. 04 Durch JPEG-Komprimierung leidet die Detailschärfe deutlich.
Quelle Ute Mitschke

Oder einfach die Methode ändern

Will der Technische Redakteur die Forderung nach responsiven und vorlesbaren Abbildungen erfüllen, dann muss Text auch grafisch als Text vorhanden sein.

Das klingt nach viel Arbeit. In der Praxis macht sich der Aufwand jedoch schnell bezahlt, weil sich Texte leicht anpassen und übersetzen lassen. Für die Umsetzung ergeben sich verschiedene Möglichkeiten mit ganz eigenen Vorteilen. Welche Methode angewendet wird, hängt davon ab, in welchen Medien die Technische Dokumentation publiziert werden soll. Außerdem gilt es zu bewerten, wie wichtig es ist, im Prozess den vollständigen Zugriff auf die Inhalte in allen Sprachen und Varianten zu haben.

Screenshots aufbauen

Wird eine Software dokumentiert und sind die Bezeichnungen in den Dialogfeldern nicht nur abhängig von den Sprachen, sondern auch von den Kunden, dann sollten die Oberflächen über Variablen gepflegt werden. Dazu können die Abbildungen in Tabellen nachgebaut werden.

In Tabellen mit einem ausreichend feinen Raster werden die Zellen passend verbunden und mit der notwendigen Hintergrundfarbe versehen. Der Technische Redakteur fügt in die Zellen die Variablen ein, die er im beschreibenden Text verwendet. So stimmen die Angaben genau überein.

Mit den passenden Hilfsmitteln können die Texte in den Variablen automatisiert ausgetauscht, angepasst und übersetzt werden. Zusätzlich sind die Darstellungen in Tabellen auch geeignet für den Export nach HTML5, ePub und in Apps, wenn ihre Darstellung durch CSS-Stylesheets kontrolliert wird. Ein weiterer Vorteil der Methode: Der Text lässt sich mit der Suchfunktion finden, auch das Vorlesen funkioniert.

Die Kontrolle über den Inhalt wird dadurch möglich, dass die grafische Umsetzung direkt im Dokument liegt. Die grafische Darstellung von Screenshots mit Tabellen kann in jeder Textverarbeitung, im DTP oder auch in XML-basierten Dokumenten realisiert werden.

Pixelgrafiken nachzeichnen

Mit einer Illustrationsanwendung, zum Beispiel Adobe Illustrator, lassen sich Pixelgrafiken mit abgegrenzten Farbflächen in Vektorgrafiken umwandeln. Wenige Handgriffe reichen dafür. Allerdings werden die Texte nur in Pfade umgewandelt und sind noch nicht durchsuchbar. Es empfiehlt sich, die Texte nachträglich neu einzugeben. Zum Beispiel lassen sich Screenshots aus Windows 10 gut mit der Schrift „Segoe UI“ nachbilden. Sie ist identisch mit der Darstellung im Betriebssystem.

Müssen die Abbildungen nur prinzipiell und nicht in jedem Schnörkel dem Inhalt einer Darstellung entsprechen, dann können Bildschirmausschnitte in Illustrator auch komplett neu erstellt werden. Gut ist es, wenn auch alle Symbole und anderen Abbildungsdetails als Vektoren umgesetzt und nicht als Pixelgrafik platziert werden. Jede Pixelgrafik würde die Skalierbarkeit der so erstellten Vektorgrafik wieder einschränken.

Mit SVG umsetzen

SVG ist eine XML-basierte Beschreibung von 2D-Vektorgrafiken. Für Bildelemente wie Rechtecke, Linien, Ellipsen oder Text stehen eigene XML-Elemente zur Verfügung. Über sie können Attribute für Position, Größe, Farbe oder auch Füllung festgelegt werden. Text in Unicode kann darin gesucht und bearbeitet werden. Auch die Übersetzung der Grafikdatei durch ein Translation-Memory-System ist machbar.

Werden Dialogfelder in einem XML-Format gestaltet, dann lassen sich diese durch XSL-Transformationen modifizieren oder sogar erzeugen. Voraussetzung sind XML-basierte Sprachendateien, in denen alle Oberflächentexte in allen Sprachen für alle Abbildungen enthalten sind. Über entsprechende Attribute in den Text-Elementen kann eine direkte Zuordnung zwischen dem Text in der Sprachdatei und dem in der Grafik hergestellt werden.

Ein weiterer Vorteil besteht darin, dass der Technische Redakteur in einer SVG-Datei auch Metadaten hinzufügen und auswerten kann. Das ist für die Überprüfung und Prozessgestaltung sehr hilfreich. In einer modularen Dokumentation ist es möglich, nicht nur in den Topics durch Metadaten Varianten auszuzeichnen, sondern die Metadaten auch in jeder SVG-Grafik mit anzugeben. Durch entsprechende Add-ons können diese Informationen beim Publikationsprozess ausgewertet, ein Report erstellt und damit die Richtigkeit der enthaltenen Informationen belegt werden.

Werden die SVG-Dateien passend aufgebaut, ist es zudem möglich, die Variablennutzung aus den Dokumenten auf die SVG-Grafiken zu erweitern. Mit einem Add-on lassen sich die Inhalte der Variablen dann nicht nur in den Dokumenten, sondern gleichzeitig auch in den SVG-Grafiken austauschen. So können die Variablen bereits vor der Übersetzung mit den terminologisch richtigen Begriffen gefüllt und die richtige Übersetzung des gesamten Inhalts zusätzlich verbessert werden. Und will der Redakteur ein interaktives Dokument aufbauen, dann bieten SVG-Grafiken mit Hotspots oder Bewegung Funktionen an, die im Browser genutzt werden können.

Investieren und sparen

Ob auf Grundlage von XML oder Vektoren – Screenshots können die Anforderungen an moderne Publikationsformate erfüllen. Zudem können Screenshots im Dokumentationsprozess gut überwacht und falls nötig aktualisiert werden. Auch die Übersetzung ist möglich.

Rechnet die Technische Redaktion die anfallende Zeit für das Erstellen und Korrigieren von pixelbasierten Screenshots gegen eine strukturierte Lösung auf Basis von SVG oder einer anderen XML-Struktur auf, dann macht sich der Aufwand bezahlt.

Technische Redakteure gewinnen zusätzlich durch die Metadaten die Sicherheit über die Inhalte ihrer Technischen Dokumentation. Nicht zuletzt ist eine XML-Struktur von Grafiken für alle modernen Medienkanäle leichter zu handhaben und bringt eine verlustfreie Darstellungsqualität mit sich.

Ute Mitschke - die Informationsarchitektin beschäftigt sich seit 1994 mit der Optimierung von Erstellungsprozessen, der Strukturierung von Informationen, der Einführung von CMS und ist Spezialistin für Adobe-FrameMaker und Microsoft Office-Programme. Sie arbeitet selbstständig als Consultant, Trainerin und entwickelt XML-basierte Lösungen. Aktuelle Schwerpunktthemen sind Modularisierung, SVG und Meta-Informationen sowie die Verbesserung von Prozessen durch Add-ons.
ute.mitschke(at)4xscripts.com
www.4xscripts.com

Um diesen Beitrag kommentieren zu können, loggen Sie sich bitte ein.