--- title: "Prototyp" url: "https://www.insideuxdesign.com/de/glossar/prototyp" language: "de" description: "Was ist ein Prototyp im UX-Design? Einfach erklärt mit Beispiel und Praxistipps. Lies, wie du Ideen testest, bevor teurer Code entsteht." published: "2026-10-14T09:50:32+02:00" updated: "2026-10-14T12:48:04+02:00" --- # Prototyp Ein Prototyp ist ein vorläufiges, testbares Modell eines Produkts. Mit ihm prüfst du Ideen mit echten Menschen, bevor Zeit und Geld in die Entwicklung fließen. - **Buchstabe:** P UX-Glossar # Prototyp Ein Prototyp ist ein vorläufiges, testbares Modell eines Produkts. Mit ihm prüfst du Ideen mit echten Menschen, bevor Zeit und Geld in die Entwicklung fließen. Stell dir vor, ein Team plant eine App, mit der man Termine beim Friseur bucht. Bevor jemand eine Zeile Code schreibt, will das Team wissen: Finden Menschen einen freien Termin? Verstehen sie, wie sie ihn wieder absagen? Genau dafür baut es einen Prototyp, also eine Probefassung, die sich wie das spätere Produkt anfühlt, aber nur so viel kann, wie für diese Fragen nötig ist. ## Einfach erklärt Ein Prototyp ist im digitalen Produktdesign das, was beim Hausbau das Modell aus Pappe oder die Musterwohnung ist: Du kannst etwas ausprobieren, ohne dass das echte Gebäude schon steht. Er zeigt, wie ein Produkt aussehen und funktionieren könnte, und macht eine Idee greifbar, über die sonst nur geredet würde. Die Nielsen Norman Group beschreibt einen Prototyp sinngemäß als Lösungsvorschlag für ein konkretes Designproblem und damit als Hypothese, also als Annahme, die noch geprüft werden muss. Am direktesten prüfst du sie, indem du Menschen beim Benutzen beobachtest. ## Von der Papierskizze bis zum klickbaren Entwurf Prototypen unterscheiden sich vor allem in ihrer Detailtreue, im Fachjargon *Fidelity* genannt. Ein Low-Fidelity-Prototyp kann eine Handskizze auf Papier oder ein einfacher [Wireframe](https://www.insideuxdesign.com/de/glossar/wireframe) sein. Ein High-Fidelity-Prototyp sieht dagegen fast aus wie das fertige Produkt, mit echten Farben, Texten und funktionierenden Klicks, meist gebaut in Design-Tools wie [Figma](https://www.insideuxdesign.com/de/ressourcen/figma). Die Detailtreue muss nicht überall gleich hoch sein. Ein Prototyp kann optisch grob, aber inhaltlich vollständig sein. Oder er sieht fertig aus und bildet trotzdem nur wenige Klickwege ab. Beides hat Vorteile: Grobe Entwürfe sind schnell gemacht und laden zu ehrlicher Kritik ein, weil sie sichtbar unfertig wirken. Detaillierte Entwürfe zeigen realistischer, wie sich Menschen später verhalten, kosten aber mehr Zeit. ## Ein Beispiel Zurück zur Friseur-App. In der ersten Woche skizziert das Team drei Varianten der Terminauswahl auf Papier und lässt fünf Menschen aus anderen Abteilungen damit „buchen“. Schnell zeigt sich, dass eine Kalenderansicht besser funktioniert als eine lange Liste. Erst danach entsteht ein klickbarer Entwurf, den das Team mit Stammkundschaft eines Salons testet. Dabei fällt auf, dass niemand den Link zum Absagen findet. Das zu ändern kostet im Prototyp ein paar Minuten. Im fertigen Produkt wären es Tage. ## Warum sich Prototypen lohnen Änderungen an einem Prototyp sind deutlich günstiger als Änderungen an fertigem Code. Prototypen sorgen außerdem dafür, dass im Team alle über dasselbe sprechen: Ein klickbarer Entwurf beendet viele Diskussionen, die mit Worten allein endlos weiterlaufen würden. Und sie sind die Grundlage für einen [Usability-Test](https://www.insideuxdesign.com/de/glossar/usability-test), bei dem du beobachtest, wo Menschen hängen bleiben. Wichtig ist die Abgrenzung zum Minimum Viable Product (MVP): Ein Prototyp dient zum Lernen und wird oft wieder verworfen. Ein MVP ist eine erste echte Version, die tatsächlich genutzt wird. Mehr dazu im Artikel [Minimum Viable Product (MVP): Was UX Designer beachten sollten](https://www.insideuxdesign.com/de/blog/minimum-viable-product-mvp-was-ux-designer-beachten-sollten). ## In der Praxis - **Erst die Frage, dann der Prototyp.** Schreib vorher auf, was du herausfinden willst. Die Frage bestimmt, wie detailliert der Prototyp sein muss. - **So grob wie möglich, so genau wie nötig.** Für Struktur und Abläufe reicht oft Papier. Für Fragen zu Lesbarkeit oder Animationen brauchst du einen detaillierteren Entwurf. - **Vor dem Test selbst durchklicken.** Ein toter Link oder ein fehlender Screen bringt Testpersonen aus dem Konzept und verfälscht die Ergebnisse. ## Verwandte Begriffe [Wireframe](https://www.insideuxdesign.com/de/glossar/wireframe), [Usability-Test](https://www.insideuxdesign.com/de/glossar/usability-test), [Design System](https://www.insideuxdesign.com/de/glossar/design-system) ## Quellen - [Kara Pernice: UX Prototypes: Low Fidelity vs. High Fidelity. Nielsen Norman Group, 2016](https://www.nngroup.com/articles/ux-prototype-hi-lo-fidelity/) ## Weitere Begriffe [ ### A/B-Test Ein A/B-Test ist ein Experiment, bei dem zwei Varianten einer Seite oder eines Elements gleichzeitig an zufällig aufgeteilte Besuchende ausgespielt werden. So entscheidest du anhand echter Daten, welche Variante besser funktioniert. ](https://www.insideuxdesign.com/de/glossar/a-b-test) [ ### ARIA ARIA ist ein W3C-Standard, der HTML um Rollen, Zustände und Eigenschaften ergänzt. So erfahren Screenreader, was ein Element ist und wie es sich gerade verhält. ](https://www.insideuxdesign.com/de/glossar/aria) [ ### Affordance Eine Affordance beschreibt, welche Handlung ein Objekt möglich macht und ob Menschen das erkennen: Ein Button lädt zum Drücken ein, ein Griff zum Ziehen. ](https://www.insideuxdesign.com/de/glossar/affordance) [ ### Alternativtext Ein Alternativtext ist eine kurze Textfassung eines Bildes im HTML-Attribut alt. Screenreader lesen ihn vor, damit Menschen, die das Bild nicht sehen, dieselbe Information bekommen. ](https://www.insideuxdesign.com/de/glossar/alternativtext) [ ### Arbeitsgedächtnis Das Arbeitsgedächtnis hält Informationen für kurze Zeit fest, damit du mit ihnen arbeiten kannst. Es fasst nur wenig, deshalb sollten Interfaces möglichst wenig Merkarbeit verlangen. ](https://www.insideuxdesign.com/de/glossar/arbeitsgedaechtnis) [ ### Atomic Design Atomic Design ist eine Methode, Benutzeroberflächen aus kleinen, wiederverwendbaren Bausteinen aufzubauen: von einzelnen Elementen wie Buttons bis zu ganzen Seiten. ](https://www.insideuxdesign.com/de/glossar/atomic-design) [ ### BFSG Das Barrierefreiheitsstärkungsgesetz (BFSG) verpflichtet seit dem 28. Juni 2025 viele Unternehmen, bestimmte Produkte und digitale Dienstleistungen wie Onlineshops barrierefrei zu gestalten. ](https://www.insideuxdesign.com/de/glossar/bfsg) [ ### Barrierefreiheit Barrierefreiheit bedeutet, dass Websites, Apps und digitale Dokumente so gestaltet sind, dass alle Menschen sie nutzen können, auch mit einer Seh-, Hör-, motorischen oder kognitiven Behinderung. ](https://www.insideuxdesign.com/de/glossar/barrierefreiheit) [ ### Card Sorting Card Sorting ist eine Research-Methode, bei der Menschen Begriffe auf Karten in Gruppen sortieren. So siehst du, wie sie Inhalte gedanklich ordnen, und kannst eine verständliche Navigation planen. ](https://www.insideuxdesign.com/de/glossar/card-sorting) [ ### Cognitive Load Cognitive Load ist die geistige Anstrengung, die nötig ist, um eine Oberfläche zu verstehen und zu bedienen. Je weniger unnötige Denkarbeit ein Design verlangt, desto leichter fällt die eigentliche Aufgabe. ](https://www.insideuxdesign.com/de/glossar/cognitive-load) [ ### Contextual Inquiry Contextual Inquiry ist eine Research-Methode, bei der du Menschen in ihrem echten Arbeitsumfeld beobachtest und befragst. So siehst du, wie sie Aufgaben tatsächlich erledigen, nicht nur, wie sie davon erzählen. ](https://www.insideuxdesign.com/de/glossar/contextual-inquiry) [ ### Conversion Eine Conversion ist eine gewünschte Aktion auf einer Website oder in einer App, etwa ein Kauf oder eine Anmeldung. Die Conversion Rate zeigt, welcher Anteil der Besuche dazu führt. ](https://www.insideuxdesign.com/de/glossar/conversion)