Prototyping

Nehmen Sie nun die erstellten Wireframes, notieren Sie sich die Erkenntnisse aus dem Guerilla Test (z.B. je einen Aspekt pro PostIt) und erstellen Sie daraus einen ersten Prototypen. Folgende Schritte können Sie dabei als Leitfaden gerne nutzen:

Wählen Sie ein Prototyping-Tool Ihrer Wahl aus. Sehr gängig ist beispielsweise Figma (https://www.figma.com); weitere Tools wie u.a. Sketch, Adobe XD stellen wir in unserem Buch (S. 194f) vor.
Laden Sie sich ein Wireframe-Kit herunter (z.B. https://www.figma.com/de/templates/wireframe-kits/)
Bauen Sie mithilfe der vorgegebenen Elemente Ihre Wireframes nach.
Erstellen Sie dann einen ersten Prototypen. Das kann erstmal ein Klickdummy, also das Verknüpfen der Screens zu einer logischen Abfolge sein, oder bereits erste Animationen enthalten. Tutorials finden Sie zu jedem der gängigen Tools online; für Figma ist einiges unter https://help.figma.com/hc/de zu finden.

Sobald Sie einige Verknüpfungen in Ihrem Prototyp erstellt haben, wechseln Sie zwischendurch immer wieder in den so genannten Präsentationsmodus. Dort können Sie sich ansehen, wie Ihre Seiten auf dem jeweiligen Endgerät aussieht, was im sichtbaren Bereich ist und wie sich die Interaktionen „anfühlen“.

Damit testen Sie gewissermaßen selbst Ihr Konzept. Stellen Sie sich dabei folgende Fragen:

Sind die Seiten in einer logischen Abfolge?
Was würde ich als Nächstes erwarten, was soll z.B. beim Touch/Klick auf einen Button passieren?
Welche Zustände im Prototypen sind hilfreich darzustellen, wenn ich diesen erneut mit Probanden testen würde?

Wenn Sie unsere Meinung zu Ihrer Lösung hören wollen, mailen Sie uns Ihren Prototypen an: aufgaben@uux.jetzt

Wissen zur Methode

Wenn Sie noch mehr zum Prototyping lernen wollen, finden Sie in unserem Buch im Kapitel 16 ab Seite 205 (aktuelle 4. Auflage) Wissenswertes dazu, was Sie bedenken sollten, wie Sie am besten an die Erstellung eines Prototypen herangehen und welche Tools alternativ zu dem oben vorgeschlagenen Tool Figma genutzt werden können.