Mit Wireframes & Prototypes zur optimalen UX

Lese­dau­er: 5–6 Minuten

Wire­frames und Pro­to­ty­pen sind die bei­den Design-Ergeb­nis­se, die am häu­figs­ten mit UX-Design (User Expe­ri­ence Design) in Ver­bin­dung gebracht werden. Viele Men­schen im Bereich des digi­ta­len Designs ver­wen­den die Begrif­fe “Wire­frame” und “Pro­to­typ” syn­onym, es gibt jedoch signi­fi­kan­te Unter­schie­de zwi­schen den bei­den: Sie sehen unter­schied­lich aus, sie kom­mu­ni­zie­ren unter­schied­li­che Dinge und sie die­nen unter­schied­li­chen Zwe­cken. Was genau ist also ein Wire­frame und wo liegt der Unter­schied zu einem Pro­to­typ? In die­sem Arti­kel klä­ren wir die Grund­la­gen hin­ter den bei­den Begrif­fen und zei­gen auf, wie sie in den UX-Design­pro­zess einfließen.

Wireframes

Ein Wire­frame ist eine sche­ma­ti­sche Dar­stel­lung einer Sei­ten­ober­flä­che, die ver­wen­det wird, um die Plat­zie­rung von Inhal­ten und funk­tio­na­len Ele­men­ten auf einer Web­site zu demons­trie­ren. Sie hel­fen dabei, Bezie­hun­gen zwi­schen ein­zel­nen Sei­ten her­zu­stel­len und die­nen als Grund­la­ge für Pro­to­ty­pen. Wire­frames ver­wen­den ein­fa­che For­men, um visu­el­le Dar­stel­lun­gen von Sei­ten­lay­outs zu erstel­len. Sie werden ver­wen­det, um die Struk­tur der ein­zel­nen Sei­ten auf­zu­zei­gen — also wie die Sei­ten­ele­men­te zusam­men­ar­bei­ten werden, wo der Inhalt sein wird und wie die Sei­ten mit­ein­an­der ver­bun­den werden bzw. wie die Benut­zer­ober­flä­che aus der Sicht des Benut­zers funk­tio­nie­ren wird.

Wie sieht ein Wireframe aus und welchen Zweck erfüllt es?

Wire­frames haben sehr begrenz­te visu­el­le Eigen­schaf­ten, da die meis­ten Design­ele­men­te (wie Bil­der, Vide­os, Far­ben, fina­ler Text usw.) nicht ent­hal­ten sind. Anstel­le die­ser spe­zi­fi­schen Design­ele­men­te ver­wen­den die Desi­gner in der Regel Platz­hal­ter. Desi­gner ver­fol­gen die­sen Ansatz aus einem bestimm­ten Grund: Eine begrenz­te Anzahl visu­el­ler Ele­men­te und eine Grau­stu­fen-Farb­pa­let­te hel­fen dabei, sich auf das Lay­out und die Struk­tur der Seite zu kon­zen­trie­ren, anstatt von visu­el­len Detail­aspek­te des Designs abge­lenkt zu werden.

Wann sollten Sie ein Wireframe erstellen?

Kon­zepter erstel­len Wire­frames in der Regel vor Beginn des Design­pro­zess, also bevor das Team mit der Arbeit an den visu­el­len Details beginnt. In der Wire­f­raming-Phase ist es viel ein­fa­cher, große Ände­run­gen vor­zu­neh­men. Da Wire­frames rela­tiv schnell zu erstel­len sind, kön­nen Desi­gner mit dem Hin­zu­fü­gen oder Ent­fer­nen von Objek­ten, dem Ver­schie­ben von Inhal­ten und Objek­ten sowie dem Grup­pie­ren von Ele­men­ten experimentieren.

Wie wird ein Wireframe erstellt?

Auch wenn der Arbeits­ab­lauf bei jedem Wire­frame unter­schied­lich ist, umfasst das der Pro­zess meist die fol­gen­den Schrit­te: Grund­sätz­lich kön­nen Wire­frames von Hand oder digital mit einem Tool wie z.B. Adobe XD erstellt werden.

Als Aus­gangs­punkt für das Wire­f­raming soll­te zunächst die Ziel­grup­pe im Detail ana­ly­siert werden. Je mehr man über seine Ziel­grup­pe erfährt, desto bes­ser kann man ver­ste­hen, wie man ihre Wün­sche und Bedürf­nis­se erfül­len kann. Daher gilt es, die Hand­lun­gen zu defi­nie­ren, die der spä­te­re User auf der Web­site aus­füh­ren soll. Das Bestim­men des Weges, den die Benut­zer bei der Ver­wen­dung der Web­site nehmen sol­len, kann dabei hel­fen, einen opti­ma­len Benut­zer­fluss, den sog. User Flow, zu kreieren.

Bei der Erstel­lung der Wire­frames soll­te man sich vor allem Gedan­ken dar­über machen, wie Benut­zer mit den ein­zel­nen Ele­men­ten inter­agie­ren könn­ten, von Schalt­flä­chen und Links bis hin zu Navi­ga­ti­ons­me­nüs. Außer­dem soll­te die Benut­zer­freund­lich­keit der Wire­frames getes­tet werden, um früh­zei­tig zu erken­nen, was funk­tio­niert und was ver­bes­sert werden sollte.

Die Vorteile des Wireframing: Ein Bild sagt mehr als tausend Worte.

Wire­frames hel­fen Designern, Ideen zu kom­mu­ni­zie­ren und Design-Ent­schei­dun­gen zu ver­mit­teln. Beim Betrach­ten eines Wire­frames soll­te man eine gute Vor­stel­lung davon bekom­men, wel­che Screens eine Web­site haben wird. Selbst ein Wire­frame für eine Web­site oder eine mobi­le App vol­ler Platz­hal­ter hilft dem Team zu sehen, wie sich das Design ent­wi­ckelt. Pro­jekt­do­ku­men­ta­ti­on vor­be­rei­ten. Wire­frames die­nen auch als Refe­renz­punkt für funk­tio­na­le Spezifikationen.

Die Grenzen des Wireframing

Da es sich beim Wire­frame-Design um eine sche­ma­ti­sche und sta­ti­sche Dar­stel­lung des fina­len Designs han­delt, eig­nen sich Wire­frames nur bedingt zur Beur­tei­lung der all­ge­mei­nen Benut­zer­er­fah­rung (der soge­nann­ten Usa­bi­li­ty). Eben­so sind Wire­frames nicht das beste Werk­zeug, um den Pro­jekt­be­tei­lig­ten ein Kon­zept zu demons­trie­ren, da auch sie Schwie­rig­kei­ten haben kön­nen, zu ver­ste­hen, wie das end­gül­ti­ge Design aus­se­hen wird. Außer­dem hel­fen Wire­frames nicht, wenn kom­ple­xe Design-Ideen beschrie­ben werden müs­sen, wie z.B. ani­mier­te Effek­te oder kom­ple­xe Über­gän­ge. Wire­frames kön­nen zwar zei­gen, wo die Inter­ak­ti­on beginnt und endet, aber sie beschrei­ben nicht, was dazwi­schen passiert.

Prototypen

Pro­to­ty­p­ing hin­ge­gen ist der Pro­zess der Erstel­lung eines inter­ak­ti­ven Erleb­nis­ses. Ein Pro­to­typ stellt das End­pro­dukt dar, ein­schließ­lich Simu­la­tio­nen der Inter­ak­tio­nen auf der Benut­zer­ober­flä­che. Im Gegen­satz zu Wire­frames, die oft ähn­lich aus­se­hen, kön­nen Pro­to­ty­pen stark vari­ie­ren. Pro­to­ty­pen kön­nen ein­fa­che Arte­fak­te sein, die nur grund­le­gen­den Inter­ak­tio­nen ähneln, bis hin zu codier­ten Pro­to­ty­pen, die fast wie ein ech­tes Pro­dukt aus­se­hen und funktionieren.

Was ist der Zweck eines Prototyps?

Pro­to­ty­pen die­nen als Brü­cke zum fina­len Pro­dukt. Sie werden erstellt, wenn visu­el­les und inter­ak­ti­ves Design mit­ein­an­der ver­bun­den werden und bevor man zur eigent­li­chen Ent­wick­lung über­geht. Das Ziel eines Pro­to­typs ist es, die Inter­ak­ti­on zwi­schen dem Benut­zer und der Benut­zer­ober­flä­che zu simu­lie­ren und zu ver­ste­hen, wie das End­pro­dukt funk­tio­nie­ren wird. Dadurch eig­net sich ein Pro­to­typ gut für abschlie­ßen­de Tests mit “echten” Benut­zern. Auf diese Weise kön­nen Desi­gner sowohl die Benut­zer­freund­lich­keit als auch die Mach­bar­keit von Pro­dukt­de­signs erproben.

Fazit

Wire­f­raming und Pro­to­ty­p­ing sind inte­gra­le Bestand­tei­le des Design­pro­zes­ses. Das Wich­tigs­te, was man bei der Erstel­lung beach­ten soll­te: Man soll­te nie­mals ein Wire­frame oder einen Pro­to­typ erstel­len, ohne die Ziel­grup­pe und deren Bedürf­nis­se im Kopf zu haben. Der Benut­zer soll­te im Mit­tel­punkt eines jeden Designs ste­hen. So lässt sich sicher­stel­len, dass die Nutzer auf der Web­site eine opti­ma­le User Expe­ri­ence haben.