- Anstatt Wireframes zu verwenden, beginne mit einer starken strategischen Ausrichtung, um sicherzustellen, dass Designentscheidungen auf einem klaren Verständnis der Ziele basieren.
- Wireframes bieten nicht die nötige Tiefe für aussagekräftige Usability-Tests. Ein realistischeres Prototyping verbessert das Feedback.
- Wireframes sind zu abstrakt, um reale Interaktionen darzustellen. Produktteams müssen frühzeitig spezifische Designs sehen, um fundierte Entscheidungen treffen zu können.
3 gute Gründe, keine Wireframes zu verwenden
Robert Goesch • 20.10.2023
Wie du Zeit und Geld sparst und bessere Ergebnisse erzielen kannst, wenn du auf Wireframes verzichtest, erkläre ich in diesem Artikel. Die Erkenntnisse basieren auf sechs Jahren Praxis in millionenschweren Projekten. Doch nicht jeder ist bereit dafür.
Kurz und knapp
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...
Was ist ein Wireframe?
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:
- Die ersten sind Skizzen, die mit Stift und Papier oder Whiteboard und Marker erstellt werden. Es sind Low-Fidelity-Wireframes.
- 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.
1. Die Strategie bestimmt das Erscheinungsbild, nicht der Wireframe
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.
2. Wireframes sind zu abstrakt, um zuverlässige Insights zu gewinnen
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.
3. Produktteams brauchen konkrete Designs, um nachhaltige Entscheidungen zu treffen
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.
In vielen Fällen weicht das Design nur marginal von den ursprünglichen Wireframes ab. Sie werden zu einer Art Mandala, die ausgemalt werden. Dabei hat sich in diesem Stadium eigentlich noch niemand über die Form und die Kommunikation der Inhalte im Detail Gedanken gemacht. Die Wireframes enden als Korsett, in das man sich selbst hineingezwängt hat.
Wir können uns nicht vor Geschmacksdiskussionen schützen, indem wir mit Wireframes abstrahieren. Damit degradieren wir das Design zu einem ästhetischen Layer, über den wir »separat und zu einem späteren Zeitpunkt« entscheiden. Ohne das zugrunde liegende Interaktionsdesign und dessen visueller Ausprägung lassen sich heutzutage kaum valide Einsichten über technische Anforderungen, die Informationsarchitektur oder gar der User Experience gewinnen.
Es ist wichtig, sich daran zu erinnern, dass das gesamte digitale Erlebnis heute mehr denn je auf so viel mehr als nur dem Inhalt selbst beruht. Die Art und Weise, wie der Inhalt auf der Seite angeordnet ist, wann er präsentiert wird und wie er präsentiert wird, ist genauso wichtig für das Produkt. Um großartige Nutzererlebnisse zu schaffen, setzen wir so früh wie möglich auf Design-Prototypen.
Willst du dich von Wireframes verabschieden?
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.
1. Lass dich auf den Designprozess ein
Wie du bereits weißt, digitale Produkte haben kein Fertigstellungsdatum. Gleiches gilt für ihr Design. Release über Release streben Produkt-Teams danach, das Nutzungserlebnis zu optimieren und auf den Markt zu reagieren. Das Design ist Teil davon. Der Status »final« ist es nicht. Der erste Design-Entwurf wird nicht der letzte sein. Und bevor er das Licht der Welt erblickt, wird er sich noch einige Male gewandelt haben. Natürlich dürfen wir nach Perfektion streben, aber heute werden wir sie nicht erreichen. Deshalb starten wir mit dem Design in Stunde eins. Und hören nicht auf damit.
2. Finde Designer:innen mit dem richtigen Skillset
Es verlangt ein hohes Maß an Gestaltungs-Expertise, um sich abseits von Wireframes zu bewegen. Titel wie User Experience Designer, Interface Designer, Service Designer und andere tragen alle das Wort Design mit sich, doch verlangen nicht zwangsläufig eine gestalterische Ausbildung. Doch gerade diese ist der Schlüssel, um Architektur, Interaktion und visuelle Erscheinung aus einer Hand zu betrachten. Deshalb gibt es bei uns keine Trennung zwischen den Designdisziplinen, stattdessen Spezialisierungen, welche auf einer gestalterischen Grundausbildung fußen.
Zu guter Letzt, ändere dein Mindset
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.
