Onlinehilfen: Form follows function

Vor etwas mehr als zehn Jah­ren hat­te ich hier einen Arti­kel gepos­tet, der sich mit der Wahl einer geeig­ne­ten Schrift für die tech­ni­sche Doku­men­ta­ti­on beschäf­tigt. Es wird Zeit für ein Update.

In den letz­ten zehn Jah­ren hat sich näm­lich auch in der tech­ni­schen Doku­men­ta­ti­on viel getan, das vor allem mit der Glo­ba­li­sie­rung und dem Inter­net zu tun hat. Anlei­tun­gen wer­de nicht mehr gedruckt (oder nur noch in Tei­len), Anlei­tun­gen sind mobil gewor­den. HTML5 und CSS3 haben Papier, Index und Fuß­zei­len aufs Abstell­gleis der Kom­mu­ni­ka­ti­ons­me­di­en gescho­ben, wo es sie zwar noch lan­ge geben wird, aber nie mehr mit der Rele­vanz, die sie noch vor einem Jahr­zehnt hat­ten.

Tech­ni­sche Doku­men­ta­ti­on, das bedeu­tet heu­te: Ver­füg­bar­keit, Mehr­spra­chig­keit, Mobi­li­tät und Aktua­li­tät. Damit kön­nen die gedruck­ten Aus­ga­ben kaum noch mit­hal­ten. Ein Wiki als Para­de­bei­spiel der „leicht­ge­wich­ti­gen“ und beson­ders schnel­len Infor­ma­ti­ons­be­reit­stel­lung ist drei­mal ergänzt und ver­füg­bar, bevor die glei­che Infor­ma­ti­on aus dem Dru­cker quillt und in der Abla­ge abkühlt.

Mit die­sen Anfor­de­run­gen stel­len sich aber auch ande­re Fra­gen an das Medi­um, mit dem die Infor­ma­ti­on trans­por­tiert wird – nicht die PDF oder die Sei­te ist das Maß aller Din­ge, son­dern der Bild­schirm. Und zwar in allen erdenk­li­chen Grö­ßen: vom 17″-Tablet bis zur Smart­watch. Nicht mehr kli­cken und zie­hen, rech­te Maus­tas­te und Tas­ta­tu­r­akro­ba­tik sind gefragt, son­dern wischen, tip­pen und drü­cken, dre­hen und Fin­ger­sprei­zen. Die Inter­ak­ti­on mit dem Kom­mu­ni­ka­ti­ons­trä­ger und sei­ne Funk­ti­on als „Netz­werk­ste­cker“ ist zum tra­gen­den Ele­ment eines gigan­ti­schen Netz­werks gewor­den, des­sen Aus­wir­kun­gen wir noch gar nicht über­bli­cken kön­nen.

Die tech­ni­sche Doku­men­ta­ti­on ist da drau­ßen

Wenn tech­ni­sche Infor­ma­ti­on benö­tigt wird, suchen wir auf der Inter­net­sei­te des Her­stel­lers oder irgend­wo im Inter­net nach einem Kurz­vi­deo (Tuto­ri­al). Die Infor­ma­ti­on, die wir suchen, muss sofort zur Ver­fü­gung ste­hen, schnell auf den Punkt kom­men, und leicht ver­ständ­lich sein. Wir wol­len kei­ne umständ­li­chen Ein­lei­tun­gen und Funk­ti­ons­be­schrei­bun­gen, wir wol­len Hyper­links und Drop-Downs. Wir wol­len wis­sen, was dort steht – wir wol­len nicht wis­sen, wo es steht.

Und die­ses Wis­sen bekom­men wir: gigan­ti­sche Ser­ver­far­men, die im Mikro­se­kun­den­takt belie­bi­ge Such­an­fra­gen ver­ar­bei­ten und Ergeb­nis­se aus­wer­fen, deren Sinn sie nicht ver­ste­hen, den wir aber erst erzeu­gen müs­sen. Das ist unser Job als Tech­ni­k­re­dak­teu­re. Wir füt­tern die­se Biblio­thek.

Wir müs­sen uns auch dar­um küm­mern, dass sie erfass­bar ist. Wir haben dafür zu sor­gen, dass sie „fliegt“.

Wie aber macht man das?

Form fol­lows func­tion

Zunächst ein­mal ist eine Bild­schirm­sei­te nie­mals deckungs­gleich mit einer Druck­sei­te: abhän­gig von der Bild­schirm­aus­rich­tung wird sie anders erfasst und benutzt.

• Die Lese­ent­fer­nung eines gedruck­ten Doku­ments ist meist ziem­lich kon­stant. Sie wird bestimmt von der Umge­bungs­hel­lig­keit, dem Kon­trast, der Schrift­grö­ße, dem Zei­len­ab­stand und der Blatt­grö­ße.
• Eine Online­hil­fe ist dage­gen unemp­find­lich hin­sicht­lich der Umge­bungs­hel­lig­keit, da die Bild­schirm­hel­lig­keit und damit Hel­lig­keit der Dar­stel­lung vom Benut­zer direkt ange­passt wer­den kann.
• Da die mobi­len Lese­ge­rä­te geschwenkt wer­den kön­nen und so mit der Inhalt sowohl quer­for­ma­tig als auch hoch­kant gele­sen wer­den kann, wird der ver­füg­ba­re Platz auf dem Bild­schirm anders genutzt.
• Lap­tops und sta­tio­nä­re Bild­schir­me dage­gen sind fast aus­schließ­lich quer­for­ma­tig. Damit ver­ge­ben sie viel Platz auf dem Bild­schirm, der nicht mehr für den Text genutzt wird, son­dern für Funk­tio­nen, die den Nutz­wert des Inhalts erhö­hen. ¹Die Zei­len­län­ge eines Tex­tes, die beim Lesen zuver­läs­sig erfasst wird, liegt meist um die 80 Zei­chen. Bei län­ge­ren Zei­len steigt die Wahr­schein­lich­keit, dass man beim Lesen ver­rutscht und dabei das Auge nicht mehr in Sak­ka­den vor­wärts sprin­gen kann, son­dern zur Kon­trol­le wie­der zurück, was sich nega­tiv auf die Erfas­sung aus­wirkt.

Bild­schirm­ty­po­gra­fie besteht aller­dings nicht nur aus einem Schrift­bild, das dem Lese­kon­text ange­passt ist Hin­sicht Schrift­grö­ße, Kon­trast oder Auf­lö­sung (Letz­te­res ist nicht mehr so rele­vant, da die Bild­schir­me zuneh­mend über eine höhe­re Auf­lö­sung ver­fü­gen – ins­be­son­de­re Mobil­ge­rä­te wie Smart­phones oder Tablets).

Bild­schirm­ty­po­gra­fie besteht auch in der tech­ni­schen Doku­men­ta­ti­on aus der geschick­ten Aus­nut­zung des Bild­schirm­plat­zes, der zu Ver­fü­gung steht. Dazu ste­hen meh­re­re Optio­nen zur Ver­fü­gung :

• Auf­klapp­me­nüs und expan­die­ren­de Tex­te: Nur die Über­schrift wird ange­zeigt und der Benut­zer kann durch Ankli­cken des Tex­tes oder eines Icons den gesam­ten Inhalt anzei­gen oder ver­ber­gen. Dies kann man für Abschnit­te inner­halb einer Sei­te ver­wen­den, um zu ver­hin­dern, dass die Leser aus der Sei­te her­aus auf eine ande­re Sei­te navi­gie­ren müs­sen und gege­be­nen­falls nicht mehr zurück fin­den.
• „Popo­ver“: Zusätz­li­che Infor­ma­tio­nen oder Funk­tio­nen wer­den in einem Fens­ter ange­zeigt, das den bestehen­den Inhalt ver­deckt. Dies kann bei­spiels­wei­se eine Glos­s­ar­funk­ti­on sein oder auch eine Bestell­funk­ti­on, die die Leser optio­nal aus der Sei­te hin­aus­führt. Sobald die­se Opti­on nicht genutzt wird, wird das Fens­ter geschlos­sen und die Benut­zer befin­den sich immer noch auf der ursprüng­li­chen Sei­te.
• Bei Bild­schir­men im Quer­for­mat (gedreht oder als Stan­dard) die Nut­zung des lee­ren Raums auf einer oder bei­den Sei­ten des Inhalts als Navi­ga­ti­on oder Funk­tio­nen, mit der man die Sei­te ver­lässt. Durch die Posi­ti­on außer­halb des Inhalts wer­den die­se Optio­nen ange­zeigt ohne die Erfas­sung zu ver­de­cken.
• „Respon­si­ve Design“: die Dar­stel­lung vari­iert mit der Brei­te des Fens­ters. Da die Inhal­te einer Online­hil­fe im Brow­ser ange­zeigt wer­den, reagiert das Lay­out (Anord­nung, Dar­stel­lung, Zei­len­hö­he, Zei­chen­grö­ße etc.) auf die Fens­ter­brei­te des Brow­sers. Aus­rei­chen Platz auf dem Bild­schirm vor­aus­ge­setzt, kön­nen die Benut­zer die Dar­stel­lung anpas­sen, indem sie das Brow­ser­fens­ter brei­ter oder schma­ler machen.
• Blät­ter­funk­ti­on: die Leser kön­nen durch Akti­vie­ren eines Icons oder einer Schalt­flä­che zur fol­gen­den oder vori­gen Inhalts­sei­te „blät­tern“. Dies erlaubt eine linea­re Navi­ga­ti­on ähn­lich der Bedie­nung von Büchern.
• „Bread­crumbs“: die Brot­kru­men­na­vi­ga­ti­on zeigt den Lesern anhand der Über­schrif­ten, in wel­chem Bereich sie sich befin­den. Ist sie mit Links hin­ter­legt, kön­nen die Leser eine Ebe­ne in der Hier­ar­chie „höher“ sprin­gen. Dabei kön­nen bei unge­schick­ter Ver­ga­be von Über­schrif­ten (lan­gen Tex­ten) oder gro­ßer Struk­tu­rie­rungs­tie­fe sehr umfang­rei­che Bread­crumbs ent­ste­hen, die wert­vol­len Bild­schirm­platz beset­zen.
• Bild­zoo­ming: Bil­der kön­nen im Gegen­satz zur gedruck­tem Text als „Vor­schau­bild“ ein­ge­setzt wer­den, das erst durch Akti­vie­rung in kor­rek­ter Grö­ße als Popo­ver dar­ge­stellt wird. Dies spart Bild­schirm­platz.
• Navi­ga­ti­on und Such­funk­ti­on: Auch wenn die Suche oder Navi­ga­ti­on kei­ne typo­gra­fi­sche Funk­ti­on haben, benö­ti­gen sie Platz auf dem Bild­schirm, vor allem wenn sie auch beim Scrol­len sicht­bar blei­ben sol­len. Die­ser Platz muss in der Typo­gra­fie berück­sich­tigt wer­den.

Im Gegen­satz zu einer Sei­te auf Papier kann eine Bild­schirm­sei­te belie­big lang sein – die Benut­zer müs­sen halt mit­un­ter län­ger scrol­len. Län­ge­res Scrol­len bedeu­tet aber auch län­ge­res Lesen und damit mehr Zeit, Inhal­te zu erfas­sen. Das ist kon­tra­pro­duk­tiv, denn die Benut­zer sol­len die wesent­li­chen Inhal­te mög­lichst schnell erfas­sen kön­nen um zu ent­schei­den, ob die Inhal­te im Kon­text rele­vant sind. Das Ziel der Online­hil­fe muss es sein, den Benut­zern genau die­se Ent­schei­dung zu erleich­tern.

Tech­ni­sche Doku­men­ta­ti­on ist Selbst­er­mäch­ti­gung der Produktbenutzer:innen. Sie zu ermäch­ti­gen, ein Pro­dukt sicher und gefahr­los zu benut­zen ist das pri­mä­re Ziel jeder tech­ni­schen Doku­men­ta­ti­on.

Fazit

Auch wenn die Funk­ti­on der Infor­ma­ti­ons­ver­mitt­lung im Vor­der­grund der tech­ni­schen Doku­men­ta­ti­on steht, bedeu­tet dies nicht, alle Funk­tio­nen und Mög­lich­kei­ten blind zu nut­zen und will­kür­lich auf der Sei­te zu ver­tei­len (sofern der Edi­tor dies zulässt) oder gar nicht zu nut­zen (weil der Edi­tor dies nicht zulässt). Die Kunst besteht wie bei jedem guten Lay­out dar­in, die Funk­tio­nen der Online­hil­fe opti­mal zu nut­zen, um die Balan­ce aus Les­bar­keit und Infor­ma­ti­ons­dich­te zu errei­chen.

Dabei spielt aller­dings auch das men­ta­le Modell und die Benut­zer­er­war­tung eine wich­ti­ge Rol­le – neben den tech­ni­schen Begren­zun­gen wie Daten­über­tra­gungs­ge­schwin­dig­keit und Funk­tio­na­li­tät des Brow­sers.

Für die tech­ni­sche Redak­ti­on ist es daher vor­teil­haft, sich auch mit Fra­gen der Usa­bi­li­ty und der Online-Didak­tik zu beschäf­ti­gen.

• 1
  Die Zei­len­län­ge eines Tex­tes, die beim Lesen zuver­läs­sig erfasst wird, liegt meist um die 80 Zei­chen. Bei län­ge­ren Zei­len steigt die Wahr­schein­lich­keit, dass man beim Lesen ver­rutscht und dabei das Auge nicht mehr in Sak­ka­den vor­wärts sprin­gen kann, son­dern zur Kon­trol­le wie­der zurück, was sich nega­tiv auf die Erfas­sung aus­wirkt.
• 2
  Pro­gres­si­ve dis­clo­sure is an inter­ac­tion design pat­tern used to make appli­ca­ti­ons easier to learn and less error-pro­ne. It does so by defer­ring some advan­ced or rare­ly-used fea­tures to a secon­da­ry screen and desig­ning work­flows whe­re infor­ma­ti­on is reve­a­led when it beco­mes rele­vant to the cur­rent task. (Wiki­pe­dia)