Cor­po­ra­te De­sign: Pat­tern Li­bra­ries

PAGE - - Inhalt -

Wie müs­sen De­sign­sys­te­me struk­tu­riert sein, da­mit sie in der Pra­xis funk­tio­nie­ren? Und ist es sinn­voll, sie jetzt schon auf neue Tech­no­lo­gi­en wie AR, VR oder au­to­ma­ti­sier­te Lay­outs aus­zu­wei­ten?

Pat­tern Li­bra­ries hel­fen, ei­ne mar­ken­kon­for­me User Ex­pe­ri­ence über al­le di­gi­ta­len An­wen­dun­gen hin­weg si­cher­zu­stel­len. Doch wel­cher Sys­te­ma­tik müs­sen sie fol­gen, um wirk­lich hilf­reich zu sein? Und wie setzt man sie auf, um auch künf­ti­ge Tech­no­lo­gi­en in­te­grie­ren zu kön­nen?

● Über die Stan­dar­di­sie­rung di­gi­ta­ler Pro­duk­te kann man ge­teil­ter Mei­nung sein. Die Er­geb­nis­se sind vi­el­leicht nicht son­der­lich krea­tiv, aber wenn man als De­si­gner oder De­ve­l­oper in ei­nem in­ter­na­tio­na­len Un­ter­neh­men mit di­ver­sen Län­der­sei­ten, in ei­ner Fir­ma mit vie­len Pro­dukt­li­ni­en oder in ei­nem schnell ex­pan­die­ren­den Start­up mit web­ba­sier­tem Ge­schäfts­mo­dell ar­bei­tet, weiß man die Vor­tei­le sehr wohl zu schät­zen. Sol­che stan­dar­di­sier­ten Web­sites, Mi­cro­si­tes oder Point­ofSa­le­an­wen­dun­gen ba­sie­ren auf wie­der ver wend­ba­ren Pat­terns wie He­a­dern, Sli­dern, Tea­sern, But­tons, Kon­takt­for­mu­la­ren, Trust­ele­men ten und so wei­ter, die in ei­ner Pat­tern Li­bra­ry ver­wal­tet wer­den, in­klu­si­ve Co­deS­nip­pets, die der haus­ei­ge­nen Co­de­kon­ven­ti­on ent­spre­chen. Wenn man Glück hat, sind die­se Bi­b­lio­the­ken mit dem Con­tent­ma­nage­ment­sys­tem und dem pro­duk­ti­ven Co­de ver­bun­den, so­dass die War­tung ein­fach ist und sich Än­de­run­gen in Win­des­ei­le über al­le We­b­an­wen­dun­gen des Un­ter­neh­mens aus­rol­len las­sen.

Die­se Vor­tei­le wa­ren es denn auch, die den Voice­o­ver­ip­an­bie­ter sip­ga­te da­zu brach­ten, ei­ne Pat­tern Li­bra­ry auf­zu­bau­en, auch wenn er erst im zwei­ten An­lauf das rich­ti­ge Kon­zept da­für fand. »Da­durch sind wir we­sent­lich kon­sis­ten­ter und auch schnel­ler ge­wor­den – um den Fak­tor 20 bis 100«, sagt To­bi­as Rit­ter­bach, der als Ex­pe­ri­ence Ow­ner den Auf­bau der Pat­tern Li­bra­ry ma­nag­te. Das 2004 ge­grün­de­te Un­ter­neh­men will so­wohl bei den Pro­dukt­li­ni­en als auch in an­de­re Län­der ex­pan­die­ren. Zu die­sem Zweck wird es in Zu­kunft schnell neue Web­und Mi­cro­si­tes, Fea­tures und In­ter­faces für im­mer mehr Dis­play­grö­ßen und Ge­rä­te­ty­pen zu­sam­men­stel­len müs­sen.

Für Airb­nb war ne­ben Pro­duk­ti­vi­täts­stei­ge­run­gen vor al­lem die Mar­ken­kon­sis­tenz ein Grund, ein über­ge­ord­ne­tes De­sign­sys­tem ein­zu­füh­ren. Oh­ne ei­ne ge­mein­sa­ me De­sign­spra­che hät­ten sich die welt­weit ver­streu­ten Ent­wick­lungs­teams nicht mehr steu­ern las­sen. »Im Lau­fe der Jah­re sind wir stark ge­wach­sen, un­se­re De­si­gnab­tei­lung be­steht in­zwi­schen aus fast ei­nem Dut­zend Teams. Es wur­de klar, dass wir sys­te­ma­ti­sche­re We­ge brau­chen, um un­se­re Ar­beit zu ko­or­di­nie­ren«, er­klärt Kar­ri Saa­ri­nen, der als De­sign Le­ad bei Airb­nb in San Fran­cis­co das 2017 ein­ge­führ­te De­sign Lan­gua­ge Sys­tem (DLS) ver­ant­wor­tet.

Oh­ne ei­ne sol­che zen­tra­le Pat­tern Li­bra­ry hät­te dem in­ter­na­tio­nal auf­ge­stell­ten Un­ter­neh­men ein Sze­na­rio wie die­ses ge­droht: Team eins ent­schei­det sich zur Lö­sung ei­nes De­sign­pro­blems für ein be­stimm­tes In­ter­face­ele­ment und brieft den De­ve­l­oper. Zeit­gleich ist Team zwei mit ei­nem sehr ähn­li­chen De­sign­pro­blem kon­fron­tiert – man­gels Re­fe­renz und Aus­tausch mit Team eins fin­det es aber ei­ne kom­plett an­de­re Lö­sung und gibt die­se in die Ent­wick­lung. Nun identifiziert das DLS­TEAM gleich­ar­ti­ge Pat­terns und fin­det ei­ne grund­sätz­li­che Lö­sung. Bei Airb­nb hat sich die Ein­füh­rung des De­sign Lan­gua­ge Sys­tems längst amor­ti­siert. Die agi­len Ent wick­lungs­teams stell­ten schon nach ein, zwei Wo­chen ei­ne enor­me Pro­duk­ti­vi­täts­stei­ge­rung fest. Ein Pro­to­typ mit fast fünf­zig Screens ließ sich nun in­ner­halb we­ni­ger St­un­den er­stel­len.

Sys­te­ma­tik ist ei­ne Kunst

Es gibt al­so ge­nü­gend gu­te Grün­de für den Auf­bau ei­ner Pat­tern Li­bra­ry – doch sind sie wirk­lich dring­lich ge­nug, um das Jam­mer­tal der Um­set­zung zu durch­que­ren? »Pat­tern Li­bra­ries kom­men nicht oh­ne Schmer­zen«, sagt Da­ni­el Kränz, He­ad of In­ter­ac­tion De­sign bei der Ham­bur­ger Di­gi­ta­l­agen­tur de­ep­blue net­works. Vor al­lem bei der Ka­te­go­ri­sie­rung der Ele­men­te und der Ver­wal­tung kann viel schief­ge­hen.

To­bi­as Rit­ter­bach von sip­ga­te hat das er­lebt: Im ers­ten An­lauf schei­ter­te der Voice­over­ip­an­bie­ter an der falsch ge­wähl­ten Sys­te­ma­tik, an der de­zen­tra­len Verant wort­lich­keit und an der Aus­rich­tung auf De­ve­l­oper. Dar­aus hat das Un­ter­neh­men ge­lernt und kon­zen­triert sich nun bei je­dem Pat­tern auf des­sen Funk­ti­on: Soll es USPS auf­zäh­len, Ver­trau­en er­hö­hen, Na­vi­ga­ti­on oder Con­tent an­teasern? Was trägt das Ele­ment zur Sei­te bei? Den je­wei­li­gen Zweck do­ku­men­tiert sip­ga­te in der Bi­b­lio­thek. »Denn das vi­su­el­le De­sign mag sich im Lau­fe der Jah­re än­dern, doch die Ab­sicht hin­ter dem funk­tio­na­len Pat­tern bleibt be­ste­hen. Ein Kon­takt­for­mu­lar bleibt ein Kon­takt­for­mu­lar«, sagt Rit­ter­bach.

Die­sen neu­en An­satz hat der Voice­over­ip­an­bie­ter Al­la Khol­ma­to­va, He­ad of De­sign & UX beim bri­ti­schen Ener­gie­start­up Bulb, zu ver­dan­ken, die sip­ga­te bei der Ein­rich­tung der neu­en Pat­tern Li­bra­ry im Herbst 2017 un­ter­stütz­te. In ih­rem Buch »De­sign Sys­tems« hat sie nicht nur die Fak­to­ren identifiziert, die ein ef­fek­ti­ves De­sign­sys­tem aus­ma­chen, son­dern sie nimmt den Le­ser auch bei des­sen Auf­bau an die Hand (sie­he Sei­te 38 ff.). Um die rich­ti­ge Ka­te­go­ri­sie­rung zu fin­den, un­ter­teilt die De­si­gne­rin die Pat­terns grob in funk­tio­na­le oder be­schrei­ben­de Mus­ter. Funk­tio­na­le Pat­terns sind kon­kre­te Mo­du­le des In­ter­faces, bei­spiels­wei­se ein

»Wir hat­ten die Il­lu­si­on, dass sich so ein Sys­tem selbst re­gu­liert« To­bi­as Rit­ter­bach, Ex­pe­ri­ence Ow­ner bei sip­ga­te in Düs­sel­dorf www.sip­ga­te.de

Newspapers in German

Newspapers from Germany

© PressReader. All rights reserved.