Klickdummy, Prototyp, MVP und Mockup im Vergleich
Im Projektalltag werden die Begriffe oft vermischt. Die Unterscheidung ist aber wichtig, weil sie festlegt, was ein Artefakt beweisen kann und was nicht. Ein Wireframe ist dabei die Vorstufe: ein grobes, meist graustufiges Layout eines einzelnen Screens ohne Gestaltung und ohne Interaktion.
Der Klickdummy ist streng genommen eine Unterform des Prototyps. Wenn im Alltag von „Prototyp" im Gegensatz zum Klickdummy die Rede ist, meint man meist einen funktionalen Prototyp mit echtem Code. Ein Minimum Viable Product (MVP) ist dagegen bereits ein lauffähiges Produkt, das echte Nutzer verwenden und das weiterentwickelt wird.
Low-Fidelity- und High-Fidelity-Klickdummy
Klickdummys unterscheiden sich vor allem in ihrer Wiedergabetreue (Fidelity), also darin, wie nah sie am späteren Produkt sind. Die Nielsen Norman Group beschreibt in ihrem Artikel zu Low- und High-Fidelity-Prototypen drei Dimensionen: Interaktivität, Optik und Inhalt. Ein Prototyp kann in jeder Dimension unterschiedlich weit ausgearbeitet sein.
Low-Fidelity-Klickdummy
Ein Low-Fidelity-Klickdummy verknüpft einfache Wireframes miteinander. Farben, Bilder und finale Texte fehlen, Platzhalter ersetzen Inhalte. Er ist schnell gebaut und lädt zu grundsätzlicher Kritik ein, weil er sichtbar unfertig ist. Nach Einschätzung der Nielsen Norman Group sind Beteiligte bei solchen Entwürfen eher bereit, die Struktur zu verändern. Er eignet sich für frühe Fragen: Stimmt die Reihenfolge der Schritte? Fehlt ein Bildschirm? Ist die Navigation logisch aufgebaut?
High-Fidelity-Klickdummy
Ein High-Fidelity-Klickdummy sieht aus wie die fertige App. Er nutzt das finale Design, echte Texte, realistische Beispieldaten und Übergangsanimationen. Testpersonen nehmen ihn wie ein echtes Produkt wahr, was Usability-Tests aussagekräftiger macht. Der Aufwand ist höher, und jede Änderung am Design muss in vielen Screens nachgezogen werden. Er eignet sich für die Prüfung einzelner Komponenten, für Freigaben durch Entscheider und als Übergabe an die Entwicklung.
Wofür Unternehmen einen Klickdummy einsetzen
Ein Klickdummy ist kein Selbstzweck. Er lohnt sich immer dann, wenn eine Entscheidung ansteht, die ohne ein greifbares Bild der Lösung schwer zu treffen ist. Vier Einsatzzwecke sind besonders verbreitet.
Usability-Test vor der Entwicklung
Im Usability-Test bearbeiten Testpersonen typische Aufgaben im Klickdummy, etwa „Bestelle diesen Artikel erneut" oder „Melde einen Schaden". Beobachtet wird, wo sie zögern, falsch abbiegen oder abbrechen. Weil der Klickdummy keine Logik besitzt, lassen sich Probleme direkt im Design beheben und in der nächsten Testrunde erneut prüfen. Der Vergleich ist einfach: Eine geänderte Verbindung im Design-Tool kostet Minuten, ein geänderter Ablauf im fertigen Code oft Tage.
Entscheidungsgrundlage für Stakeholder
Geschäftsführung, Fachabteilung und IT haben oft unterschiedliche Bilder im Kopf, wenn von „der neuen App" die Rede ist. Ein Klickdummy macht diese Bilder vergleichbar. Statt über Textbeschreibungen zu diskutieren, klicken alle Beteiligten denselben Ablauf durch. Unklarheiten im Umfang, etwa ob ein Freigabeschritt nötig ist, werden so sichtbar, bevor sie Budget binden.
Präsentation vor Investoren und Partnern
In frühen Phasen eines Produkts existiert oft noch keine Software. Ein High-Fidelity-Klickdummy zeigt Investoren, Pilotkunden oder Vertriebspartnern, wie das Produkt funktionieren soll. Wichtig ist dabei Transparenz: Ein Klickdummy belegt das Konzept, nicht die technische Umsetzbarkeit. Wer ihn vorführt, sollte klar sagen, dass dahinter noch kein funktionierendes System steht.
Anhang zu Ausschreibung und Lastenheft
Ein Lastenheft beschreibt, was eine Software leisten soll. Texte lassen aber viel Interpretationsspielraum. Ein Klickdummy als Anhang macht Anforderungen an Oberfläche und Abläufe eindeutiger. Anbieter können dadurch genauer kalkulieren, und Angebote werden besser vergleichbar. Verbindlich bleibt dabei der Text: Im Lastenheft sollte festgehalten werden, ob der Klickdummy als verbindliche Vorgabe oder als Orientierung gilt.
Klickdummy erstellen: der Ablauf in vier Schritten
Die Erstellung folgt in den gängigen Design-Tools einem ähnlichen Muster. Wie das in einem vollständigen Projekt aussieht, von der ersten Skizze bis zur Übergabe, beschreibt der Beitrag App-Design-Prozess: Vom Wireframe zum klickbaren Prototyp. Für den Klickdummy selbst sind diese vier Schritte entscheidend.
1. Flows auswählen
Kein Klickdummy bildet das gesamte Produkt ab. Wähle die zwei bis fünf Abläufe, die für die anstehende Frage am wichtigsten sind, etwa Registrierung, Suche und Kauf oder das Erfassen eines Auftrags. Jeder Flow bekommt einen klaren Startpunkt und ein klares Ziel. Was außerhalb dieser Flows liegt, wird nicht verknüpft und im Test auch nicht abgefragt.
2. Screens anlegen und verknüpfen
Für jeden Schritt eines Flows entsteht ein eigener Screen, auch für Zwischenzustände wie „Warenkorb leer", „Fehler bei der Eingabe" oder „Erfolgsmeldung". Anschließend werden die Hotspots mit den Ziel-Screens verbunden. In Figma heißen diese Verbindungen Prototype Connections, in Penpot Interactions. Jede Verbindung besteht aus einem Auslöser (Trigger), etwa einem Klick, und einer Aktion, etwa dem Wechsel zum nächsten Screen.
3. Interaktionen und Overlays ergänzen
Realistisch wird ein Klickdummy durch Details: Overlays für Dialoge, Dropdowns und Benachrichtigungen, Übergangsanimationen zwischen Screens und fixierte Elemente wie eine Navigationsleiste, die beim Scrollen stehen bleibt. Die Figma-Dokumentation zum Prototyping beschreibt Trigger, Aktionen und Flow-Startpunkte im Detail. Wichtig ist Maß halten: Jede zusätzliche Animation kostet Pflegeaufwand, wenn sich das Design ändert.
4. Auf dem echten Gerät testen
Ein Klickdummy für eine Mobile App sollte auf einem Smartphone getestet werden, nicht nur am Desktop. Erst dort zeigt sich, ob Buttons groß genug sind, ob Texte lesbar bleiben und ob wichtige Elemente mit dem Daumen erreichbar sind. Die gängigen Tools bieten dafür Freigabelinks oder eigene Viewer-Apps. Teste mindestens einmal selbst alle Flows durch, bevor du ihn Testpersonen oder Entscheidern vorlegst, damit keine Verbindung ins Leere führt.
Für die Erstellung gibt es spezialisierte Werkzeuge. Die Auswahl hängt davon ab, wie komplex die Interaktionen sein sollen und welche Anforderungen an Datenhaltung und Lizenz bestehen.
- Figma (Prototyping-Modus): Der verbreitete Standard im UI-Design. Frames werden über Connections verknüpft, Flows erhalten Startpunkte, und die Präsentationsansicht spielt den Klickdummy ab. Für fortgeschrittene Fälle bietet Figma Variablen, Bedingungen und Smart Animate.
- Figma Make: Ein KI-Werkzeug, das aus Texteingaben interaktive, hochauflösende Prototypen erzeugt. Nach einer Beta-Phase ab Mai 2025 ist es seit dem 24. Juli 2025 allgemein verfügbar. Anders als ein klassischer Klickdummy erzeugt Figma Make im Hintergrund Code.
- Penpot: Eine Open-Source-Designplattform, die sich auch selbst hosten lässt. Laut Penpot-Hilfe zum Prototyping unterstützt sie Trigger wie Klick, Mouse Enter oder After Delay, Aktionen wie Navigate to und Open Overlay sowie mehrere Flows pro Seite mit eigenem Freigabelink.
- ProtoPie: Ein Spezialwerkzeug für komplexe Interaktionen. ProtoPie arbeitet mit Variablen, Logik und Formeln, kann Gerätesensoren einbinden und Designs über Plugins aus Figma, Sketch oder Adobe XD importieren.
Für die meisten Klickdummys im Unternehmenskontext reicht der Prototyping-Modus eines Design-Tools. Spezialwerkzeuge wie ProtoPie lohnen sich, wenn Gesten, Sensoren oder mehrere vernetzte Geräte simuliert werden sollen. Penpot ist interessant, wenn Designdaten aus Gründen der Datenhoheit nicht bei einem US-Anbieter liegen sollen.
Grenzen eines Klickdummys
Ein Klickdummy ist ein Werkzeug zur Klärung von Bedienung und Umfang. Er ersetzt weder Entwicklung noch technische Konzeption. Drei Grenzen solltest du kennen, bevor du ihn für Entscheidungen heranziehst.
Kein Code: Ein klassischer Klickdummy enthält keine Programmlogik. Ob eine Funktion technisch machbar ist, ob eine Schnittstelle die benötigten Daten liefert oder ob ein Rechenschritt korrekt ist, lässt sich mit ihm nicht prüfen. Dafür braucht es einen technischen Prototyp oder einen Proof of Concept.
Nicht weiterverwendbar: Aus einem Klickdummy entsteht keine App. Die Entwicklung baut die Oberfläche neu, auch wenn Design-Tools Maße, Farben und Abstände für die Übergabe bereitstellen. Das gilt auch für KI-generierte Prototypen: Ihr Code ist für die Demonstration gedacht und ersetzt keine geplante Architektur, Absicherung und Testabdeckung.
Keine Aussagen zu Performance und Daten: Ein Klickdummy lädt immer sofort und zeigt immer perfekte Beispieldaten. Ladezeiten, leere Zustände, sehr lange Namen oder Tausende Einträge in einer Liste bildet er nur ab, wenn sie gezielt gestaltet wurden. Auch Unterschiede zwischen nativer App und Progressive Web App (PWA), etwa beim Offline-Verhalten oder Gerätezugriff, macht er nicht sichtbar.
Häufige Fragen zum Klickdummy
Was ist der Unterschied zwischen Klickdummy und Prototyp?
Ein Klickdummy ist eine Form des Prototyps, die nur die Oberfläche abbildet und Screens über vordefinierte Klickpfade verbindet. Im engeren Sprachgebrauch meint „Prototyp" dagegen oft einen funktionalen Prototyp, der teilweise echte Logik, Code oder Daten enthält und damit auch technische Fragen beantworten kann.
Wie lange dauert es, einen Klickdummy zu erstellen?
Das hängt von Umfang und Fidelity ab. Ein Low-Fidelity-Klickdummy für einen einzelnen Ablauf aus vorhandenen Wireframes ist oft in wenigen Stunden verknüpft. Ein High-Fidelity-Klickdummy mit finalem Design für mehrere Flows erfordert deutlich mehr Zeit, weil zuerst das Design entstehen muss. Den größten Teil des Aufwands verursacht die Gestaltung, nicht das Verknüpfen.
Kann ich einen Klickdummy mit echten Nutzern testen?
Ja, das ist einer seiner Hauptzwecke. Testpersonen erhalten konkrete Aufgaben und bearbeiten sie im Klickdummy, idealerweise auf dem Zielgerät. Wichtig ist, nur Aufgaben zu stellen, die innerhalb der verknüpften Flows liegen, und vorab alle Verbindungen zu prüfen, damit der Test nicht an fehlenden Klickwegen scheitert.
Wird aus einem Klickdummy später die fertige App?
Nein. Der Klickdummy dient als Vorlage und Spezifikation für die Entwicklung, sein Inhalt wird aber nicht direkt in die App übernommen. Die Entwicklung setzt Oberfläche und Logik neu um. Wer früh eine nutzbare Software mit echten Daten braucht, plant stattdessen ein MVP.
