Prototyping für eine bessere User Experience

Der Begriff Prototyp ist schon lange Teil unseres Alltags, wenngleich die Definition nicht immer ganz klar zu sein scheint und hier und da neue Wortschöpfungen die griechische Komposition (»protos« der Erste / »typos« Urbild) ersetzen. So begegnen uns auf der Straße keine Prototypen, sondern Erlkönige, und wenn man von stereotypischen Verhaltensweisen archetypischer Nutzer im Umgang mit prototypischen Systemen hört, hinterfragen selbst geübte Sprecher ihren Geisteszustand.

Ein ‚Vorbild’ im wahrsten Sinne

Dabei kann man einen Prototyp recht einfach mit anderen Synonymen beschreiben, die keine Fragen offen lassen sollten. Ein Prototyp ist ein Vor-Bild, ein Muster bzw. ein Versuchsmodell eines geplanten Produktes. Er dient zur Erprobung sowie Weiterentwicklung und liefert einen ersten Vorgeschmack auf das Endprodukt.

Und dieser Vorgeschmack ist eben genau das – Ein Vorgeschmack. Ein digitaler Prototyp ist kein fertiges Produkt, sondern der erste Lebenshauch, die erste Umsetzung einer Idee. Oftmals wird hier nebst der Visualisierung nur ein Teil bzw. eine Funktion prototypisiert und getestet, mit dem Ziel die Idee zu validieren oder neu zu denken.

So stellt das Prototyping im digitalen Kontext den kompletten Prozess der Ideenentwicklung und Optimierung der Prototypen bis hin zur Fertigstellung dar. Dies bedeutet im Prinzip, dass das Prototyping vom Start weg ein wesentlicher Bestandteil der digitalen Produktentwicklung und Lösungsfindung ist.

Prototyping in der Ideenentwicklung

Um einen Prototypen nun nicht im luftleeren Raum zu entwickeln und der User Experience direkt die notwendige Gewichtung zu geben, muss man zunächst wissen, für wen man überhaupt entwickelt. So kann man mit Hilfe von Personas nicht nur ein höheres Verständnis für die Nutzerbedürfnisse erlangen und klare Ziele formulieren, sondern bereits Usability-Tests durchführen, bevor echte Nutzer ins Spiel kommen.

Des Weiteren steht im Sinne des Design Thinkings auch noch die Ideation-Phase vor der Prototyp-Erstellung. Hier werden in erster Linie alle denkbaren Ideen gesammelt, um diejenigen Themen zu identifizieren, die auch Mehrwert für Nutzer und Produkt liefern - Und da digitale Produkte immer designabhängig sind, sollten die erarbeiteten Konzepte am Besten direkt visualisiert werden.

Dieses Arbeiten mit Skizzen, Sketches und Storyboards ist, wenn man so will, die Vorstufe des Prototypings. Hier kann man mit einfachsten Mitteln den Funktionsrahmen bestimmen und konkrete Anwendungsfälle visualisieren. Wie könnte das Layout aussehen? Welche User-Interface-Elemente werden genutzt und wo werden sie platziert?

Aus statisch wird dynamisch

Bei der Gestaltung eines digitalen Produktes oder Services wäre der nächste Schritt nun aus den Skizzen einen konzeptionellen Entwurf zu erstellen – Den Wireframe. Es ist die erste schematische Darstellung des digitalen Produktes, in der die grundlegenden Elemente festgehalten werden. Es handelt sich also nicht um ein vollendetes Design mitsamt seiner Variablen wie Schriftart oder Farbe, sondern um eine erste konkretisierte Darstellung der Benutzeroberfläche.

Solche Low-Fidelity-Prototypen, die eine geringe Wiedergabetreue(Fidelity) aufweisen, sind kostengünstige sowie zeitsparende Mittel, um ein Projekt zu dokumentieren, schnell einen Eindruck vom Produkt zu gewinnen und erstes Feedback zu sammeln. Dabei ist der Wireframe zunächst eher statisch und weist einen geringen Detailgrad auf.

Doch die Detailiertheit und damit Wiedergabetreue kann im Wireframing auch erhöht werden. High-Fidelity-Wireframes sind zwar zeitaufwändiger, vermitteln jedoch einen besseren Eindruck über die UI-Elemente und der Funktionalität, indem Platzhalter mit Bildern, Content und Farbe ausgefüllt werden können.

Nimmt man hierzu noch sogenannte Click-Dummys hinzu, erhält man bereits einen Prototyp mit Teilfunktionalität. Neben der reinen Visualisierung erlaubt man den Nutzern nun durch Bildabfolgen, die per Klick ausgelöst werden, eine erste rudimentäre Interaktion mit dem digitalen Produkt in einem extrem frühen Stadium.

Feedback und Interaktion in High-Fidelity

Um eine optimale UX zu gewährleisten und Usabilty-Tests durchführen zu können, die jedes noch so kleine Detail miteinbeziehen, ist es normalerweise unausweichlich im Laufe des Designprozess ausgefeilte Prototypen zu erstellen. Sie erfordern weniger Vorstellungskraft, da sie realistischer im Bezug auf das visuelle Design sind, und in Kombination mit einer User Journey können die Interaktionen zwischen Zielgruppe und digitalem Produkt ganzheitlich betrachtet werden.

Am gebräuchlichsten sind für UX-Designer sogenannte Digital Prototypes - Interaktive und animierte Produktprototypen einer Benutzeroberfläche, die nahezu bereit zur Implementierung sind. Mit dieser Prototypisierung kann man den Nutzern ein erfahrbares Produkt liefern und klares Feedback einsammeln, um die neu gewonnenen Informationen direkt wieder in die Prozess-Schleife einzufügen.

So hat das Prototyping digitaler, nutzerorientierter Produkte als zyklischer Prozess auch Ähnlichkeiten mit dem Lean-Startup Gedanken des Minimal Viable Product (MVP). Hier wird ein auf die nötigsten Funktionen begrenztes Produkt erstellt und auf den Markt gebracht, um so schnell wie möglich neue Erkenntnisse zu generieren.

Das Herzstück des Design-Prozesses

Die Prototypisierungs- und Testing-Phase stellt den wichtigsten Teil des iterativen Entwicklungs-Prozesses dar, da er sowohl als End- als auch Startpunkt fungiert. Prototyping, Testing und Gewinnung von Nutzer Feedback werden stets wiederholt und rekapituliert, bis ein optimales, nutzerorientiertes Produkt steht. Dabei liegt der Vorteil nicht nur darin, schnell an das Ziel zu kommen, sondern auch schnell eingreifen zu können, wenn der Weg plötzlich in einer Sackgasse endet.