UXC-P04: Wire­frames

Wire­frames sind ein zen­tra­les Werk­zeug im User Ex­pe­ri­ence (UX) Design, das dazu dient, die Grund­struk­tur einer Web­sei­te oder App visuell dar­zu­stel­len, bevor mit dem de­tail­lier­ten Design und der Ent­wick­lung be­gon­nen wird. Sie sind sche­ma­ti­sche Dar­stel­lun­gen, die die Plat­zie­rung von Ele­men­ten und die Funk­tio­na­li­tät der Be­nut­zer­ober­flä­che skiz­zie­ren, und helfen dabei, die Be­nut­zer­füh­rung und das Layout zu planen. Wire­frames un­ter­stüt­zen die Kom­mu­ni­ka­ti­on zwi­schen De­si­gnern, Ent­wick­lern und Stake­hol­dern und dienen als Basis für wei­ter­füh­ren­de Designs und Pro­to­ty­pen (Garrett, 2010).

Vor­be­rei­tung

Die Er­stel­lung von Wire­frames beginnt mit einer gründ­li­chen Analyse der Be­nut­zer­an­for­de­run­gen und der Kern­funk­tio­nen des Pro­dukts. In dieser Phase ist es wichtig, klare Ziele für das Projekt zu de­fi­nie­ren und die Ziel­grup­pe genau zu ver­ste­hen. De­si­gner sollten auch bereits vor­han­de­ne User-Re­se­arch-Daten be­rück­sich­ti­gen, um si­cher­zu­stel­len, dass die Wire­frames auf realen Be­nut­zer­be­dürf­nis­sen ba­sie­ren (Ro­sen­feld et al., 2002).

Durch­füh­rung

Die ei­gent­li­che Er­stel­lung von Wire­frames erfolgt meist digital, kann jedoch auch auf Papier be­gon­nen werden. Moderne UX-Design-Tools wie Sketch, Figma oder Adobe XD er­mög­li­chen es De­si­gnern, schnell und ef­fi­zi­ent in­ter­ak­ti­ve Wire­frames zu er­stel­len. Während dieses Pro­zes­ses werden die Haupt­kom­po­nen­ten der Be­nut­zer­ober­flä­che, wie Na­vi­ga­ti­ons­leis­ten, Buttons und In­halts­be­rei­che, po­si­tio­niert und in ihren Grund­funk­tio­nen de­fi­niert (Brown, 2011).

Aus­wer­tung

Nachdem ein erster Entwurf der Wire­frames fer­tig­ge­stellt ist, werden diese in der Regel in meh­re­ren Feed­back-Runden mit Stake­hol­dern und po­ten­zi­el­len Nutzern eva­lu­iert. Dies er­mög­licht es, früh­zei­tig An­pas­sun­gen vor­zu­neh­men und si­cher­zu­stel­len, dass das end­gül­ti­ge Produkt den Be­nut­zer­an­for­de­run­gen ent­spricht. Die ite­ra­ti­ve Ver­fei­ne­rung der Wire­frames ist ein kri­ti­scher Schritt, um De­sign­feh­ler zu mi­ni­mie­ren und die Usa­bi­li­ty zu ma­xi­mie­ren (Ar­no­witz et al., 2007).

Vor- und Nach­tei­le

Die Methode bietet Klar­heit und Fokus auf die funk­tio­na­le Struk­tur, was Ab­len­kun­gen durch De­sign­ele­men­te ver­mei­det und die Kom­mu­ni­ka­ti­on sowie das Ver­ständ­nis zwi­schen Pro­jekt­be­tei­lig­ten fördert. Sie er­mög­licht zudem die früh­zei­ti­ge Er­ken­nung und Lösung von Usa­bi­li­ty-Pro­ble­men. Nach­tei­le sind mög­li­che Miss­in­ter­pre­ta­tio­nen durch das Fehlen von Design- und Farb­de­tails und das Risiko, dass sich die Kon­zen­tra­ti­on zu sehr auf Layout und Struk­tur statt auf das Ge­samt­erleb­nis richtet. Au­ßer­dem kann es zu einer ein­ge­schränk­ten Vor­stel­lung der end­gül­ti­gen Be­nut­zer­ober­flä­che kommen, wenn Stake­hol­der nicht mit Wire­frames ver­traut sind.

• Garrett, J. J. (2010). The Elements of User Experience: User-Centered Design for the Web and Beyond. New Riders. Bietet eine detaillierte Darstellung der Elemente der Benutzererfahrung, einschließlich der Rolle von Wireframes im Designprozess.
• Rosenfeld, L., Morville, P., & Arango, J. (2002). Information Architecture for the World Wide Web. O’Reilly Media. Erklärt die Bedeutung der Informationsarchitektur und deren Darstellung durch Wireframes.
• Brown, D. M. (2011). Communicating Design: Developing Web Site Documentation for Design and Planning. New Riders. Diskutiert verschiedene Formen der Designkommunikation und Dokumentation, einschließlich Wireframes.

• Arnowitz, J., Arent, M., & Berger, N. (2007). Effective Prototyping for Software Makers. Morgan Kaufmann. Beschreibt verschiedene Prototyping-Techniken und deren Einsatz im Software-Entwicklungsprozess.
• Greenberg, S., Carpendale, S., Marquardt, N., & Buxton, B. (2008). Sketching User Experiences: The Workbook. Morgan Kaufmann. Bietet praktische Anleitungen zum Skizzieren und Prototyping im UX-Design, einschließlich der Erstellung von Wireframes.