Was ist ein Prototyp?
Würdest du ein Haus bauen, ohne vorher mal durch den Grundriss gegangen zu sein? Bei Websites passiert genau das ständig. Ein Prototyp ist der Grundriss, durch den man schon laufen kann.
Die Nielsen Norman Group definiert ihn als frühe Version eines Designs, mit der man Ideen, Interaktionen und Funktionen testet. Man kann ihn anklicken oder durchspielen, aber dahinter steckt noch keine echte Technik.
Wie nah ein Prototyp am fertigen Produkt ist, heißt Fidelity, auf Deutsch etwa Wiedergabetreue:
- Low-Fidelity: Papierskizzen oder graue Kästen, die man klicken kann. Schnell gemacht, schnell verworfen.
- High-Fidelity: sieht fast aus wie die echte Website, mit Farben, Bildern und echten Texten.
Wireframe, Mockup, Prototyp
Die drei werden ständig verwechselt. Das Glossar der Nielsen Norman Group trennt sie so:
Begriff
Was er ist
Wireframe
Gerüst des Layouts, ohne Gestaltung
Mockup
Statisches Bild mit Farben und Bildern
Prototyp
Klickbar, zum Testen von Abläufen
Die Grenzen sind fließend. Verknüpfst du Wireframes per Klick, hast du einen Low-Fidelity-Prototyp. In einer Umfrage der Nielsen Norman Group unter 86 UX-Profis hielten 67 % interaktive Prototypen für wirksam im Gespräch mit Kunden, statische High-Fidelity-Mockups nur 47 % (2015).
Was Prototypen bringen
Die stärksten Zahlen stammen aus Klassikern der UX-Forschung. Sie sind alt, die Mechanik dahinter gilt aber bis heute:
Fall A · Hilfeseite
Mozilla Support mit Papierprototypen (2015)
7
Versionen in 2 Wochen
−70 %
neue Hilfefragen im Forum
Rund 7.000 → 2.000 Fragen im Monat
Getestet wurde täglich, zwischen den Sitzungen hat das Team die Papierentwürfe überarbeitet.
Fall B · Homebanking
Oberfläche in fünf Versionen (1993)
5
Versionen
8
Testpersonen je Runde
Usability +242 % von Version 1 zu 5
Aus Jakob Nielsens Studie zum iterativen Design. Über vier Fälle lag der Gewinn im Median bei 38 % je Runde.
Der Grund ist simpel: Jakob Nielsen schätzte 2003, dass eine Änderung vor dem Programmieren rund 100-mal billiger ist als danach. Das ist eine Faustregel ohne eigenen Datensatz. Jeder, der mal eine fertige Seite umbauen musste, kennt das Gefühl aber.
Häufige Fehler
Fehler 1 · Den Prototyp einfach live schalten
Mit KI-Werkzeugen wie Figma Make, Lovable oder v0 entsteht in Minuten etwas, das wie eine fertige App aussieht. Verlockend, es direkt zu veröffentlichen. Das Handbuch der britischen Regierung warnt ausdrücklich davor, Prototyp-Code einfach in den Livebetrieb zu kopieren.
Fehler 2 · Zu früh zu schick
Ein polierter Prototyp lenkt das Gespräch auf Button-Farben, bevor geklärt ist, ob der Ablauf stimmt. Fang grau an. Farbe kommt, wenn die Struktur sitzt.
Fehler 3 · Einmal groß testen statt oft klein
Nielsen rechnete vor, dass fünf Testpersonen rund 85 % der Usability-Probleme finden. Er empfiehlt drei Runden mit je fünf Personen statt einer mit fünfzehn. Nach jeder Runde verbessern, dann neu testen.
Fehler 4 · Mit Blindtext testen
Ob eine Seite verständlich ist, hängt am Text. Mit Platzhaltern testest du nur das Layout. Schreib wenigstens die Überschriften und Buttons so, wie sie später heißen sollen.
Womit du Prototypen baust
- Papier und Stift: unschlagbar schnell für die ersten Ideen.
- Figma: der Standard für Klick-Prototypen, mit verknüpften Abläufen, Overlays und Animationen. Seit Mai 2025 kommt Figma Make für Prototypen per Texteingabe dazu.
- Penpot: Open-Source-Alternative zu Figma.
- Balsamiq: bewusst skizzenhaft, gut für Low-Fidelity.
- KI-Werkzeuge wie v0, Bolt oder Lovable: für schnelle Ideen und erste Tests.
Die Nielsen Norman Group hat 2025 zehn solcher KI-Werkzeuge in einem echten Projekt ausprobiert. Ihr Fazit: von Weitem gut, aber weit weg von gut. Für Ideen und frühe Tests taugen sie, für spätere Phasen nicht.
Häufige Fragen
Was ist der Unterschied zwischen Wireframe, Mockup und Prototyp?
Ein Wireframe zeigt nur das Gerüst eines Layouts. Ein Mockup ist ein statisches, gestaltetes Bild. Ein Prototyp ist klickbar und dient dazu, Abläufe mit Nutzern zu testen.
Was bedeuten Low-Fidelity und High-Fidelity?
Low-Fidelity heißt grob: Papier oder graue Kästen. High-Fidelity sieht aus und verhält sich fast wie das fertige Produkt. Am Anfang lohnt sich grob, weil du schneller änderst.
Wie viele Testpersonen brauche ich für einen Prototyp?
Für eine Testrunde reichen meist fünf. Nach Jakob Nielsen finden sie rund 85 % der Usability-Probleme. Besser als eine große Runde sind mehrere kleine mit Verbesserungen dazwischen.
Kann ich einen KI-Prototyp direkt als Website veröffentlichen?
Davon ist abzuraten. Prototyp-Code ist zum Testen gebaut, nicht für Sicherheit, Barrierefreiheit und Pflege. Nimm ihn als Vorlage und lass die echte Seite sauber bauen.
Lohnt sich ein Prototyp für eine kleine Website?
Ja, gerade dort. Ein Prototyp der wichtigsten Seiten kostet ein paar Stunden. Ein Umbau nach dem Launch kostet ein Vielfaches.
Quellen
- Nielsen Norman Group: Glossar der UX-Deliverables
- Nielsen Norman Group: UX-Prototypen, Low und High Fidelity
- Nielsen Norman Group: Häufige UX-Deliverables
- Nielsen Norman Group: Mozilla-Fallstudie
- Nielsen Norman Group: Iterative User-Interface Design
- Nielsen Norman Group: Warum fünf Testpersonen reichen
- GOV.UK Service Manual: Making prototypes
- Nielsen Norman Group: KI-Prototyping-Werkzeuge im Test
- Figma-Hilfe: Prototyping
