Was ein User Flow ist, acht fertige Flows für Registrierung, Checkout, Buchung und mehr sowie einfache Wireframes für Startseite, Preisseite und Kontaktseite. Lade jedes davon als SVG herunter, das du in Figma öffnen kannst.
Ein User Flow ist der Weg, den eine Person durch deine Website nimmt, um eine Aufgabe zu erledigen, gezeichnet als Screens, Aktionen und Entscheidungen, die mit Pfeilen verbunden sind. Ein Wireframe ist eine schlichte Skizze des Layouts eines einzelnen Screens. Zeichne zuerst den Flow und erstelle dann für jeden Screen darin ein Wireframe. Unten findest du acht gängige Flows und drei Wireframes zum Herunterladen als SVG.
Formen in den Flows
Form
Bedeutung
Abgerundete Pille (blau)
Wo der Flow beginnt
Eckiger Kasten
Eine Seite oder ein Screen
Grauer Kasten
Etwas, das die Person tut, etwa ein Formular ausfüllen
Raute
Eine Entscheidung oder eine Prüfung, die scheitern kann
Abgerundete Pille (grün)
Das Ziel ist erreicht
Jeder Flow hat ein einziges Ziel und so wenige Schritte wie möglich bis dorthin, wobei der häufigste Fehlerfall als gestrichelte Schleife eingezeichnet ist. Nutze sie als Ausgangspunkt für deine eigene Website und erstelle dann Wireframes für die Screens, die sie durchlaufen.
Schreibe das Ziel in einer Zeile auf, zum Beispiel: Ein neuer Besucher bucht einen ersten Termin.
Liste jeden Screen und jede Aktion vom Einstiegspunkt bis zum Ziel auf. Lass die langweiligen nicht aus, etwa das Bestätigen einer E-Mail-Adresse.
Markiere jede Stelle, an der etwas schiefgehen kann, etwa eine abgelehnte Karte oder ein bereits vergebener Termin, und lege fest, wohin die Person als Nächstes geht.
Zähle die Schritte und streiche alle, die der Person nicht helfen, das Ziel zu erreichen.
Erstelle für jeden Screen im Flow ein Wireframe und entscheide, was wohin kommt, bevor du Farben oder Schriften wählst.
Beginne dort, wo die Leute tatsächlich ankommen. Viele Besucher landen über die Suche auf einer Produkt- oder Blogseite, nicht auf deiner Startseite.
Halte Wireframes bewusst grau. Farbe und echte Bilder laden zu Feedback über den Stil ein, wenn du Feedback zur Struktur willst.
Jede Entscheidungsraute braucht einen Weg zurück. Eine gescheiterte Zahlung, die in einer Sackgasse endet, kostet den Verkauf.
Teste einen Flow mit fünf Personen, bevor du ihn baust. Wenn du beobachtest, wo sie zögern, findest du die meisten Probleme.
Häufige Fragen
Was ist der Unterschied zwischen einem User Flow und einer User Journey?
Ein User Flow bildet die Screens und Schritte einer Aufgabe auf deiner Website ab. Eine User Journey ist breiter: Sie umfasst, was jemand vor, während und nach der Nutzung deines Produkts denkt, fühlt und tut, oft über mehrere Kanäle hinweg. Flows dienen dem Gestalten von Screens; Journeys dem Verstehen von Menschen.
Wie öffne ich diese SVGs in Figma?
Lade die Datei herunter und zieh sie auf eine Figma-Arbeitsfläche, oder öffne sie im Browser, kopiere sie und füge sie ein. Figma wandelt Formen und Text in bearbeitbare Ebenen um, die du neu gestalten und erweitern kannst.
Wie detailliert sollte ein Wireframe sein?
So detailliert, dass man sieht, was auf dem Screen ist und in welcher Reihenfolge: Navigation, Überschriften, Bilder, Formulare und Buttons. Lass exakte Texte, Farben und Schriften weg. Wenn die Leute anfangen, über den Blauton zu diskutieren, ist es zu detailliert.
Brauche ich spezielle Software für User Flows?
Nein. Für einen ersten Durchgang reichen Papier und Stift. Diagramm-Tools helfen, wenn du Flows teilen, bearbeiten oder zusammen mit Designs aufbewahren willst, und einfache SVG-Dateien wie diese funktionieren in den meisten davon.
Warum der Flow vor den Seiten kommt
Seiten, die einzeln gestaltet werden, funktionieren oft für sich und scheitern im Zusammenspiel. Die Preisseite sieht toll aus, hat aber keinen klaren nächsten Schritt; das Registrierungsformular fragt Dinge ab, die der Checkout noch einmal abfragt. Wenn du zuerst den Flow zeichnest, siehst du jede Übergabe zwischen Screens, und genau dort steigen die meisten Leute aus.
Ein Flow macht auch sichtbar, was jeder zusätzliche Schritt kostet. Wenn eine Buchung auf dem Papier neun Kästen braucht, wird offensichtlich, welche sich zusammenlegen lassen.
Vom Wireframe zur echten Seite
Sobald die Reihenfolge der Inhalte feststeht, wird das Wireframe zum Briefing für das echte Design. Jeder graue Block wird zu einem Abschnitt mit Überschrift und Text, und die Beschriftungen in den Ecken werden zu den Abschnittsnamen, die du mit deinem Team oder deinem Website-Builder verwendest.
Registrierung
Ein Besucher erstellt ein Konto und erreicht seinen ersten nützlichen Screen.
Besucher landet auf der Startseite
Klickt auf Kostenlos starten
Registrierungsformular: E-Mail und Passwort
E-Mail schon verwendet?
Ja: anmelden
Link zur E-Mail-Bestätigung
Willkommensscreen mit erster Aufgabe
Checkout
Ein Kunde bezahlt, was im Warenkorb liegt.
Warenkorb
Checkout: Kontakt und Versand
Versandoption wählen
Zahlungsdaten
Zahlung genehmigt?
Nein: erneut versuchen
Bestellbestätigung und E-Mail
Buchung
Ein neuer Kunde bucht einen ersten Termin.
Leistungsseite
Leistung und Mitarbeiter wählen
Kalender mit freien Terminen
Termin noch frei?
Nein: neu wählen
Formular für Kontaktdaten
Buchung bestätigt, in den Kalender eingetragen
Passwort zurücksetzen
Ein Mitglied, das sein Passwort vergessen hat, kommt wieder hinein.
Anmeldeseite
Klickt auf Passwort vergessen
E-Mail eingeben
Öffnet den Link zum Zurücksetzen aus der E-Mail
Link noch gültig?
Nein: erneut senden
Neues Passwort festlegen
Angemeldet
Kontaktanfrage
Ein Interessent stellt eine Frage und weiß, wann er mit einer Antwort rechnen kann.
Beliebige Seite
Kontaktseite
Name, E-Mail, Nachricht ausfüllen
Felder gültig?
Nein: Fehler anzeigen
Dankesnachricht mit Antwortzeit
Newsletter-Anmeldung
Ein Leser abonniert und bestätigt.
Blogartikel
Anmeldebox am Ende des Artikels
Seite: Prüfe dein Postfach
Klickt auf den Bestätigungslink
Willkommens-E-Mail und Archivseite
Von der Suche zum Produkt
Ein Kunde findet über das Suchfeld ein Produkt.
Beliebige Seite
Tippt in die Suche
Ergebnisseite mit Filtern
Etwas gefunden?
Nein: Vorschläge
Produktseite
In den Warenkorb gelegt
Angebotsanfrage
Ein Kunde aus der Region fragt nach einem Preis für einen Auftrag.
Seite zum Einsatzgebiet
Button Angebot anfordern
Kurzes Formular: Auftragsart, Postleitzahl, Fotos
Im Einsatzgebiet?
Nein: Partner vorschlagen
Bestätigung mit Rückrufzeit
Startseite
Sag, was du machst, beweise es und zeig auf einen nächsten Schritt.
Navigation
Hero: Überschrift, Zeile, Haupt-Button
Logos oder Nachweise
Drei Vorteile
So funktioniert es
Kundenstimmen
Abschließender Call to Action
Footer
Preisseite
Lass Leute Tarife vergleichen und einen wählen, ohne dich kontaktieren zu müssen.
Navigation
Überschrift und Umschalter monatlich oder jährlich
Tarifkarten
Tabelle zum Funktionsvergleich
FAQ zu Preisen
Footer
Kontaktseite
Mach es leicht, dich zu erreichen, und klar, wann du antwortest.
Navigation
Überschrift und Antwortzeit
Kontaktformular
Karte oder Foto
Adresse, Telefon, Öffnungszeiten
Footer
Acht Beispiele für User Flows
Jeder Flow hat ein einziges Ziel. Die gestrichelte orange Linie zeigt, wie ein Schritt am häufigsten scheitert und wohin die Person dann geht.
Wireframe-Kit
Drei einfache Wireframes für die Seiten, die die meisten Websites brauchen. Die Beschriftungen in jedem Block benennen den Abschnitt.