Warum Klick-Prototypen nicht mehr reichen – und wie modernes Prototyping heute funktioniert. Von statischen Screen-Abfolgen zu verhaltensbasierten Systemen.
Klick-Prototypen haben lange gut funktioniert. Ein Frame, ein Klick, der nächste Screen. Einfach, schnell, verständlich. Für Präsentationen gegenüber Stakeholdern, für frühe Nutzertests, für die grundlegende Validierung von Ideen – das Modell war praktikabel.
Doch die Produkte haben sich verändert. Digitale Anwendungen sind heute dynamisch, kontextabhängig und reaktiv. Nutzer verhalten sich nicht linear. Sie machen Fehler, brechen Prozesse ab, erwarten Feedback. Und genau hier stoßen klassische Click-Through-Prototypen an ihre Grenzen.
Die zentrale These: Klick-Prototypen zeigen Abläufe, aber kein Verhalten.
Warum Click-Through-Prototypen heute an ihre Grenzen stoßen
Statisch vs. realer Produktalltag
Ein klassischer Figma-Prototyp zeigt einen idealen Pfad. Den Happy Path. Doch echte Produkte funktionieren nicht so. Was passiert bei falscher Eingabe? Was, wenn ein Feld leer bleibt? Was bei schlechter Netzwerkverbindung?
Click-Through-Prototypen können diese Fragen nicht beantworten. Sie zeigen keine Fehler, keine Alternativen, keine Zustände. Sie simulieren Abläufe, aber nicht das Verhalten eines Systems.
Hoher Pflegeaufwand
Mit zunehmender Komplexität wächst die Anzahl der Frames exponentiell. Jeder Zustand – Default, Hover, Disabled, Error, Success – erfordert einen eigenen Screen. Das Resultat: Dutzende oder Hunderte von Frames, verbunden durch ein Netz aus Linien.
Änderungen werden zum Albtraum. Eine Anpassung am Design bricht Verbindungen. Der Fokus verschiebt sich von der eigentlichen UX-Arbeit hin zur Verkabelung und Pflege der Prototyp-Struktur.
Figma-Nutzer kennen das Problem: Sobald mehr als ein paar Zustände hinzukommen, entsteht schnell das berüchtigte „Noodle Chaos” – ein kaum noch zu überblickendes Geflecht aus Verbindungslinien.
Falsche Erwartungen bei Stakeholdern
Ein visuell polierter Prototyp sieht „fertig” aus. Stakeholder, Kunden oder Entscheider ohne technischen Hintergrund können den Unterschied zwischen Präsentation und funktionierendem Produkt oft nicht erkennen.
Das führt zu Missverständnissen: über den tatsächlichen Entwicklungsstand, über verbleibenden Aufwand, über die Qualität von Interaktionen. Ein Klick-Prototyp ist eine Illusion – aber eine, die leicht für Realität gehalten wird.
Der Umbruch: Von Screens zu Verhalten
Der Wandel im Prototyping ist fundamental. Es geht nicht mehr darum, Screen-Abfolgen zu definieren, sondern Systeme mit Regeln zu bauen.
Die zentralen Fragen ändern sich:
- Früher: „Wo geht’s als Nächstes hin?”
- Heute: „Was passiert, wenn …?”
Modernes Prototyping denkt in Zuständen, Bedingungen und Reaktionen. Es simuliert nicht nur den Weg durch eine Anwendung, sondern das Verhalten der Anwendung selbst.
Was modernes Prototyping ausmacht
Prototypen mit echten Daten
Lorem Ipsum hat ausgedient. Moderne Prototypen arbeiten mit realistischen Inhalten: echte Namen, plausible Textlängen, sinnvolle Werte.
Warum das wichtig ist: Die Länge eines Nutzernamens beeinflusst das Layout. Ein Status wie „Ausstehend” oder „Abgeschlossen” verändert die Darstellung. Mock-Daten aus Sheets oder API-Verbindungen machen diese Unterschiede sichtbar, bevor Code geschrieben wird.
Zustände statt extra Screens
Ein Button ist nicht einfach ein Button. Er hat Zustände: Default, Hover, Pressed, Disabled, Loading, Success, Error. In klassischen Prototypen bedeutet das: sieben separate Frames.
In modernen Tools wie Figma mit Variables oder ProtoPie wird ein einziger Button mit sieben Zuständen definiert. Weniger Frames, mehr Aussagekraft, einfachere Pflege.
Figma hat seit 2023 erheblich in diese Richtung investiert. Mit Variables, Expressions und Conditionals lassen sich heute deutlich komplexere Interaktionen abbilden als noch vor zwei Jahren. Die neue, vereinheitlichte Architektur für Component Properties und Variables (2024) beseitigt frühere Inkonsistenzen und schafft eine skalierbare Grundlage.
Logik und Reaktion
Modernes Prototyping bedeutet: Systeme reagieren auf Eingaben.
- Ein Button bleibt deaktiviert, bis alle Pflichtfelder ausgefüllt sind.
- Eine Fehlermeldung erscheint bei ungültiger E-Mail-Adresse.
- Ein Erfolgsstatus wird angezeigt, bevor die Weiterleitung erfolgt.
Diese Logik lässt sich mit Figma-Expressions umsetzen – oder mit spezialisierten Tools wie ProtoPie, das explizit für komplexe, verhaltensbasierte Prototypen entwickelt wurde.
Komponenten als Verhaltensträger
Der Paradigmenwechsel zeigt sich besonders bei Komponenten. Statt einer Komponente mit statischem Erscheinungsbild entstehen Komponenten mit eingebautem Verhalten.
Ein Input-Feld „weiß”, wann es einen Fehler anzeigen soll. Ein Dropdown „kennt” seine geöffneten und geschlossenen Zustände. Ein Toggle „reagiert” auf Klicks.
Das Ergebnis: Design-Systeme werden lebendiger, näher am Code, einfacher zu testen und schneller zu iterieren.
Was man wirklich braucht
Die Werkzeuglandschaft für Prototyping hat sich 2024/2025 erheblich weiterentwickelt. Hier ein Überblick:
Figma: Die Basis
Figma bleibt für die meisten Teams das zentrale Designtool. Mit den erweiterten Prototyping-Features (Variables, Expressions, Conditionals, Interactive Components) lassen sich bereits viele verhaltensbasierte Szenarien abbilden.
Stärken:
- Variables für Zustände (Boolean, String, Number, Color)
- Expressions für Berechnungen und String-Manipulation
- Conditionals für If/Else-Logik
- Interactive Components für Hover, Pressed, Focused
Grenzen:
- Komplexe Multi-Step-Logik wird unübersichtlich
- Keine Sensor-Inputs (Tilt, Sound, Touch-Gesten)
- Limitierte Animationsoptionen
ProtoPie: Für komplexe Interaktionen
ProtoPie ist der Spezialist für High-Fidelity-Prototypen mit realistischem Verhalten. Laut Design Tools Survey 2022 war es die erste Wahl in der Kategorie „Advanced Prototyping”.
Stärken:
- Komplexe bedingte Logik ohne Code
- Multi-Device-Prototypen
- Sensor-Inputs (Neigung, Sound, Kamera)
- Import aus Figma, Sketch, Adobe XD
- Keine Programmierkenntnisse erforderlich
Ideal für:
- Automotive-Interfaces
- Smart-Device-Prototypen
- Gaming-UX
- Prototypen, die sich wie echte Apps anfühlen sollen
Ergänzende Tools
Framer: Verbindet visuelles Design mit React-Code. Ideal für Teams, die direkt in Code denken wollen und hochinteraktive Websites bauen.
Origami Studio (Meta): Mächtiger Patch-Editor für komplexe Animationen und Verhaltenslogik. Steilere Lernkurve, aber großes Potenzial.
UXPin Merge: Arbeitet mit echten React-Komponenten im Design. Schließt die Lücke zwischen Prototyp und Produktion.
Design-to-Code: Die neue Generation
Eine besondere Entwicklung 2024/2025 sind AI-gestützte Design-to-Code-Tools:
Locofy: Generiert produktionsreifen Code (React, Next.js, Vue, React Native) direkt aus Figma-Designs. Unterstützt Tailwind CSS, Material UI und eigene Design-Systeme.
Anima: Fokussiert auf React und HTML/CSS-Export. Gute Wahl für schnelles Prototyping mit Code-Output.
Vercel v0: Generiert React-Komponenten aus Text- und Bild-Prompts. Integriert sich nahtlos in das Vercel-Ökosystem.
Lovable/Bolt.new: AI-gestützte Plattformen für schnelle MVP-Entwicklung. Von Prompt zu funktionierender App in Minuten.
Der Fokus sollte auf wenigen Tools mit klarem Zweck liegen. Ein überladener Toolstack erzeugt mehr Probleme, als er löst.
Schrittweise Umstellung statt Komplettumbau
Die Umstellung auf verhaltensbasiertes Prototyping muss nicht radikal erfolgen. Ein pragmatischer Ansatz:
-
Einen kritischen Flow auswählen: Nicht die gesamte App, sondern einen zentralen Prozess (z.B. Onboarding, Checkout, Login)
-
Klare Testfrage definieren: Was soll der Prototyp beantworten? „Verstehen Nutzer den Validierungsprozess?” ist besser als „Sieht das gut aus?”
-
Nur relevante Logik simulieren: Nicht jeder Edge Case muss abgebildet werden. Fokus auf die häufigsten und kritischsten Szenarien.
-
Früh testen, früh Feedback holen: Ein verhaltensbasierter Prototyp liefert besseres Feedback. Nutzer interagieren natürlicher, wenn das System reagiert.
Typische Fehler im modernen Prototyping
Zu viel Logik, zu früh
Ein Prototyp ist kein MVP. Er soll Verhalten simulieren, nicht alle Geschäftslogik abbilden. Überengineering führt zu denselben Problemen wie bei klassischen Prototypen: hoher Pflegeaufwand, fragile Strukturen.
Prototyp wirkt wie fertiges Produkt
Je realistischer der Prototyp, desto größer die Erwartungslücke. Kommunikation ist entscheidend: Was kann der Prototyp zeigen, was nicht?
Zu viele Plugins und Tools
Jedes zusätzliche Tool erhöht die Komplexität. Die besten Teams arbeiten mit einem schlanken Stack: ein Design-Tool, ein Prototyping-Tool für komplexe Fälle, klare Übergabeprozesse.
Accessibility vergessen
Verhaltensbasierte Prototypen können Accessibility-Aspekte früher sichtbar machen: Fokus-States, Tastaturnavigation, Screen-Reader-Kompatibilität. Diese Chance wird oft verpasst.
Wohin sich Prototyping entwickelt
Die Entwicklung zeigt klare Trends:
Mehr Automatisierung: AI-gestützte Tools wie Vercel v0, Lovable oder Figma AI reduzieren den Aufwand für Standardkomponenten. Die Lücke zwischen Designidee und funktionierendem Code schrumpft auf Minuten.
Mehr Kontext: Prototypen werden mit echten Daten gefüttert. Verbindungen zu APIs, Datenbanken oder Sheets werden zum Standard. Das macht Tests realistischer und Ergebnisse aussagekräftiger.
AI-gestützte Zustände und Logik: Werkzeuge beginnen, Zustände und Logik automatisch vorzuschlagen. „Du hast ein Formular – soll ich Validierungszustände generieren?”
Prototypen als lebende Systeme: Die Grenze zwischen Prototyp und Produktion verschwimmt. Tools wie UXPin Merge oder die Design-to-Code-Plattformen arbeiten mit echten Komponenten. Der Prototyp wird zur ersten Version des Produkts.
Der globale Markt für virtuelles Prototyping soll bis 2025 auf 861,7 Millionen Dollar wachsen – ein Wachstum von 19,4% jährlich. Das spiegelt die steigende Bedeutung agiler, iterativer Designprozesse wider.
Meine Methode: Prototyping direkt in HTML
Als Entwickler bevorzuge ich einen anderen Ansatz: Prototyping direkt in HTML, CSS und JavaScript. Für technisch versierte Teams ist das eine bewährte Methode, die native Interaktionen ohne Tool-Overhead ermöglicht.
Warum HTML-Prototyping funktioniert
HTML/CSS/JS erzeugt funktionale Prototypen mit echter Logik: Vanilla JS für Form-Validierung (deaktivierter Button bei leerem Feld), CSS-Transitions für Hover- und Loading-States, Fetch für API-Simulation. Im Vergleich zu Figma reduziert das die Handoff-Friction erheblich – der Code ist produktionsnah und muss nicht neu geschrieben werden.
Praktische Umsetzung
Tools für den schnellen Start:
- CodePen oder JSFiddle für isolierte Komponenten
- Framer oder Webflow für exportierbares HTML mit React-ähnlicher Logik
Mit Claude kombinieren: Prompt Claude für vollständigen Code: „Erstelle HTML/JS Login-Flow mit Error-States, Loading-Animation und Success-Feedback.” Kopiere das Ergebnis in eine index.html und teste lokal. Das spart 70% Zeit gegenüber manuellem Wiring in Design-Tools.
Mein bevorzugter Stack:
- HTML + Tailwind CSS + Alpine.js für leichte Reaktivität ohne Framework-Overhead
- Erweiterbar mit Vercel v0 für AI-generierten Code
- Versionierbar mit Git – ein Vorteil, den kein Design-Tool bietet
Wann HTML statt Figma wählen
HTML-Prototyping eignet sich besonders, wenn:
- Der Handoff code-nah sein soll (direkter Export, keine Rekodierung)
- Komplexe States gebraucht werden (native JS-Logik skaliert besser)
- Agile Iteration gefragt ist (Git-Versionierung, Branch-basiertes Testen)
Für No-Code-Teams oder rein visuelle Exploration bleibt Figma die bessere Wahl. Aber wer Code schreiben kann, sollte diese Option kennen.
Klick-Prototypen sind nicht „falsch”. Sie haben ihren Platz – für schnelle Visualisierungen, frühe Konzepte, einfache Abläufe.
Aber für komplexe, dynamische, interaktive Produkte reichen sie nicht mehr. Modernes Prototyping zeigt Verhalten, nicht nur Wege. Es beantwortet die Frage „Was passiert, wenn…?” statt nur „Wohin geht’s als Nächstes?”
Das Ziel: bessere Entscheidungen, früher im Prozess. Weniger Überraschungen in der Entwicklung. Produkte, die sich so anfühlen, wie sie gedacht wurden.
Die Werkzeuge sind da. Figma hat aufgerüstet. ProtoPie, Framer und andere bieten spezialisierte Lösungen. AI-gestützte Design-to-Code-Tools schließen die Lücke zur Produktion.
Der nächste Schritt liegt bei den Teams: einen kritischen Flow auswählen, verhaltensbasiert prototypen, testen, lernen. Schritt für Schritt.