Der Prototyp dient dazu, das Design und die Produktidee zu testen, bevor das endgültige Produkt entwickelt wird. Dabei kann Feedback gesammelt und die Usability durch Anpassungen und Iterationen verbessert werden. Ein Prototyp simuliert die Benutzerinteraktion mit einem Interface, wobei die Ausführlichkeit variieren kann, von einzelnen Funktionen bis hin zum gesamten User Flow. Die Genauigkeit der Abbildung im Prototyp wird als Fidelity bezeichnet. Ein Beispiel dafür wird in einem Adobe Blog-Beitrag von Nick Babich näher erläutert.

In einem internen Projekt, das die Sicherheit im öffentlichen Raum betrifft, wird der iterative Designprozess mit Low- und High-Fidelity-Prototyping demonstriert. Dabei werden verschiedene Techniken zur schrittweisen Generierung mobiler App-Screens verwendet. 

Paper Prototyping

Beim Paper Prototyping liegt der Fokus auf der schnellen visuellen Darstellung erster Konzeptideen. Mit einem einfachen Stift können unkompliziert und kostenarm Strukturen der Screens auf Papier visualisiert werden. Rechtecke für einzufügende Bilder, Linien für mögliche Textinhalte und Schraffuren für klickbare Elemente kommunizieren einen groben Aufbau. Besonders wichtig ist hier, sich nicht in Details zu verlieren. Die Stärke der Methode liegt darin, Ideen schnell verwerfen zu können ohne als Designer:in oder Stakeholder:in emotional zu sehr daran gebunden zu sein. Mit Hilfe erstellter Paper Prototypes können bereits erste UX Tests durchgeführt werden. 

Im Rahmen des internen Projekts werden mehrere Screens skizziert, um verschiedene Designansätze zu vergleichen. Unter anderem wird geprüft, ob mit oder ohne einer Navigationsleiste gearbeitet werden soll, Kartenelemente oder ein fliegender Ansatz bevorzugt wird oder ob spezielle Elemente durch eine Überlagerung dargestellt werden. Am Ende wurde sich für vier Main Screens, die über eine Navigationsleiste erreichbar sind, entschieden. 

Paper Prototyping Sketches
Paper Prototyping Hauptscreens

Klickbare Wireframes

Um erste digitale Darstellungen der Screens zu erhalten, kann die Technik der klickbaren Wireframes eingesetzt werden. Wie die Paper Prototypes haben auch sie noch nicht das visuelle Design des Endprodukts, sondern konzentrieren sich auf die Positionierung der einzelnen Elemente, die in Grautönen gehalten werden. Indem die statischen Screens verlinkt werden, kann Interaktivität hinzugefügt werden. Dies verleiht dem Prototypen ein besseres Erlebnis. Klickbare Wireframes sind ideal für UX Tests, um das Konzept der Screens zu testen. Das dadurch gesammelte Feedback kann genutzt werden, um Pain Points der Nutzenden zu identifizieren und in einer neuen Iterationsrunde Paper Prototypes anzufertigen. 

In unserem Projekt bilden wir mit allen Wireframes vier Use Cases der App ab, die in sechs UX Tests getestet wurden. Gesammeltes Feedback wurde daraufhin kategorisiert und in einer erneuten Iteration in Paper Prototypes umgesetzt. Diese wurden erneut in Wireframes übersetzt, bevor es zum nächsten Schritt des High-Fidelity Prototypen übergeht.

Wireframes von vier Hauptscreens

High-Fidelity Prototypes

High-Fidelity Prototypen beinhalten nun im Gegensatz zu den Low-Fidelity Varianten das finale Design, authentischen Inhalt und realistische Interaktionen. Damit spiegelt diese Version das reale Produkt in einem gewissen Umfang wider und eignet sich ideal zur finalen Präsentation vor Stakeholder:innen und der Weitergabe zur Entwicklung. Tatsächlich hatte sich aufgrund des Feedbacks der UX Tests die Struktur und der Aufbau der vier Main Screens geändert.

High-Fidelity Prototyp von vier App Screens

Dieser Prozess zeigt auf, wie wichtig die Low-Fidelity Prototypes als Basis für ein finales Design sind. Alles, was in diesem Prozess als negatives Feedback identifiziert werden kann, muss nicht mehr erst beim Release des fertigen Produkts durch Endkund:innen erlebt werden. Auch wenn Screens im finalen Design visuell ansprechender sind, sind sie in der Konzeptionsphase bewusst nicht als erste Ergebnisse gewollt.

 

Du hast Interesse an mehr Informationen zu diesem Projekt?

Melde dich gern bei uns!
business@uxma.com

Mona Petersen
Mona Petersen ist Marketingexpertin und bringt ihre umfangreichen Erfahrungen in digitalen Kommunikationswegen in das Business Development Team von UXMA ein.
Digital Learning Campus erhält German Brand Award!

Digital Learning Campus erhält German Brand Award!