Marketing Glossar

2.413 Fachbegriffe aus 22 Bereichen des Online Marketings

Prototyp

Definition: Ein Prototyp (auch: Klick-Dummy, interaktiver Prototyp, Design-Prototyp) im UX/UI-Kontext ist eine simulierte, interaktive Darstellung eines Produkts, einer Funktion oder eines Nutzerflows die Interaktion ohne vollständige technische Implementierung ermöglicht – Prototypen dienen der frühzeitigen Testbarkeit von Designhypothesen, der Usability-Evaluation mit echten Nutzern und der Stakeholder-Kommunikation vor kostspieligem Entwicklungsaufwand. Prototyp-Fidelity-Spektrum: Lo-Fi-Prototyp (Low Fidelity; niedrige Detailtreue; Papierprototyp; Wireframe mit handgezeichneten Klickpfaden; schnell; günstig; geeignet für frühe Strukturtest-Fragen; verhindert dass Tester sich auf visuelle Details statt Struktur fokussieren); Mid-Fi-Prototyp (digitale Wireframes mit Klickpfaden; Figma-Wireframes mit einfachen Transitions; moderater Aufwand; für Navigations- und Flow-Tests); Hi-Fi-Prototyp (High Fidelity; finale Farben, Typografie, reale Inhalte; Figma Smart Animate; für Micro-Interaction-Tests und Stakeholder-Demos; aber: höherer Aufwand). Horizontaler Prototyp vs. vertikaler Prototyp: Horizontaler Prototyp: breite Abdeckung aller Hauptbereiche mit wenig Tiefe; zeigt die gesamte Navigation; jede Funktion nur oberflächlich; ideal für Navigation-Tests und Information-Architecture-Evaluation; Vertikaler Prototyp: ein spezifischer Flow in voller Tiefe (z.B. kompletter Checkout-Prozess); ideal für detaillierte Usability-Tests eines kritischen Workflows. Coded Prototype (Entwicklungs-Prototyp): in Code implementiert; echte Performance; reale Daten; höchste Fidelity; für finale Validierung vor Launch und Performance-Tests.

Erläuterung

Die Geschichte des Prototypings im Design entstammt dem industriellen Produktdesign wo physische Modelle («Mock-ups» aus dem englischen «to mock up» = nachahmen) vor der Serienproduktion gebaut wurden um Form, Funktion und Fertigungsprozesse zu validieren. Bill Buxton (Principal Researcher; Microsoft Research; Cambridge; England/Redmond; WA; «Sketching User Experiences: Getting the Design Right and the Right Design», Morgan Kaufmann Publishers, 2007) transformierte diese Denkweise für das Interface-Design: Buxton's Kernthese war dass Design-Teams zu früh zu detaillierte Designs erstellen («getting the design right») ohne sicherzustellen dass sie überhaupt die richtige Design-Richtung einschlagen («getting the right design»); Lo-Fi-Prototypen und Skizzen ermöglichen es mehr Designideen in kürzerer Zeit zu explorieren bevor man sich auf eine festlegt. Carolyn Snyder (User Interface Engineering; Burlington; MA; «Paper Prototyping: The Fast and Easy Way to Design and Refine User Interfaces», Morgan Kaufmann, 2003) systematisierte Papierprototyping als Forschungsmethode: physische Schnittstellen-Simulationen aus Papier die von einem «menschlichen Computer» (Teamkollege der die System-Reaktionen simuliert) gesteuert werden; Snyders Studien zeigten dass Papierprototyp-Tests 80% der Usability-Probleme aufdecken die auch mit digitalen Prototypen gefunden würden bei einem Bruchteil des Aufwands. Jakob Nielsen (Nielsen Norman Group; Fremont; CA; «Usability Engineering», Morgan Kaufmann, 1993) etablierte Prototyping als zentrale Technik des Usability-Engineering: sein Iterativer-Design-Prozess (Design → Prototyp → Test → Überarbeiten → Prototyp → Test) ist die methodische Grundlage für nutzerzentriertes Design. IDEO (Design-Consultancy; Palo Alto; CA; gegründet von David Kelley 1991; «The Art of Innovation», David Kelley/Tom Kelly, Doubleday, 2001) formalisierte «Fail Early, Fail Often» als Prototyping-Philosophie: lieber zehn schnelle physische Modelle ausprobieren als ein perfektes entwickeln; diese Philosophie wurde zur Grundlage des Design-Thinking-Prozesses (Empathize → Define → Ideate → Prototype → Test). Jake Knapp (Google Ventures; San Francisco; CA; «Sprint: How to Solve Big Problems and Test New Ideas in Just Five Days», Simon & Schuster, 2016; gemeinsam mit John Zeratsky und Braden Kowitz) formalisierte den «Design Sprint» als 5-tägigen Prozess der einen Prototyp am Donnerstag erzeugt der am Freitag mit 5 Nutzern getestet wird; Knapp's Prototyp-Ziel war dabei bewusst ein «Facade» – ein oberflächlich realistisch aussehendes Interface das echte Reaktionen provoziert ohne echte Funktionalität zu haben; Tools: Keynote, Figma oder Prototyp-Tools die schnelle Erstellung in 6–8 Stunden ermöglichen. Figma (Dylan Field und Evan Wallace; San Francisco; CA; erste öffentliche Version 2016) revolutionierte digitales Prototyping durch den direkten Prototyp-Flow innerhalb des Designtools: statt Designs in InVision zu importieren können Designer in Figma direkt Klickpfade zwischen Frames anlegen; Smart Animate (Figma, 2019) ermöglicht automatisch flüssige Transitions zwischen Frames die ähnliche Elemente enthalten; Overlay-Patterns für Modals und Drawers; auch Component Properties und Variables für zustandsbasierte Prototypen.

Prototyp-Typen, Tools und Fidelity-Entscheidungen

Prototyp-Testing, Feedback-Integration und Design-Sprint

Praxistipp: Wählen Sie die Prototyp-Fidelity nach der Testfrage – nicht nach Perfektion: Wenn Sie testen wollen «Finden Nutzer die richtige Navigation?» reicht ein Lo-Fi-Klick-Dummy aus Papier oder Balsamiq. Wenn Sie testen wollen «Fühlen sich diese Animations-Transitions natürlich an?» brauchen Sie einen Hi-Fi-Figma-Prototyp mit Smart Animate. Ein zu detaillierter Prototyp zu früh im Prozess verschwendet Zeit und führt dazu dass Testpersonen sich auf visuelle Details statt auf Struktur und Flow konzentrieren. Formulieren Sie immer eine konkrete Hypothese bevor Sie testen: «Wir glauben dass 4 von 5 Nutzern die Warenkorb-Funktion ohne Hilfe finden» – so wissen Sie nach dem Test ob Sie bestätigt oder widerlegt wurden.