Screenshots in der Dokumentation: Leichter mit SVG 17.06.202302.11.2023 OK, jetzt wird es nerdig: Ein Bericht aus dem Unterleib der technischen Kommunikation. Wer damit nichts zu tun hat, weil er technische Produkte einfach nur benutzt oder gar keine technischen Produkte benutzt, der darf jetzt weiterblättern. Es geht um technische Kommunikation speziell im Softwarebereich: Anleitungen, wie man ein Programm bedient oder eine Maschinensteuerung – oder ein Telefon mit Bildschirm. Also etwas, worüber man sich im Alltag wenig Gedanken macht, denn das Zeug soll ja funktionieren. Stimmt auch. Damit das Zeug aber das tut, was es soll, gibt es nicht nur bei Hardware wie Waschmaschinen oder Schlagbohrern Anleitungen, sondern eben auch bei Software. Das ist sogar in der EU gesetzlich verankert, denn jedes Produkt, dass dort „in Verkehr gebracht wird“, muss „sicher und gefahrlos“ bedient werden können. Bei Hardware wie einer Schlagbohrmaschine leuchtet das auch ein, denn weder will ich, dass mir der Bohrkopf um die Ohren fliegt, noch dass das Gerät gar nicht schlagbohrt. Aber auch bei Software möchte ich keine Fehlfunktion, vor allem, wenn die meisten Geräte mittlerweile an eine Software angebunden oder nur über sie bedient werden können. Heizungsanlagen beispielsweise. Oder PKWs. Dazu braucht es Anleitungen. Und zwar nicht nur in einer Sprache, sondern in allen Verkehrssprachen, in denen das Produkt verkauft werden soll. Software Bei Software besteht nun die besondere Herausforderung, dass ich nicht das Produkt daneben halten kann und dann den Knopf oder Griff auch sehe, sondern ich habe es mit einer Benutzeroberfläche, einer Visualisierung auf einem Bildschirm zu tun. Statt drei Dimensionen gibt es nur zwei. Das reduziert mangels Haptik und Räumlichkeit das Verständnis und die Bedienung nicht unerheblich: Ich sehe einfach nicht, was meine Klicks und Wischer auf dem Bildschirm im Code bewirken. Um hier Abhilfe zu schaffen, werden Software-Dokumentationen oft besonders reich bebildert mit „Screenshots“ (Bildschirmfotos), die den aktuellen Status des Bildschirms zeigen sollen. Dadurch können sich Benutzer orientieren, ob der Inhalt ihres Bildschirms das Gleiche zeigt wie die Anleitung und was sie als nächstes machen müssen. Nun haben aber gerade Screenshots einen entscheidenden Nachteil: sie sind nicht sprachneutral. Während man bei einer Hardware eine Ziffer daneben stellt und unter das Bild eine Legende klatscht, sieht man auf dem Bildschirm mehr: Schaltflächen und Bildschirmtexte lassen sich nicht komplett ausblenden, weil man sie ja zur Orientierung benötigt. Nun aber schlägt die Übersetzung zu: wenn die Anleitung in allen Verkehrssprachen veröffentlicht werden soll, müssen es die Screenshots auch sein, weil die Benutzer in den jeweiligen Verkehrssprachen keine Orientierung haben und die lokalisierte Software-Oberfläche mit dem Text der Anleitung vergleichen können. Hier droht klassischerweise ein Loch: die Übersetzung hat ihre Aufgabe erledigt, die Redaktion hat ihre Aufgabe erledigt – aber wer kümmert sich um die Screenshots in den Zielsprachen? Das Programm einstellen und dann pro Sprache mit den identischen Einstellungen Bilder anlegen, benennen (oder gar im Programm austauschen), damit sie korrekt referenziert werden, ist eine Arbeit für Jemanden, der seine Eltern erschlagen hat. Das dauert und ist fehleranfällig. Besser ginge es mit Grafiken, in denen man den Text auch nachträglich noch ändern kann – mit SVG beispielsweise. Denn dort genügt ein einfacher Texteditor wie Notepad. SVG Zunächst einmal muss der Screenshot natürlich angelegt werden mit einem Grafikprogramm (das geht mit Inkscape genauso gut wie mit Affinity Designer oder Adobe Illustrator). Den fertig angelegten Screen exportiert man als SVG ohne die Texte als Kurven zu exportieren – Texte bleiben Texte. Da SVG eigentlich nur eine Untergruppe des XML ist, einer Auszeichnungssprache wie HTML (das Sie auch von dieser Website als „Quellcode“ anzeigen lassen können), öffnet man die SVG stumpf mit einem Texteditor. Texte im SVG werden wie alle Objekte mit einer Auszeichnung als Element gekennzeichnet, nämlich als <tspan>-Element. Danach kann man mit der Suchfunktion im Dokument fahnden und erhält ggf. eine Zeile wie die folgende: In diesem Schnipsel sind neben den Formatierungsangaben zur verwendeten Schriftart und ‑größe auch der Text „Stop recording“ enthalten. Dort trägt man mit dem Texteditor die Entsprechung (z.B. „Aufzeichnung beenden“) ein und speichert. Der neue Text wird dann an der gleichen Stelle angezeigt. Falls es Platzprobleme gibt, passt man in der Zeile darüber die Pixelwerte zu transform=„translate()“ an. Das Ergebnis ist sofort im Browser sichtbar, denn jeder Browser kann SVG als Grafik anzeigen. Für die Nachbearbeitung benötigt man also noch nicht einmal ein Grafikprogramm und Kenntnisse zum Umgang. Noch schneller geht es, wenn man alle SVG in einer Sprache im Stapeldurchlauf (Batch) bearbeitet. Damit tauscht man dann die Begriffe in allen Screenshots auf einen Rutsch aus. Fazit Die Verwendung von SVG als „Screenshots“ (eigentlich sind es ja Grafiken, die nie einen Bildschirm gesehen haben) hat neben der schnellen und einfachen Übersetzbarkeit auch den Vorteil, dass SVG-Grafiken wie alle Vektorgrafiken prima skalierbar sind und damit nicht nur im Druck, sondern auch auf jedem Bildschirm gut aussehen. Dagegen spricht eigentlich nur, dass man die Bilder natürlich erst anfertigen muss. Wie halt immer im Leben braucht es somit etwas Planung und Vorausdenken, um es sich leichter zu machen… Teilen mit:MastodonWhatsAppE‑MailMehrDruckenLinkedInTelegramPinterestGefällt mir:Gefällt mir Wird geladen … praxistipps redaktion BildbearbeitungSVGTechnische Kommunikation
praxistipps Mehrsprachige Inhaltsverzeichnisse mit InDesign erstellen 03.06.201401.02.2022 InDesign wird leider viel zu oft in Abteilungen eingesetzt, die das Programm bedienen wie eine… Teilen mit:MastodonWhatsAppE‑MailMehrDruckenLinkedInTelegramPinterestGefällt mir:Gefällt mir Wird geladen … Read More
praxistipps Illustrator CC mit Bibliothek in der Wolke 06.10.201423.01.2022 Adobe hat dem Grafikprogramm Illustrator CC mal wieder ein Update verpasst. Ein eher weniger beworbenes… Teilen mit:MastodonWhatsAppE‑MailMehrDruckenLinkedInTelegramPinterestGefällt mir:Gefällt mir Wird geladen … Read More
praxistipps MadCap Flare: Der Dreh mit den Grafiken 22.12.201822.12.2018 Ein HAT ist nur gut für Textwüsten im HTML-Format? Das ist was für Technikredakteure, die… Teilen mit:MastodonWhatsAppE‑MailMehrDruckenLinkedInTelegramPinterestGefällt mir:Gefällt mir Wird geladen … Read More