Was ist ein Wireflow?
Ein Wireframe zeigt dir, wie eine Seite aufgebaut ist. Aber was passiert, wenn jemand auf „Weiter“ klickt? Genau das zeigt ein Wireflow: Er verbindet die Wireframes mehrerer Screens mit Pfeilen. Aufbau und Ablauf stehen in einem Bild.
Die Nielsen Norman Group, eines der bekanntesten UX-Institute, beschreibt Wireflows seit 2016 als Mischung aus Wireframe-Layouts und vereinfachtem Flussdiagramm. Jeder Pfeil startet an einem klickbaren Element (Hotspot) und endet am Screen oder Zustand, der danach kommt.
Wireflow, Wireframe, User Flow, Prototyp
Die Begriffe liegen eng beieinander und werden ständig verwechselt. So trennst du sie:
Format
Zeigt
Wireframe
Aufbau eines Screens
User Flow
Ablauf in Kästchen
Wireflow
Screens plus Ablauf
Prototyp
klickbar, testbar
Ein klassisches Flussdiagramm arbeitet mit abstrakten Formen wie Rechtecken und Rauten — du siehst nicht, wie der Screen aussieht. Ein Wireframe zeigt die Oberfläche, aber nicht, was danach passiert. Der Wireflow schließt die Lücke. Für die Nielsen Norman Group ist er eine Darstellungsform des User Flows: der typische Weg durch die Screens eines Produkts.
Der Prototyp ist der nächste Schritt. In Figma wird aus einem Wireflow oft direkt ein Prototyp, weil die Pfeile dort zu echten Klick-Verbindungen werden.
Wann sich ein Wireflow lohnt
Laut Nielsen Norman Group setzten sich Wireflows zuerst in App-Teams durch. Sie passen überall, wo wenige Seiten ihren Inhalt dynamisch ändern — etwa Warenkorb und Checkout im Onlineshop. Und genau dort lohnt sich gute Planung:
- Rund 70 % aller Warenkörbe werden abgebrochen, ermittelt als Mittelwert aus 50 Studien (Baymard Institute, Stand Oktober 2026).
- Ein durchschnittlicher Checkout in den USA zeigt rund 23 Formularelemente. Baymard hält 12 bis 14 für ideal.
- Große Shops können laut Baymard ihre Conversion Rate mit besserem Checkout-Design im Schnitt um gut ein Drittel steigern.
Ein Wireflow macht so ein Formular nicht automatisch besser. Aber er zeigt dir auf einen Blick, wie viele Schritte, Felder und Abzweige du deinen Kunden zumutest — bevor jemand eine Zeile Code schreibt.
Häufige Fehler
Fehler 1 · Unklare Startpunkte der Pfeile
Auf einem Screen gibt es drei Buttons, der Pfeil startet irgendwo am Rand. Welcher Klick führt jetzt weiter? Lass jeden Pfeil genau an dem Element beginnen, das die Aktion auslöst.
Fehler 2 · Ganze Desktop-Seiten aneinanderreihen
Zehn große Seiten nebeneinander, und keiner sieht mehr den Ablauf. Die Nielsen Norman Group rät, auf dem Desktop nur die Bereiche zu zeigen, die sich ändern: das Fenster, das aufgeht, den Filter, die Fehlermeldung.
Fehler 3 · Nur den Idealweg zeichnen
Was passiert bei einer falschen Eingabe? Wo geht es zurück? Balsamiq empfiehlt, gezielt nach Sackgassen zu suchen. Im Wireflow ist ein Fehler billig, im fertigen Shop teuer.
Fehler 4 · Zu früh zu fein
Für die Abstimmung reichen grobe Kästen. Farben, Bilder und echte Texte kommen später. Wer zu früh detailliert, diskutiert über Button-Farben statt über den Ablauf.
So baust du deinen ersten Wireflow
- Ziel festlegen: Welche Aufgabe soll der Nutzer erledigen, etwa „Termin buchen“?
- Start und Ende zeichnen: Erster und letzter Screen der Strecke.
- Screens dazwischen: Nur die, in denen sich etwas ändert.
- Pfeile ziehen: Vom auslösenden Element zum nächsten Screen, Abzweige für Fehler und „Zurück“.
- Durchsprechen: Mit Team oder Kunde den Weg einmal laut durchgehen.
Werkzeuge: Figma und FigJam, Miro mit der Vorlage „Screen Flow“ oder Balsamiq mit verlinkten Wireframes. Für den ersten Entwurf reichen Papier oder Whiteboard völlig.
Häufige Fragen
Was ist der Unterschied zwischen Wireflow und User Flow?
Ein User Flow zeigt den Ablauf mit abstrakten Kästchen und Rauten. Ein Wireflow zeigt denselben Ablauf mit den echten Screens als Wireframes. Er ist eine Darstellungsform des User Flows.
Wireflow oder Wireframe: Was kommt zuerst?
Meist entstehen beide zusammen. Du skizzierst die wichtigsten Screens als Wireframes und verbindest sie dann zum Wireflow. Bei einer einzelnen Landingpage reicht oft das Wireframe.
Ist ein Wireflow dasselbe wie ein Prototyp?
Nein. Ein Wireflow ist ein Plan zum Anschauen, ein Prototyp lässt sich durchklicken und mit Nutzern testen. In Figma wird aus dem einen oft das andere.
Mit welchem Tool erstelle ich einen Wireflow?
Figma und FigJam, Miro oder Balsamiq sind verbreitet. Für den Anfang reichen Papier und Stift, gerade in Workshops.
Lohnt sich ein Wireflow für eine kleine Website?
Für Strecken mit mehreren Schritten ja, etwa für ein mehrstufiges Anfrageformular oder eine Buchung. Für reine Infoseiten nicht.
