5-Schritte-Wireframing-Prozess zur Entwicklung besserer Produkte
Ich bin mir sicher, dass Sie entweder in Ihren Produktmanagement-Kursen oder von Kolleginnen und Kollegen schon von den Vorteilen des Wireframings gehört haben. Ich gehe auch davon aus, dass Sie versucht haben, irgendeine Form eines Wireframing-Prozesses in Ihr Produkt einzubringen.
Aber funktioniert Ihr Prozess gut? Können Sie aus Ihren Wireframes das Optimum herausholen, so wie Sie sie derzeit einsetzen? Nun, das hängt wirklich von dem Prozess ab, den Sie verwenden.
Um die Effektivität Ihres Wireframings zu steigern, möchte ich meine Erfahrungen teilen und Ihnen einen Wireframing-Prozess vorstellen, den ich für den besten überhaupt halte.
Want more from The CPO Club?
Sign up for a free membership to complete reading this article:
Have an account? Log In
Wireframing ist ein wesentlicher Bestandteil des UX-Design-Prozesses
Wireframes sind grobe visuelle Darstellungen Ihres Produkts, mit denen Sie zeigen können, wie das Produkt aussehen und funktionieren soll. Mit diesen Visualisierungen können Sie Ihre Ideen testen und weiterentwickeln, bevor Sie Ihre Entwickler bitten, in den Entwicklungsprozess einzusteigen – das spart Zeit und Geld.
Mir gefällt die Definition von Wireframing der User-Experience-Expert:innen von NN/g besonders gut, da sie den entscheidenden Vorteil davon auf den Punkt bringt.
Schnelle und kostengünstige Methode, um schon früh mit Skizzen und Papier größere Usability-Probleme zu erkennen. Perfekte Ergänzung für Agile- und Lean-Prozesse.
Ganz egal, welche Art des Wireframings Sie wählen (auf Papier zu zeichnen ist völlig in Ordnung!) oder welches Wireframing-Tool Sie nutzen möchten (dazu sehen Sie sich gerne unsere Liste der besten Wireframing-Tools an), ich empfehle Ihnen, diesem Prozess zu folgen, den ich entwickelt habe – nach dem Ausprobieren fast aller Wireframing-Prozesse, die es gibt.
Schritt #1: Stellen Sie sicher, dass Sie Ihre Nutzer:innen gut genug kennen
Großartiges Design beginnt mit einem Team, das seine Nutzer:innen gut kennt. Schließlich – wer braucht Ihr Design und das Produkt, das daraus entsteht, wenn es die Bedürfnisse der Menschen, für die es gedacht ist, nicht erfüllt? Deshalb ist der wichtigste Schritt, den Sie vor dem Wireframing machen sollten, eine gründliche Nutzerforschung.
Eigentlich sollte Nutzerforschung über den gesamten Lebenszyklus Ihres Wireframing-Prozesses hinweg laufen (und auch danach), aber konzentrieren wir uns hier einmal auf die Anfangsphase, wenn Sie die Bedürfnisse und den Alltag Ihrer zukünftigen Kund:innen verstehen möchten.
Hier sind einige wichtige Aktivitäten, die ich Ihnen für diese Phase empfehle:
Explorative Interviews: Sie wollen wissen, was Ihre Nutzer:innen wirklich wollen? Wie wäre es, sie einfach direkt zu fragen? Beginnen Sie mit einer Liste von Fragen, die Ihre Nutzer:innen dazu bringen, über ihre Probleme und die Lösungen, die sie momentan einsetzen, zu sprechen.
Anschließend können Sie potenzielle Nutzer:innen über soziale Medien, spezialisierte Plattformen wie Userinterviews oder Respondent oder sogar auf Messen und Veranstaltungen rekrutieren.
Schließlich führen Sie das Interview entweder mit einem Aufnahmegerät (damit Sie es später analysieren können) oder mit einem Interview-Partner, der neben Ihnen sitzt und Notizen macht.
Hinweis: Im Idealfall machen Sie beides.
Umfragen: Interviews liefern wertvolle qualitative Daten, mit denen Sie die Beweggründe hinter den Nutzerbedürfnissen und deren Verhalten entdecken. Mit Umfragen erhalten Sie eine Mischung aus qualitativen und quantitativen Daten und können Ihre Ergebnisse mit statistischer Signifikanz validieren.
Hier gehe ich nicht tiefer ins Detail, denn wir haben einen kompletten Leitfaden zu Umfrage-Fragen, den Sie sich anschauen können.
Feldstudien: Bei dieser Methode beobachten Sie Ihre Nutzer:innen in ihrem „natürlichen Habitat“. Das bedeutet, Sie sind entweder virtuell oder physisch in der Umgebung präsent, in der Ihre Zielgruppe genau die Probleme erlebt, die Sie lösen möchten.
Nehmen wir als Beispiel, dass Sie ein Tool entwickeln, mit dem sich Social-Media-Videos leichter schneiden lassen. Ihre Feldstudie wäre dann, einen Social-Media-Influencer beim Filmen eines TikTok-Videos zu beobachten, den Schnitt zu verfolgen und schließlich das Hochladen in seinen Kanal zu begleiten.
Obwohl Feldstudien oft schwer zu organisieren sind (nicht alle Nutzer:innen möchten sich im Alltag über die Schulter schauen lassen), liefern sie den reichsten Kontext und die besten Erkenntnisse über Ihre Nutzer:innen.
Entdeckungs-Workshops mit Stakeholdern: Ja, herausragendes UX-Design orientiert sich an den Bedürfnissen der Nutzer:innen, aber vergessen wir dabei nicht Ihre Schlüssel-Stakeholder. Auch Ihre Nutzer:innen sind Stakeholder, aber hier nutze ich den Begriff für Gründer:innen/C-Level, Investoren, rechtliche oder regulatorische Instanzen und andere Akteur:innen, mit denen Sie zusammenarbeiten müssen.
Manchmal treffen Sie Design-Entscheidungen nicht ausschließlich auf Basis der Nutzerbedürfnisse, sondern berücksichtigen dabei:
- Ihre Vision und Strategie: Apples Nutzer:innen lieben Drahtverbindungen, dennoch setzt Apple auf drahtlos – deshalb verschwinden dort immer mehr Anschlüsse. (Jetzt wissen Sie Bescheid!)
- Ihr rechtliches Umfeld: Eine große Auswahl an Cookie-Optionen ist möglicherweise nicht besonders nutzerfreundlich, aber vielleicht sind Sie rechtlich verpflichtet, diese Auswahl zu zeigen.
Es gibt auch Argumente für Intuition – selbst wenn Sie Ihre Nutzer gut kennen, könnten Sie Ihrer eigenen Intuition folgen, um eine Designentscheidung zu treffen.
Nachdem das Konzept und die Arten der Recherche klar sind, wollen wir anhand eines Beispiels illustrieren, wie das Ganze in der Praxis aussehen kann.
Beispiel 1: Entwicklung eines Wireframing-Tools für einen UI-Profi
Stellen Sie sich vor, Sie sind verantwortlich für die Entwicklung eines Wireframing-Tools (ähnlich wie Balsamiq) und möchten wissen, wie genau Ihre Zielnutzer (in diesem Fall Design-Teams) es einsetzen werden und welche Probleme sie damit lösen möchten.
Um das herauszufinden, können wir einen Fragebogen erstellen, den wir unseren Nutzern während eines Interviews stellen wollen. Folgendes könnten wir aufnehmen:
Nehmen wir nun an, wir finden heraus, dass Rückmeldungen hauptsächlich in Form von Kommentaren zu einem bestimmten Teil des Produkt-Wireframes erfolgen und der Produktmanager das Wireframe-Design abzeichnen muss. Dies sind zwei Erkenntnisse, die unsere Gestaltung direkt beeinflussen werden, da wir einen Workflow und eine Benutzeroberfläche für das Kommentieren und Freigeben des Wireframes entwickeln müssen.
Zusammengefasst: Die Durchführung einer Discovery-Research ist der wichtigste Bestandteil Ihres Wireframing-Prozesses und ich würde Ihnen nicht empfehlen, diesen Schritt zu überspringen. Nun, da Sie all diese Erkenntnisse in der Hand haben, gehen wir zum nächsten Schritt des Wireframing-Prozesses über.
Schritt #2: Erstellen Sie Ihre User Flows
Bevor Sie die eigentlichen Seiten/Screen erstellen und Elemente wie Formulare, Karten, Bilder, Buttons usw. darauf platzieren, müssen Sie die Abfolge von Schritten verstehen, die Ihre Nutzer Ihrer Vorstellung nach durchlaufen werden.
Diese Abfolgen werden auch als User Flows bezeichnet. Sie stellen alle möglichen Wege dar, die Ihre Nutzer gehen können, um ihre Ziele zu erreichen. Diese Ziele können alltäglich und „administrativ“ sein, z. B. das Registrieren oder Ändern des Passworts, aber auch Ihre Kernfunktionen repräsentieren (wie z. B. die Suche und das Streamen von Musik bei Spotify).
So oder so – das Erstellen von User Flows ist wichtig, da es Ihnen hilft, alle Screens/Seiten, die Sie gestalten möchten, sowie die benötigten Inhalte pro Seite besser zu visualisieren.
Um die Flows besser zu verstehen, zeige ich Ihnen einen mit dem Flowchart-Tool Flowmapp.
Beispiel 2: Visualisierung eines User Flows eines Webdesign-Tools mit Flowmapp
Nehmen wir an, Sie bauen ein Drag-and-Drop-Webdesign-Tool wie Webflow. Ihre Nutzer sind No-Code-Webdesigner, und Sie möchten die Schritte visualisieren, die sie durchlaufen, um ein Hintergrundbild zu ihrer Webseite hinzuzufügen.
So könnte der User Flow für diese Funktion in Flowmapp aussehen:
Wie man sieht, liegt der Fokus in einem User Flow mehr auf den Aktionen des Nutzers und dem Ablauf/Zusammenhang zwischen diesen, weniger auf den einzelnen Seiten oder der Gestaltung.
In diesem Beispiel möchten wir, dass der Nutzer ein Bild aus der Galerie auswählen oder eines in die Galerie hochladen/hinzufügen kann. Der Nutzer soll das Bild auch in einer Vorschau ansehen können, bevor unser Tool es als Hintergrund der Webseite übernimmt.
Wenn wir uns den Flow hier anschauen, erkennen wir, dass der Nutzer auf der gleichen Seite bleibt – im Webseiten-Editor – und vielleicht einen weiteren Screen in Form eines Popups sieht, der die Galerie darstellt.
Das bedeutet: Es gibt eine Seite und ein Popup zu gestalten, jeweils mit den relevanten Designelementen und Funktionen.
Mit dem Überblick über die Schritte, die Nutzer in unserem Produkt unternehmen, um ihre Ziele zu erreichen, können wir schließlich mit dem eigentlichen Wireframing beginnen.
Schritt #3: Beginnen Sie mit einem Low-Fidelity-Wireframe
Ja, das Erstellen eines Wireframes ist der dritte Schritt in diesem Wireframing-Prozess. Glauben Sie mir jedoch: Wenn Sie die ersten beiden Schritte umsetzen, wird die Qualität Ihres Wireframes auf ein ganz neues Niveau gehoben – es lohnt sich definitiv, Zeit darin zu investieren.
Was den Wireframe selbst betrifft, empfehle ich, zunächst mit einem Low-Fidelity-Wireframe zu beginnen. Ein Low-Fidelity-Wireframe enthält noch keine Details wie exakte Farben/Größen oder andere Gestaltungseigenschaften Ihrer Seiten und Screens. Es werden noch keine echten Bilder und Texte zu sehen sein. Stattdessen gibt es Platzhalter für beides.
Und es gibt einen guten Grund, warum ein Low-Fidelity-Wireframe so aufgebaut ist und warum du damit beginnen solltest—Lo-Fi-Wireframes sind schnell zu erstellen und zu bearbeiten.
Die Wahrscheinlichkeit ist hoch, dass du in deinem Design etwas ziemlich Wichtiges übersehen hast. Wenn du Feedback dazu sammelst (darüber sprechen wir im nächsten Schritt noch detailliert), wirst du vielleicht feststellen, dass es viele Elemente oder Abläufe gibt, die geändert werden müssen.
Wenn du bereits ein vollständiges Design hättest, würden diese Änderungen mehrere Tage dauern. Mit einem Lo-Fi-Wireframe kannst du jedoch deine Anpassungen schnell vornehmen und dein Design innerhalb weniger Stunden oder sogar noch schneller für eine weitere Feedback-Runde vorlegen.
Nachdem wir Lo-Fi-Wireframes nun so gelobt haben, schauen wir uns einmal an, wie sie aussehen, anhand eines bekannten Wireframing-Tools – Balsamiq.
Beispiel 3: Erstellung eines Website-Wireframes
Das Schöne an Designtools, die sich auf Wireframing, besonders im Low-Fidelity-Bereich, spezialisiert haben, ist, dass du nicht jedes Element von Grund auf zeichnen musst.
Stattdessen verfügen solche Tools meist über eine Vielzahl vorgefertigter, grundlegender Interface-Elemente (z. B. Bilder, Menüs, Breadcrumbs, Buttons usw.) und bieten Drag-and-Drop-Funktionen, damit das Designen besonders schnell geht. Hier ein Beispiel, das ich in Balsamiq erstellt habe.
Aufgrund des Charakters von Low-Fidelity-Wireframes sind sie üblicherweise in Graustufen gehalten oder mit minimalem Farbeinsatz und geringer visueller Ausgestaltung versehen. Stattdessen sieht man vor allem das grundsätzliche Erscheinungsbild der UI-Elemente sowie deren Anordnung und Informationsarchitektur.
Wenn du nun deinen Low-Fidelity-Wireframe fertiggestellt hast, ist es Zeit, ihn zur ersten Feedback-Runde vorzulegen.
Schritt #4: Interne Überarbeitung deines Low-Fidelity-Designs
Bevor du Zeit und Mühe in den finalen Produktentwurf investierst, nehmen wir einmal an, dass wir viele Dinge im Design entweder falsch gemacht oder vergessen haben zu berücksichtigen. Daher sollten wir unseren Lo-Fi-Wireframe zunächst Kollegen und Stakeholdern zeigen.
Sicher, du könntest dieses Design auch den Nutzer:innen zeigen. Da es aber schwierig ist, Nutzer:innen zu finden, die bereit sind, dein Design zu prüfen oder einem Usability-Test zu unterziehen, würde ich empfehlen, deren kostbare Zeit lieber für die Überprüfung von High-Fidelity-Designs zu reservieren, anstatt sie mit Hinweisen auf Probleme zu beschäftigen, die genauso gut auch Kolleg:innen hätten finden können.
Ich empfehle jedoch, Stakeholder in dieser Phase einzubeziehen. Zwei wichtige Gründe dafür sind:
- Sie werden durch die frühe Einbindung näher an das Team herangeführt, das das Produkt entwickelt.
- Korrigieren von Designfehlern in Bezug auf strategische Ausrichtung schon in frühen Phasen spart später Zeit.
Sobald du also Feedback von deinen Kolleg:innen und Stakeholdern gesammelt hast, kannst du deinen Lo-Fi-Wireframe entsprechend anpassen, die Änderungen mit ihnen validieren und dann zum eigentlichen visuellen Design deines Produkts übergehen.
Schritt #5: Erstelle ein High-Fidelity-Wireframe und einen klickbaren Prototyp
Da du jetzt genau verstehst, wie dein Design auf einer höheren Ebene aussehen wird, kannst du dich nun darauf konzentrieren, die visuellen Bestandteile zu erstellen und das Design so auszuarbeiten, dass es dem Endergebnis möglichst nahekommt.
In dieser Design-Phase beinhaltet dein digitales Wireframe:
- Dein UI-Design: mit den richtigen Farben, Schatten, Typografie und Schriftarten, Abständen usw.
- Deine visuellen Inhalte: Falls du vorhast, Bilder, Illustrationen, Videos oder andere grafische Elemente auf deinen Seiten einzusetzen, ist jetzt der Zeitpunkt, diese einzubinden.
- Den Text deiner Seite: Damit sind die Texte in den UI-Elementen, Buttons, Überschriften usw. gemeint.
- Eine Attrappe deiner Inhalte: Falls dein Design nutzergenerierte Inhalte oder eigene Inhalte umfasst, solltest du eine beispielhafte Version davon hinzufügen. (Zum Beispiel das Design eines Kommentars unter einem Beitrag, das die übliche Größe und den Inhalt eines typischen Nutzers darstellt.)
Abgesehen davon, dass das High-Fidelity-Wireframe das Haupt-Ergebnis für dein Entwicklerteam ist, das das Produkt auf Basis des Designs umsetzt, kann es auch sehr gut für Usability-Tests mit echten Nutzer:innen dienen.
Du kannst entweder das Hi-Fi-Wireframe selbst für den Test verwenden oder noch einen Schritt weiter gehen und es per Interaktionsdesign in einen klickbaren Prototyp verwandeln.
Es ist wirklich einfach, die hier erwähnten Begriffe (Hi-Fi-Wireframes, interaktive Prototypen usw.) zu verwechseln. Lass mich sie also kurz für dich klären und ein paar Beispiele zeigen.
Unterscheidung der Wireframe-Typen: Mockups vs. Hi-Fi-Wireframes vs. klickbare Prototypen
Diese drei Konzepte ähneln sich sehr und werden leider von vielen Menschen synonym verwendet – was besonders bei Einsteigern in Produktmanagement und Design für Verwirrung sorgt.
Das bedeutet jeder Begriff:
High-Fidelity-Wireframe: Diesen Punkt hatten wir oben bereits angesprochen. Lassen Sie mich Ihnen stattdessen zeigen, wie so etwas aussieht.
Dieses überzeugende Design ist für einen Service, bei dem Sie Privatköche engagieren können, um Ihnen exklusive Gerichte zuzubereiten. Wie wir sehen, beinhaltet dieses Design alles – von finalen Bildern über Farben bis hin zu den Positionen. Außerdem ist etwas „Lorem Ipsum“-Text enthalten, der ein Testimonial eines Profi-Kochs auf der Seite simuliert.
Mockup: Im Gegensatz dazu zeigt das Mockup nicht nur das endgültige Design, sondern auch die Umgebung, in der das Design dargestellt wird. Wenn Sie zum Beispiel einen Briefkopf entwerfen, würde ein Mockup ein Blatt Papier auf einem Tisch zeigen, auf dem Ihr Design zu sehen ist.
Bei einer mobilen App zeigt Ihr Mockup zum Beispiel die Silhouette eines iPhones oder Android-Geräts, auf dessen Bildschirm Ihr Design erscheint.
Prototyp: Der Prototyp sieht wie ein Hi-Fi-Wireframe aus, aber neben dem finalen Design versucht er auch, die Funktionalitäten des Produkts zu simulieren.
Mit klickbaren Prototypen oder 3D-Prototyping-Tools können Sie grundlegende Interaktionen wie Scrollen, Animationen, das Klicken auf Buttons, Navigation in der App etc. hinzufügen.
Durch das Nachbilden der Interaktivität Ihres Produkts ermöglichen Prototypen, dass Sie testen können, wie Ihre gewünschten Funktionen in der Praxis funktionieren – noch bevor sie umgesetzt werden.
Außerdem können Sie mithilfe von High-Fidelity-Prototypen Usability-Tests durchführen, bei denen Sie Beobachtungen machen, wie Nutzer mit Ihrem Produkt interagieren, Probleme lösen oder sich in Ihrem Design zurechtfinden.
Wireframing ist ein Spiel aus Testen und Iteration
Der iterative Charakter von Wireframes spart Ihnen enorm viel Arbeitsaufwand bei der Korrektur von Fehlern. Zudem stellen Sie durch einen solchen Wireframing-Prozess sicher, dass Ihre Nutzer ein Produkt bekommen, das ihre Bedürfnisse bestmöglich erfüllt.
Verwenden Sie einen anderen Wireframing-Prozess in Ihrem Unternehmen? Das würde mich sehr interessieren – schreiben Sie uns gern einen Kommentar und erzählen Sie, wie Sie vorgehen!
Ich hoffe, dieser Leitfaden hat Ihnen gefallen und war für Sie nützlich. Schauen Sie sich auch gern unsere weiteren Anleitungen zum Produktmanagement an, die von einigen der besten Experten auf ihrem Gebiet verfasst wurden, wie zum Beispiel:
- Der Unterschied zwischen Produktvision und Strategie von Kerstin Exner.
- Die 3Ps des Produkts von Benoit des Ligneris.
- Produktanforderungsdokumente von Sarah Tolle.
Zum Schluss können Sie unseren Newsletter abonnieren, und wir senden Ihnen ebenfalls interessante Inhalte direkt in Ihren Posteingang.
