Du hast deine App-Screens fertiggestellt und fragst dich:

“Funktioniert mein Design für meine Zielgruppe?”

Aber wie “misst” man die Benutzerfreundlichkeit seines Designs und die daraus resultierende Benutzererfahrung? Vielleicht wird dir dieser Artikel die Antwort geben.

Designen. Testen. Lernen.

Für die Analyse meines App-Flows nutze ich Quant-UX. Die App selbst habe ich in Sketch designed. Wie ihr in den folgenden Screenshots sehen könnt, ist es eher ein Wireframe als ein fertiges Interface Design. In meinem Beispiel handelt sich um einen Ausschnitt aus einer Shopping-App. Dort können Kleidung, Schuhe und Accessoires gekauft werden.

Meine Zielgruppe habe ich wie folgt definiert: Frauen im Alter von 35–50 Jahre, verheiratet, mit 1–2 Kindern, mit Beruf, erfahren im Einkaufen auf einem mobilen Gerät. In meiner Testaufgabe fokussiere ich mich auf einen Ausschnitt der kompletten User-Journey (“In kurzer Zeit das richtige Produkt finden und in den Warenkorb legen.”).

Folgende Testaufgaben habe ich definiert:

  1. Die Testnutzerin soll sich einloggen
  2. Die Testnutzerin soll einen grünen Schuh finden und anklicken, um ihn in den Warenkorb zu legen

Hast du dein App-Design oder Wireframe fertig, exportiere die Screens und log dich unter www.quant-ux.com ein. Keine Angst, du kannst Quant-UX einen Monat kostenlos mit allen Funktionen testen. Nachdem du nun einen Account hast und eingeloggt bist, klick auf “Create Prototype” um dein erstes Projekt anzulegen.

Nachdem du dein Projekt erstellt hast, öffnet sich der visuelle Editor (Canvas). Hier ziehst du deine App Screens (PNG oder JPEG Grafiken) in die Arbeitsfläche.

In diesem Blog-Artikel möchte ich nicht auf die Oberfläche und Funktionen von Quant-UX eingehen. Aber: Es ist ein sehr mächtiges Werkzeug und im Vergleich zu andern Prototyping-Tools mit mehr Möglichkeiten ausgestattet.

Damit unser Prototyp weiß, welcher Screen der erste Screen sein soll, müssen wir einen Start-Screen definieren. Klicke dazu auf den ersten Screen deiner App und klicke im rechten Seitenmenü unter “Settings” auf “Start Screen”.

Die Screens verbindest du jetzt mittels Hotspots. Diese Hotspots sind quasi die Interaktionsflächen für deine Testnutzer. Ein großer Pluspunkt bei Quant-UX ist, dass du die von deinem Testnutzer eingegebenen Formulardaten validieren oder die Bildschirme über ein Logikelement verknüpfen kannst (“Logic-Flow”). Logic-Flow ist praktisch, wenn man z.B. verschiedene Optionen in einer Dropdown-Liste hat und daraus resultierend verschiedene Screens ansprechen kann.

Für mein kleines Beispiel sind jetzt alle Screens verbunden und ich kann meinen Test starten, indem ich den Projektlink zu meinen Testnutzerinnen schicke (diese könnten rund um den Globus verteilt sein). Allerdings fehlt mir noch meine Testaufgabe.

Analysiere dein Design während es entsteht. Spare somit viel Zeit und Geld!

Diese ist wichtig, weil ich ja eben genau testen möchte, ob der grüne Schuh einfach und schnell gefunden wird oder nicht. Deshalb schließe ich den Canvas und gehe in das Dashboard auf “Lernen” und klicke dann “Aufgabe hinzufügen”. Anschließend möchte ich meine Schritte der Aufgabe aufzeichnen und klicke auf “Flow”.

Testergebnis analysieren.

Nachdem deine Testgruppe den Test beendet hat, kannst du analysieren, ob die Aufgaben erfüllt wurden und ob die Benutzerreise wie erwartet flüssig war. Wenn nicht, helfen dir die Ergebnisse herauszufinden, wo deine Benutzeroberfläche optimiert werden könnte.

Zusammenfassung.

Wie ich eingangs erwähnt habe, zeigt dieser Artikel einen Workflow, wie du dein Design analysieren kannst. Es ist kein 100%-ig reales Beispiel und die Möglichkeiten mit Quant-UX sind grenzenlos. Du hast gesehen, wie einfach und schnell du dein UI-Design in Quant-UX hochladen kannst. Mit diesem Tool hast du die Möglichkeit dein digitales Produkt zu testen, bevor es entwickelt wird (Entwicklungskosten sparen!).