3 gute Gründe, keine Wireframes zu verwenden

Der Abschied von Wireframes fiel uns nicht schwer, da sie uns als Designwerkzeug nie gestanden haben. Und so kommt es, dass seit der Gründung von DUMBO in unserem Designprozess keine Wireframes bei der Gestaltung digitaler Produkte erstellt wurden. Ehrlich gesagt, stand das für unsere Kunden auch nie zur Diskussion, denn sie konnten spüren, dass der Verzicht auf Wireframes den Designprozess beschleunigt und die Qualität der Ergebnisse verbessert hat.

Viele mögen argumentieren: »Mit Wireframes kann ich ein Konzept besser präsentieren«, »Ich kann Ideen schnell auf ihre Usability hin testen« oder »Sie sind unverzichtbar für die Zusammenarbeit von Entwicklern und Designern!« nicht zu vergessen »In kleinen Projekten kann man durchaus ohne sie auskommen, aber spätestens wenn es um ernstzunehmende Größen geht, sind sie unverzichtbar«

Aber in den sechs Jahren, in denen wir unser Designstudio betreiben hat niemand gefragt: "Wo sind die Wireframes?"

Wir möchten dir nicht nur erklären, warum du Zeit und Arbeit sparen kannst, indem du auf Wireframing verzichtest, sondern auch, warum die Verwendung von Wireframes der Qualität deiner digitalen Produkte schaden kann.

Doch zunächst sollten wir uns darüber im Klaren sein, was wir meinen, wenn wir von Wireframes sprechen...

Im Designprozess stellt man mit Wireframes visuell die Struktur und die Funktionen eines Interface dar. Üblicherweise abstrahiert in Graustufen und mit Platzhalter-Inhalten. Das Spektrum ist groß, allerdings lassen sich grob zwei Klassen unterscheiden: 

1. Die ersten sind Skizzen, die mit Stift und Papier oder Whiteboard und Marker erstellt werden. Es sind Low-Fidelity-Wireframes. 
2. Die zweiten sind Konzeptpapiere, die mit Hilfe von Grafikprogrammen erstellt werden. Dabei spricht man von High-Fidelity-Wireframes. 

Anders als bei einer Skizze wird die Lösung greifbarer und der Detailgrad höher. Man bedient sich herkömmlicher Interaktionsmuster, um die Funktionalität darzustellen und eine Anleitung für die weitere Produktentwicklung zu bieten. 

Wenn wir sagen, man soll keine Wireframes nutzen, dann sprechen wir von High-Fidelity-Wireframes. Solche, die mit Hilfe von Software erstellt werden und als Blueprint oder Konzept des User Interface herhalten. Low-Fidelity-Wireframes brauchen wir hingegen alle, um unseren Gedanken Ausdruck zu verleihen und gemeinsam mit anderen Ideen zu entwickeln. Ich muss aber gestehen, dass ich diese eher Skizze oder Scribble nennen würde. 

Der Einfachheit halber sprechen wir also über Wireframes als Arbeitsergebnis - etwas, das du an Kunden schickst. Das sind die, auf die wir verzichten können.

Wireframes sollen uns ermöglichen, über strategische und inhaltliche Fragen zu entscheiden. Doch schon vor dem ersten Entwurf müssen wir einige grundlegende Fragen klären, wie zum Beispiel: Welches Ziel wollen wir mit der Seite, die wir gestalten, erreichen und wie können wir dieses Ziel erreichen?

Mit den Antworten auf diese Fragen definieren wir die strategische Stoßrichtung und setzen die Eckpfeiler für unsere gestalterischen Aktivitäten. Dass wir die Strategie nicht gleichzeitig mit dem Visual Design entwickeln, steht außer Frage. Aber das Erstellen von Wireframes kann uns lediglich dabei unterstützen, die erarbeiteten Thesen einer Strategie zu visualisieren, nicht sie zu formulieren. 

Vorher müssen wir ein gemeinsames Verständnis aller Beteiligten über das angestrebte Ziel herstellen. Bei DUMBO schaffen wir dieses Verständnis mit Hilfe eines »Interaction Blueprints«, basierend auf unserem »Interaction Archetype« Framework. Damit ermöglichen wir, strategische Ziele gemeinsam zu formulieren und zu entscheiden, mit welchen Maßnahmen wir diese verfolgen – auch ohne gestalterisches Know-how. 

Der Interaction Blueprint dient dabei als Bezugsrahmen um die Ziele und Aufgaben einer Interaktion zu beschreiben. Das erlaubt uns auf strategischer Ebene Entscheidungen zu treffen, welche die gestalterischen, inhaltlichen und funktionalen Maßnahmen informieren. Auf diese Weise stellen wir sicher, dass das Design diesen Entscheidungen folgt und ihnen Ausdruck verleiht.

Wireframes werden oft herangezogen, um erste Hypothesen schon in einem frühen Entwicklungsstadium in Form von User- oder Usability-Tests zu prüfen. Das Ziel ist, so schnell wie möglich Evidenz zu schaffen. Man hofft mit Wireframes Einsichten über die Produkt-Experience zu gewinnen und das »Für und Wider« der Lösung eruieren zu können. 

Die Idee ist nicht schlecht, aber leider sind Nutzer:innen nicht immer in der Lage, Informationen aus einem Wireframe zu entnehmen und zu verstehen, wie sie in einem digitalem Erlebnis münden. Wireframes sind einfach zu weit von dem entfernt, was Nutzer im Jahr 2023 von digitalen Anwendungen erwarten. Bei einem Test mit einem Wireframe erleben die Nutzer nicht die Lesbarkeit, die Farben oder die Ergonomie und damit nicht annähernd die Usability des Produkts.

Wonach wir bei einem Test letztlich streben, ist die Immersion. Wir wollen dem realen Kontext der Nutzung so nah wie möglich kommen. Im besten Fall können wir als stille Beobachter die Reaktionen, Gesten, Interaktionen und Gedanken der Probanden wahrnehmen. High-Fidelity-Wireframes können eine solche Simulation nicht leisten. Unserer Erfahrung nach braucht es dazu nicht einen entwickelten Prototypen, der die Marke repräsentiert und alle Funktionalitäten umfasst. Ein Click-Dummy reicht aus. Entscheidend ist, dass der Testgegenstand auf einem Endgerät läuft, mit realen Inhalten bestückt ist und sich visuell im Gros der Produkte bewegt, mit welchen sich die Zielgruppe tagtäglich beschäftigt. 

Je eher wir ein Erlebnis schaffen, das einer Interaktion mit einem echten Produkt nahekommt, desto schneller können wir belastbare Aussagen gewinnen. 

Bei Design-Präsentationen befürchtet man stets, in Geschmacksfragen abzudriften. Wireframes sollen – so die Idee – mit ihrer abstrakten Form die nötige Distanz aufbauen, um die grundlegenden Ideen möglichst sachlich diskutieren zu können. Und Wireframes sind gerade noch so greifbar, dass sie gemeinsame Entscheidungen über die Informationsarchitektur, dem Nutzungserlebnis und der technischen Anforderungen ermöglichen. Oder?

Leider bringt gerade diese Abstraktion Probleme mit sich. In einem Wireframe zerlegen wir Navigationsleisten, Galerien und Formulare in ein repräsentatives und allgemeingültiges Interaktionsmuster. Sie sind nichts weiter als Symbole, die eine bestimmte Art der Interaktion darstellen.

Zeichen müssen jedoch entschlüsselt und interpretiert werden. Jeder sieht darin etwas anderes. So etabliert man ohne Absicht unbewusste Erwartungshaltungen an die Gestaltung. Je weiter wir uns im Verlauf des Design-Prozesses von der jeweiligen Vorstellung entfernen, desto größer wird die Enttäuschung.

Wir haben festgestellt, dass es besser ist, die Interaktion zwischen Mensch und Maschine von Anfang an in einer kreativen Auseinandersetzung zu gestalten. Unserer Erfahrung nach entstehen so brillante Produkte. Allerdings gibt es zwei Dinge, die du beachten musst, wenn du dieses Mindset übernehmen willst.

Um die Wireframes hinter dir zu lassen, braucht es ein Umdenken. Soviel kann ich sagen: Wir haben seit 6 Jahren keine Wireframes mehr verwendet, und das hat sich nur positiv auf die Produkte ausgewirkt, die wir entwickelt haben. Der Verzicht auf Wireframes hat dazu geführt, dass unsere Designer:innen in der Lage sind, strategisch zu gestalten, qualitatives Feedback früher zu erlangen und schließlich das digitale Erlebnis von Anfang bis Ende zu gestalten. Unsere Ergebnisse sind besser als je zuvor. Und es gibt keinen Grund umzukehren.