itl erhält den tekom-Dokupreis 2017

Ich hat­te ganz über­se­hen und ver­ges­sen, dies bei mei­nem Text über die tekom zu erwäh­nen: die ITL AG hat zusam­men mit einem lang­jäh­ri­gen Kun­den ein ambi­tio­nier­tes Pro­jekt rea­li­siert: die gesam­te Kun­den­do­ku­men­ta­ti­on soll­te weg vom Papier, hin zu online. Und ich war mit­ten­drin. 

Es geht bei sol­chen Vor­ha­ben nicht nur dar­um, ein­fach alle vor­han­de­nen Doku­men­te zu öff­nen und in eine HTML-Doku­men­ta­ti­on zu expor­tie­ren – das wäre ja kein ech­ter Mehr­wert. Es geht in ers­ter Linie dar­um, den Kun­den­nut­zen zu ver­bes­sern und neben­bei die Dau­er zu ver­kür­zen, die eine Infor­ma­ti­on benö­tigt, um beim Benut­zer anzu­kom­men. Das ist zunächst kein tech­ni­sches Pro­blem, son­dern umfasst vor allem Kon­zep­ti­ons- und Pla­nungs­ar­beit.

Kon­zep­ti­ons­ar­beit

Nach der Erfas­sung der Ziel­grup­pen und ihrer Anfor­de­run­gen (bei einem inter­na­tio­na­len Unter­neh­men kei­ne ein­fa­che Auf­ga­be) muss­ten die vor­han­de­nen Infor­ma­ti­ons­pro­zes­se inte­griert wer­den. Dabei ging es um die Fra­ge, wie publi­ziert wird, und wel­che Daten­for­ma­te über­haupt von den Benut­zer­grup­pen genutzt wer­den kön­nen:

• Wer­den Gra­fi­ken benö­tigt, in wel­cher Auf­lö­sung und von wel­cher Benut­zer­grup­pe zu wel­chem Zeit­punkt?
• Wer­den Ani­ma­tio­nen benö­tigt, funk­tio­nie­ren sie auch ohne Ton? (Frü­her hat man mul­ti­me­dia­le Inhal­te per Flash publi­ziert, aber das ist nun ein totes For­mat.)
• Wel­che Inhal­te sol­len von wel­cher Ziel­grup­pe über­haupt erreich­bar sein? Wir wird die Ziel­grup­pe über Aktua­li­sie­run­gen infor­miert?
• Wird bei Über­set­zun­gen auch eine Ani­ma­ti­on über­setzt? In wel­che Ziel­spra­chen wird über­setzt?

Und dann kom­men die ganz bana­len Fra­gen nach der Usa­bi­li­ty, denn es genügt ja nicht mehr, dem Benut­zer ein­fach die Inhal­te anzu­bie­ten und dann zu hof­fen, dass er die rich­ti­gen noch fin­det, bevor der Frus­tra­ti­ons­pe­gel so hoch ist, dass er das Smart­phone oder Tablet in die Ecke wirft. Inhal­te müs­sen grup­piert, auf ihre „Web­taug­lich­keit“ geprüft und gege­be­nen­falls über­ar­bei­tet wer­den; das Lay­out muss einer­seits an die Vor­ga­ben durch das Cor­po­ra­te Design ange­lehnt, ande­rer­seits aber den Anfor­de­run­gen der Nut­zer gerecht wer­den, …

Über­le­gun­gen, die ange­stellt wer­den müs­sen, bevor es an die Pla­nung und Defi­ni­ti­on der Arbeits­pa­ke­te geht.

Pro­jekt­pla­nung und Umset­zung

Die Pla­nungs- und Kon­zep­ti­ons­pha­se bean­spruch­te einen gro­ßen Teil der gesam­ten Pro­jekt­dau­er, denn die ein­zel­nen Schrit­te muss­ten mit dem Kun­den abge­spro­chen und dar­an ange­passt wer­den, bevor die nächs­ten Schrit­te in Angriff genom­men wer­den konn­ten. Mit fort­schrei­ten­der Dau­er sind wir zuneh­mend auf eine agi­le Pro­jekt­pla­nung aus­ge­wi­chen, da auf­grund eines wich­ti­gen Mes­se­ter­mins der Lie­fer­zeit­punkt des Pro­to­ty­pen nicht ver­scho­ben wer­den konn­te – trotz Urlaub und Krank­heit. Wäh­rend noch die Ent­wick­ler an der Umset­zung der Funk­tio­nen wie „Pre­dic­ti­ve search“ oder „Pro­gres­si­ve dis­clo­sure“ arbei­te­ten, wur­den für die Ani­ma­tio­nen die Dreh­bü­cher aus den Inhal­ten erstellt und mit „Text-to-Speech“ als Sound­da­tei­en an die Gra­fi­ker und das Ani­ma­ti­ons­team geschickt, die die gra­fi­sche Auf­ar­bei­tung und die Zusam­men­stel­lung vor­nah­men.

Als Basis für das Lay­out der Online-Doku­men­ta­ti­on dien­ten Wire­frames, deren Usa­bi­li­ty mit Hil­fe einer ein­fa­chen Bas­te­lei getes­tet wur­de: wir druck­ten die Ent­wür­fe für Tablet und Smart­phone mit ver­schie­de­nen Benut­zer­zu­stän­den (z.B. Navi­ga­ti­on geöffnet/​geschlossen) auf Papier und kleb­ten dies auf eine pas­send zurecht geschnit­te­ne Pap­pe. Dann lie­ßen wir die Redak­ti­ons­kol­le­gen damit han­tie­ren. Die Beob­ach­tun­gen und das Feed­back sam­mel­ten wir ein (Sind die But­tons groß genug/​leicht zu finden/​verständlich? Sind die Tex­te groß genug/​lesbar?) und wer­te­ten sie aus – und zwar bevor die Ent­wick­ler an die Umset­zung per CSS gin­gen.¹

Sobald die Tex­te bear­bei­tet und frei­ge­ge­ben waren, wur­den sie per Import (das ent­spre­chen­de Script erstell­ten auch die Ent­wick­ler, die dafür eine Vor­ab­ver­si­on mit den kor­rek­ten Text­for­ma­ten benö­tig­ten) als HTML-Sei­ten inner­halb des Doku­men­ta­ti­ons­ord­ners abge­legt und mit dem Inhalts­ver­zeich­nis (der Navi­ga­ti­on) ver­knüpft.

Nach der Publi­ka­ti­on der Vor­ab­fas­sun­gen began­nen die Tests – live auf einem eigens ein­ge­rich­te­ten Ser­ver, denn neben der rei­nen Usa­bi­li­ty der Ober­flä­che und der Ver­ständ­lich­keit spie­len für die „User Expe­ri­ence“ (UX) auch Lade­zeit und Erreich­bar­keit eine wich­ti­ge Rol­le. Die Sei­te kann noch so gut sein, wenn sie zu lan­ge zum Laden benö­tigt, sinkt ihre Akzep­tanz deut­lich. Dann muss man gege­be­nen­falls an der Struk­tur schrau­ben² – oder auf ein Daten­for­mat zurück­grei­fen, das mit Hil­fe eines Strea­ming-Ser­vers bereits ange­spielt wird, bevor die gesam­te Datei auf dem Gerät des Benut­zer lan­det. Aller­dings müs­sen dabei auch die Kos­ten und der Auf­wand auf Sei­ten des Anbie­ters berück­sich­tigt wer­den, denn des­sen Tech­ni­ker sol­len das Web­hos­ting anschlie­ßend betreu­en und bereit­stel­len kön­nen.

Da wir die Anzahl der Ani­ma­tio­nen deut­lich redu­ziert hat­ten und uns nur auf die vom End­be­nut­zer pri­mär genutz­ten Funk­tio­nen kon­zen­triert hat­ten, ent­stan­den kur­ze Clips von 30 Sekun­den Dau­er, die aus­rei­chend schnell zu laden waren – noch dazu, da sie im For­mat H.264 kein zusätz­li­ches Plug­in benö­tig­ten.³

Erfolg

Zwei Stun­den vor der Dead­line für die Ver­öf­fent­li­chung (und nach Anpas­sun­gen in letz­ter Sekun­de) konn­ten wir live schal­ten. Es war ein Beweis gro­ßen Ver­trau­ens, den uns der Kun­de ent­ge­gen­brach­te, das Resul­tat mit sei­nen Kun­den „am offe­nen Her­zen“ auf einer Mes­se zu tes­ten. Aber der Pro­to­typ hielt, was er ver­sprach: die Mes­se­be­su­cher konn­ten einen QR-Code ein­scan­nen und die Doku­men­ta­ti­on auf die eige­nen Gerä­te holen – so soll­te es auch funk­tio­nie­ren.

It just work­ed.

Und hier noch der Arti­kel von ITL:

https://​www​.itl​.eu/​d​e​/​n​a​c​h​r​i​c​h​t​e​n​/​d​e​t​a​i​l​s​/​i​t​l​-​t​e​k​o​m​-​d​o​k​u​p​r​e​i​s​-​2​0​1​7​.​h​tml

Bild­quel­le: www​.itl​.eu

1. Für die Ent­wick­ler ist es hilf­reich, nicht nur das Bild, son­dern vor allem die Wer­te zu erhal­ten, denn die­se Wer­te (Text­grö­ße, Bild­grö­ße, Abstän­de, …) kön­nen direkt in die CSS über­nom­men wer­den. ↩

2. Bei­spiels­wei­se, indem man die Bild­in­for­ma­tio­nen zusam­men­fasst und damit die Anzahl der Bil­der pro Sei­te redu­ziert. ↩

3. Nach­in­stal­la­tio­nen sind der Tod einer Online­hil­fe. Kein Benut­zer wird und darf irgend­wel­che Funk­tio­nen wie bei­spiels­wei­se Plug­ins nach­in­stal­lie­ren. Bei den Tests der Lade­zei­ten sind ech­te Sze­na­ri­en not­wen­dig: eine Sei­te mit Ani­ma­ti­on auch mal im Kel­ler bei schwa­chem Netz tes­ten kann wich­ti­ge Erkennt­nis­se lie­fern. ↩