Screenshots in der Dokumentation: Leichter mit SVG

OK, jetzt wird es nerdig: Ein Bericht aus dem Unter­leib der tech­ni­schen Kom­mu­ni­ka­ti­on. Wer damit nichts zu tun hat, weil er tech­ni­sche Pro­duk­te ein­fach nur benutzt oder gar kei­ne tech­ni­schen Pro­duk­te benutzt, der darf jetzt wei­ter­blät­tern.

Es geht um tech­ni­sche Kom­mu­ni­ka­ti­on spe­zi­ell im Soft­ware­be­reich: Anlei­tun­gen, wie man ein Pro­gramm bedient oder eine Maschi­nen­steue­rung – oder ein Tele­fon mit Bild­schirm. Also etwas, wor­über man sich im All­tag wenig Gedan­ken macht, denn das Zeug soll ja funk­tio­nie­ren. Stimmt auch.

Damit das Zeug aber das tut, was es soll, gibt es nicht nur bei Hard­ware wie Wasch­ma­schi­nen oder Schlag­boh­rern Anlei­tun­gen, son­dern eben auch bei Soft­ware. Das ist sogar in der EU gesetz­lich ver­an­kert, denn jedes Pro­dukt, dass dort „in Ver­kehr gebracht wird“, muss „sicher und gefahr­los“ bedient wer­den kön­nen. Bei Hard­ware wie einer Schlag­bohr­ma­schi­ne leuch­tet das auch ein, denn weder will ich, dass mir der Bohr­kopf um die Ohren fliegt, noch dass das Gerät gar nicht schlag­bohrt.

Aber auch bei Soft­ware möch­te ich kei­ne Fehl­funk­ti­on, vor allem, wenn die meis­ten Gerä­te mitt­ler­wei­le an eine Soft­ware ange­bun­den oder nur über sie bedient wer­den kön­nen. Hei­zungs­an­la­gen bei­spiels­wei­se. Oder PKWs. Dazu braucht es Anlei­tun­gen. Und zwar nicht nur in einer Spra­che, son­dern in allen Ver­kehrs­spra­chen, in denen das Pro­dukt ver­kauft wer­den soll.

Soft­ware

Bei Soft­ware besteht nun die beson­de­re Her­aus­for­de­rung, dass ich nicht das Pro­dukt dane­ben hal­ten kann und dann den Knopf oder Griff auch sehe, son­dern ich habe es mit einer Benut­zer­ober­flä­che, einer Visua­li­sie­rung auf einem Bild­schirm zu tun. Statt drei Dimen­sio­nen gibt es nur zwei. Das redu­ziert man­gels Hap­tik und Räum­lich­keit das Ver­ständ­nis und die Bedie­nung nicht uner­heb­lich: Ich sehe ein­fach nicht, was mei­ne Klicks und Wischer auf dem Bild­schirm im Code bewir­ken.

Um hier Abhil­fe zu schaf­fen, wer­den Soft­ware-Doku­men­ta­tio­nen oft beson­ders reich bebil­dert mit „Screen­shots“ (Bild­schirm­fo­tos), die den aktu­el­len Sta­tus des Bild­schirms zei­gen sol­len. Dadurch kön­nen sich Benut­zer ori­en­tie­ren, ob der Inhalt ihres Bild­schirms das Glei­che zeigt wie die Anlei­tung und was sie als nächs­tes machen müs­sen. Nun haben aber gera­de Screen­shots einen ent­schei­den­den Nach­teil: sie sind nicht sprach­neu­tral. Wäh­rend man bei einer Hard­ware eine Zif­fer dane­ben stellt und unter das Bild eine Legen­de klatscht, sieht man auf dem Bild­schirm mehr: Schalt­flä­chen und Bild­schirm­tex­te las­sen sich nicht kom­plett aus­blen­den, weil man sie ja zur Ori­en­tie­rung benö­tigt.

Nun aber schlägt die Über­set­zung zu: wenn die Anlei­tung in allen Ver­kehrs­spra­chen ver­öf­fent­licht wer­den soll, müs­sen es die Screen­shots auch sein, weil die Benut­zer in den jewei­li­gen Ver­kehrs­spra­chen kei­ne Ori­en­tie­rung haben und die loka­li­sier­te Soft­ware-Ober­flä­che mit dem Text der Anlei­tung ver­glei­chen kön­nen. Hier droht klas­si­scher­wei­se ein Loch: die Über­set­zung hat ihre Auf­ga­be erle­digt, die Redak­ti­on hat ihre Auf­ga­be erle­digt – aber wer küm­mert sich um die Screen­shots in den Ziel­spra­chen? Das Pro­gramm ein­stel­len und dann pro Spra­che mit den iden­ti­schen Ein­stel­lun­gen Bil­der anle­gen, benen­nen (oder gar im Pro­gramm aus­tau­schen), damit sie kor­rekt refe­ren­ziert wer­den, ist eine Arbeit für Jeman­den, der sei­ne Eltern erschla­gen hat.

Das dau­ert und ist feh­ler­an­fäl­lig. Bes­ser gin­ge es mit Gra­fi­ken, in denen man den Text auch nach­träg­lich noch ändern kann – mit SVG bei­spiels­wei­se. Denn dort genügt ein ein­fa­cher Text­edi­tor wie Note­pad.

SVG

• Zunächst ein­mal muss der Screen­shot natür­lich ange­legt wer­den mit einem Gra­fik­pro­gramm (das geht mit Inkscape genau­so gut wie mit Affi­ni­ty Desi­gner oder Ado­be Illus­tra­tor). Den fer­tig ange­leg­ten Screen expor­tiert man als SVG ohne die Tex­te als Kur­ven zu expor­tie­ren – Tex­te blei­ben Tex­te.
• Da SVG eigent­lich nur eine Unter­grup­pe des XML ist, einer Aus­zeich­nungs­spra­che wie HTML (das Sie auch von die­ser Web­site als „Quell­code“ anzei­gen las­sen kön­nen), öff­net man die SVG stumpf mit einem Text­edi­tor. Tex­te im SVG wer­den wie alle Objek­te mit einer Aus­zeich­nung als Ele­ment gekenn­zeich­net, näm­lich als <tspan>-Element. Danach kann man mit der Such­funk­ti­on im Doku­ment fahn­den und erhält ggf. eine Zei­le wie die fol­gen­de:
  
• In die­sem Schnip­sel sind neben den For­ma­tie­rungs­an­ga­ben zur ver­wen­de­ten Schrift­art und ‑grö­ße auch der Text „Stop recor­ding“ ent­hal­ten. Dort trägt man mit dem Text­edi­tor die Ent­spre­chung (z.B. „Auf­zeich­nung been­den“) ein und spei­chert.
• Der neue Text wird dann an der glei­chen Stel­le ange­zeigt. Falls es Platz­pro­ble­me gibt, passt man in der Zei­le dar­über die Pixel­wer­te zu transform=„translate()“ an. Das Ergeb­nis ist sofort im Brow­ser sicht­bar, denn jeder Brow­ser kann SVG als Gra­fik anzei­gen. Für die Nach­be­ar­bei­tung benö­tigt man also noch nicht ein­mal ein Gra­fik­pro­gramm und Kennt­nis­se zum Umgang.
• Noch schnel­ler geht es, wenn man alle SVG in einer Spra­che im Sta­pel­durch­lauf (Batch) bear­bei­tet. Damit tauscht man dann die Begrif­fe in allen Screen­shots auf einen Rutsch aus.

Fazit

Die Ver­wen­dung von SVG als „Screen­shots“ (eigent­lich sind es ja Gra­fi­ken, die nie einen Bild­schirm gese­hen haben) hat neben der schnel­len und ein­fa­chen Über­setz­bar­keit auch den Vor­teil, dass SVG-Gra­fi­ken wie alle Vek­tor­gra­fi­ken pri­ma ska­lier­bar sind und damit nicht nur im Druck, son­dern auch auf jedem Bild­schirm gut aus­se­hen.

Dage­gen spricht eigent­lich nur, dass man die Bil­der natür­lich erst anfer­ti­gen muss. Wie halt immer im Leben braucht es somit etwas Pla­nung und Vor­aus­den­ken, um es sich leich­ter zu machen…