UX-Prototyping

Was ist UX-Prototyping?

UX-Prototyping bedeutet, eine Entwurfsversion der Oberfläche eines Produkts zu bauen, von Papierskizzen bis zu klickbaren Screens, damit Menschen sie ausprobieren können, bevor Entwickler sie umsetzen. Ziel ist, günstig zu lernen: Verstehen Nutzer das Layout, finden sie, was sie suchen, und schließen sie ihre Aufgabe ab? Einen Prototyp ändert man in Stunden, ausgelieferten Code in Sprints.

Wie der Detailgrad (Fidelity) funktioniert

Die Nielsen Norman Group definiert Fidelity als Maß dafür, wie genau ein Prototyp dem Look-and-feel des fertigen Systems entspricht, und unterscheidet drei Dimensionen, die sich unabhängig voneinander einstellen lassen:

• Interaktivität: von nicht funktionierenden Elementen, bei denen eine Person den Computer spielt, bis zu klickbaren Links und Menüs.
• Visuelle Gestaltung: von Schwarz-Weiß-Skizzen oder Wireframes bis zu realistischem Layout, Abständen und Hierarchie.
• Inhalt: von Platzhaltern und Zusammenfassungen bis zu echten Texten und Bildern.

Niedrige Fidelity ist schnell, lässt sich mitten in der Sitzung ändern und fördert offene Kritik, daher passt sie in die frühe Phase. Hohe Fidelity eignet sich, um einen Ablauf, eine einzelne Komponente oder die visuelle Hierarchie zu testen, weil Nutzer reagieren wie bei einer echten Software.

Ein einfaches Beispiel

Ein Team, das einen Checkout entwirft, zeichnet fünf Papier-Screens und bittet vier Personen, etwas zu kaufen. Zwei zögern beim Versandschritt, weil die Kosten erst am Ende erscheinen. Das Team zieht die Kosten nach vorn, zeichnet ein Blatt neu und testet am selben Nachmittag erneut. Später entsteht in einem Design-Tool eine klickbare Version, um Button-Zustände und Fehlermeldungen zu prüfen.

So prototypen Sie gut

1. Legen Sie zuerst die Frage fest: Navigation, Formulierung, ein Formular, ein ganzer User Flow.
2. Wählen Sie die niedrigste Fidelity, die diese Frage beantworten kann.
3. Bauen Sie nur den Pfad, den der Test braucht, nicht das ganze Produkt.
4. Testen Sie mit echten Zielnutzern und iterieren Sie in kleinen Runden. Nach dem Modell der NN/g findet eine Studie mit fünf Nutzern etwa 85 % der Usability-Probleme, empfohlen werden aber mehrere kleine Runden, weil jede Überarbeitung neue Probleme erzeugen kann.
5. Prüfen Sie den Prototyp auf einem Smartphone-Bildschirm im Sinne von Mobile-First-Design und denken Sie von Anfang an an die Reihenfolge der Tastaturnavigation und barrierefreie Formulare.

Häufige Fehler

• Visuelle Details polieren, bevor die Struktur validiert ist.
• Mit Kollegen testen statt mit den späteren Nutzern.
• Den Prototyp als Spezifikation behandeln: Er zeigt die Absicht, nicht Randfälle, Fehlerzustände oder Performance.
• Fragen "Gefällt es Ihnen?" statt eine Aufgabe zu stellen und zu beobachten.

Vom Prototyp zur Produktion

Ein Prototyp sagt nicht, wie sich das echte Produkt unter Last oder in einem nicht getesteten Browser verhält. Sobald der Ablauf live ist, lohnt es sich zu prüfen, ob er weiterhin funktioniert. API- und Synthetic-Monitoring von LoadFocus enthält in den Bezahlplänen Browser-Checks und mehrstufige Checks, die einen Login oder Checkout nach Zeitplan abspielen. Lesen Sie dazu den Beitrag Benutzererfahrung mit Synthetic Monitoring verbessern (auf Englisch). Das größere Bild finden Sie unter Was ist User Experience (UX)?

Häufige Fragen

Was ist der Unterschied zwischen Low-Fidelity- und High-Fidelity-Prototypen?

Fidelity beschreibt, wie genau der Prototyp dem fertigen System entspricht. Low Fidelity heißt Skizzen, Wireframes und Platzhalterinhalte mit wenig oder keiner Interaktion. High Fidelity heißt realistische Optik, echte Inhalte und klickbares Verhalten.

Wann nutze ich einen Low-Fidelity-Prototyp?

Früh, solange die Struktur noch offen ist. Er ist schnell gemacht, in der Sitzung leicht änderbar, und Menschen kritisieren ihn freier, weil er nicht fertig aussieht.

Wie viele Nutzer brauche ich zum Testen eines Prototyps?

Nach dem Modell der Nielsen Norman Group finden fünf Nutzer in einer Studie etwa 85 % der Usability-Probleme. Empfohlen werden mehrere kleine Runden und je 3 bis 4 Nutzer pro Gruppe, wenn die Zielgruppe klar verschiedene Gruppen hat.

Ist ein Prototyp dasselbe wie ein Wireframe?

Nein. Ein Wireframe ist ein schematisches Layout und eine Form von Low-Fidelity-Material. Ein Prototyp ergänzt Interaktion, sodass man durch Screens navigieren und eine Aufgabe versuchen kann.

Ersetzt Prototyping den Test des fertigen Produkts?

Nein. Es senkt früh das Designrisiko. Funktions-, Barrierefreiheits- und Performance-Prüfungen am echten Build bleiben nötig.