Agile Entwicklung – Warum Wireframing heute anders gedacht wird

Der Mensch ist ein visuelles Wesen, welches seine Umwelt größtenteils über die Augen wahrnimmt. Um den unzähligen optischen Reizen, die uns stets umgeben, Informationen zu entziehen und aus ihnen ein stimmiges Weltbild zu formen, ist unser Gehirn deshalb stets darum bemüht, das Gesichtete mit bereits Erfahrenem abzugleichen sowie sinnstiftende Muster zu suchen. Bei der Gestaltung einer Website, Applikation oder Software wird diesen Wahrnehmungsgesetzen Rechnung getragen, indem auf etablierte Methoden hinsichtlich der Darstellung und Informationsarchitektur zurückgegriffen wird. Dabei war es bislang Usus, die Grundidee des Navigation, Interface und Information Designs vorab mit Hilfe von Wireframes zu visualisieren und zu testen, die das „Grundgerüst“ der Anwendung bilden.

Doch in den vergangenen Jahren sprechen mehr und mehr Designer davon, dass die Zeit des Wireframings abgelaufen ist, da es im wahrsten Sinne als Zeitverschwendung angesehen werden sollte. Aber warum wird es gerade in einer Welt, in der man, dank verschiedener Software, relativ fix interaktive Prototypen erstellen kann, in Frage gestellt, inwieweit Wireframing überhaupt noch einen integralen Bestandteil des Design-Prozesses darstellt?

Wireframing im Kontext

Wireframes können als erster schematischer Entwurf einer Nutzeroberfläche verstanden werden, in dem normalerweise auf detaillierte Inhalte wie Texte oder Bilder verzichtet wird. Der Fokus liegt zuvorderst auf der Platzierung von Elementen und Darstellung der Interaktionsmöglichkeiten. Also welcher Anordnung oder auch Hierarchie folgen Header, Logo, Textfelder etc. und wie wird der Nutzer durch Menüs bzw. Befehlseingaben durch die Anwendung geführt.

Der Prozess des Wireframings erlaubt Designern somit erste kreative Ideen und Lösungsansätze im Hinblick auf Benutzer- und Geschäftsanforderungen zu konzipieren. Im Idealfall kann sich das Team durch den visuell aufbereiteten Leitfaden schnell einen gemeinsamen Überblick verschaffen sowie direkt mögliche Einschränkungen und weitere Potenziale identifizieren, um eine Designgrundlage für das User Interface (UI) und eine optimale User Experience (UX) herauszuarbeiten.

Gleichzeitig fällt es Stakeholdern durch die visuelle Natur der Wireframes oft einfacher, sich in das Projekt einzudenken und auszuloten, ob es sich lohnt, an der Konzeption festzuhalten, indem die steigende Komplexität eines digitalen Projektes Schritt für Schritt durchdrungen wird. Und auch Usability Testing ist selbst mit einem skizzenhaften Wireframe bereits möglich, um erste Nutzereindrücke zu sammeln. Denn auch ohne konkrete Inhalte oder Farbgebungen kann einem Nutzer das grundlegende Layout, die Navigation sowie Funktionalität aufgezeigt und, wenn nötig, erklärt werden, sodass so früh wie irgend möglich externes Feedback in die Überlegungen einfließen kann.

Low oder High Fidelity Wireframes

Wireframe ist aber nicht gleich Wireframe, da es extreme Unterschiede in Ausarbeitung und Detailgrad gibt. So werden Wireframes, die eher einer groben Skizzierung der Architektur und Interaktion gleichen, als LowFidelity Wireframes bezeichnet. Sie können einfach mit Stift und Papier, auf Whiteboards oder mittels Software per Drag and Drop erstellt werden und haben einen klaren Fokus auf das Wesentliche. Die angedachten Funktionen, einschließlich Navigation, sowie die Anordnung der Elemente stehen bei ihnen klar im Mittelpunkt, während non-funktionale Inhalte durch Platzhalter wie Blindtexte mehr oder minder ignoriert werden.

In der Regel sind solche Lo-Fi Wireframes statisch und somit nicht interaktiv. Sie sollen als rein konzeptioneller Entwurf verstanden werden und nicht das endgültige Erscheinungsbild der Anwendung widerspiegeln. Dadurch können sie von Designern schnell erstellt, abgeändert und getestet werden – ohne unnötig Zeit und Ressourcen zu verschlingen. Das frühe Hinzuziehen der Meinungen von Stakeholdern und Nutzern macht das Lo-Fi Wireframing dadurch zu einem hoch-iterativen Prozess, mit dem Detailgrade schrittweise ausgearbeitet sowie validiert werden können.

Das andere Spektrum im Wireframing bilden sogenannte High Fidelity Wireframes. Mit Hilfe von Applikationen wie OmniGraffle oder Axure lassen sich heutzutage mit recht geringem Aufwand detailliert ausgearbeitete Nutzeroberflächen erstellen, die nicht nur visuell einem möglichen Endprodukt entsprechen, sondern bei denen auch interaktive Elemente bereits erlebbar gemacht werden können. Zumindest in der Theorie können so im Gegensatz zu Lo-Fi-Wireframes realistischere Testings durchgeführt und  bereits ein Produkt präsentiert werden, welches weit über ein reines Konzept hinausgeht.

Wir reden hier von Theorie, da Hi-Fi Wireframes auch ihre Tücken haben, wenn Designer zu schnell zu komplexe Anwendungen präsentieren wollen. Denn recht weit ausgearbeitete Wireframes können dazu führen, dass sowohl Stakeholder als auch Tester von den optischen Reizen geblendet werden und die Funktionalität zu einer Nebensächlichkeit verfällt. Ihr visuelle Glanz übertüncht sozusagen die hinter einer Anwendung stehende Komplexität und verengt Blickfeld aller Beteiligten. Zudem bedeutet das Scheitern eines Hi-Fi Wireframes, dass ein Designer sich von einer Vielzahl von Ideen trennen muss, in deren Umsetzung er viel Aufwand gesteckt hat. Man sollte sich also hüten vom Start weg zu viel Zeit und Ressourcen in aufwändige Wireframes zu stecken, wenn die grundlegenden Rahmenbedingungen noch nicht ausreichend verortet wurden und Usability Tests nicht verwässert werden sollen.

Machen agile Methoden Hi-Fi Wireframing obsolet?

Wenn heutzutage also davon geredet wird, dass Wireframes keine Daseinsberechtigung mehr haben, obwohl sie doch augenscheinlich Mehrwert versprechen, geht es hauptsächlich um den Prozess des HighFidelity Wireframings. Denn Hi-Fi Wireframing hat mit dem Ursprungsgedanken eines Wireframes als konzeptionellem Entwurf nicht mehr viel gemein und zielt häufig eher darauf, etwas recht Konkretes - unter Umständen verfrüht −  in Stein zu meißeln. Es erinnert dabei mehr an ein Relikt aus traditionellen Wasserfallmodellen, anstatt an einen zentralen Bestandteil des agilen Arbeitens.

In einer Welt, in der iterative und flexible Methoden im digitalen Kontext allein schon deshalb unabdingbar sind, da sich Technologien oder Trends rasant wandeln bzw. manifestieren und auf neue Gegebenheiten ebenso schnell reagiert werden muss, sollten auch Wireframes so zielführend wie nur möglich eingesetzt werden. Das schrittweise Erarbeiten eines groben Rahmens, der stetig im Detailgrad wächst und für das wahrhaftige Verstehen der Aufgabe sowie der Lösungswege notwendig ist, erlaubt hierbei eine situative Anpassbarkeit im Sinne der agilen Entwicklung, die beim Überspringen von Zwischenschritten mit Hi-Fi Wireframes nicht gegeben ist.

Bei der Planung einer neuen Applikation, Website oder Software sollte man sich deshalb zunächst auf Lo-Fi Wireframes begrenzen, mit denen unglaublich einfach Ideen schnell erarbeitet, erklärt und greifbarer gemacht werden können. Da das Skizzieren und Abändern solcher Wireframes kaum Aufwand erfordert und im Prinzip on-the-fly gemacht werden kann, fördert es den engeren Austausch sowohl mit Shareholdern, die aktiver in den Entwicklungsprozess eingebunden sind, als auch mit Entwicklern, wodurch in höherer Frequenz zielführende Abstimmungen erfolgen können.

Graduell zum Hi-Fi-Ergebnis

Auf gewisser Ebene könnte man auch sagen, dass das Lo-Fi Wireframing die rudimentärste Form der Prototypisierung und des iterativen Entwicklungsprozesses darstellt, indem die Kernkomponenten früh getestet und Nutzerfeedback gesammelt werden kann. Es eignet sich daher als ideen- sowie richtungsweisendes Startelement der zyklischen Design-Thinking-Methode und verdeutlicht auf jedem weiteren Schritt den notwendigen Fokus auf die Hauptfunktionen des Produktes, welcher bei der Erarbeitung eines marktreifen, nutzerzentrierten MVP (Minimum Viable Product) unabdingbar ist. Detailgrad und Startpunkt hängen dabei natürlich auch immer vom Stand des Projektes und den bereits vorhandenen Komponenten bzw. dem Designsystem ab.

Schlussendlich geht es nicht um Hi-Fi Wireframes, sondern um Hi-Fi-Ergebnisse. Diese können nur durch moderne Arbeitsweisen mitsamt agiler Methoden erreicht werden, wenn es um das effiziente Gestalten von Services und Produkten sowie das Durchdringen einer stetig steigenden Komplexität im digitalen Kontext geht. Bei forwerts leben wir diese agile Denk- und Arbeitsweise gemeinsam mit unseren Kunden, da wir uns den Anforderungen dieser neuen Zeit und den darin verankerten Möglichkeiten bewusst sind. Im Kontext von Wireframes bedeutet dies sich nicht vom Start weg in seinen Gedankengängen und Ideen zu beschneiden, sondern sich mit einem offenen Mindset in ein Projekt einzuarbeiten und sich ähnlich wie ein Bildhauer nach und nach der Essenz des Endproduktes zu nähern.

_______

Quellen:

https://soumeekar.medium.com/are-wireframes-a-waste-of-time-nowadays-4f2f5ac5886f

https://uxdesign.cc/why-low-fidelity-wireframe-curious-in-product-design-c7bea87bc23d

https://www.interaction-design.org/literature/topics/wireframing

https://www.creativebloq.com/netmag/why-wireframes-should-be-left-die-31411165

https://www.usabilityblog.de/wann-wireframes-wann-hi-fi-prototypen/

https://t2informatik.de/wissen-kompakt/wireframing/