Eine neue Generation von Prototyping Tools

Nutzer-Tests sind entscheidend, wenn du eine positive Benutzererfahrung gestalten möchtest. Woher sollst du auch wissen, wie die Nutzer mit deinem Design wirklich interagieren werden?

Wenn du nicht testest, wirst du einige #Usability-Schwachstellen in deinem #Design haben. Klick um zu Tweeten

Normalerweise stellst du diese Mängel später mit einigen analytischen Werkzeugen wie KissMetrics oder Google Analytics fest, aber bis dahin haben Sie bereits potenzielle Kunden verloren und evtl. auch ordentlich Geld verbrannt.

Viele Prototyping Tools in den letzten Jahren.

Mit diesen Werkzeugen kannst du interaktive Prototypen in kürzester Zeit und ganz ohne Programmierkenntnisse erstellen. Du kannst die Prototypen übergeben, so dass Kunden oder Stakeholder dein Design testen und Feedback geben können. Bekannteste Dienste sind hier wohl InvisionApp.com, MarvelApp.com oder Proto.IO. Allerdings lassen diese Tools nur einen statischen App-Flow zu, quasi die Aneinanderreihung von Screens. Testet man die Usability mit 1-3 Personen ist das vollkommen in Ordnung, aber will man mit einer größeren Gruppe testen, stößt man schnell an die Grenzen der Auswertung einzelner Tests.

Deshalb möchte ich euch gern 3 Startups (canvasflip.com, kyrapp.de und konceptapp.com) vorstellen, die dieses Problem lösen und analytische Fähigkeiten für deinen Prototypen bieten. Der Arbeitsablauf aller Werkzeuge folgt im wesentlichen dem Prozess für HCD (Human Centered Design). Zuerst entwirfst du deinen Prototypen, um dann Tests mit deiner Zielgruppe durchzuführen. Abschließend werden analytischen Tools verwendet, um zu verstehen, wie die Tester/innen mit deinem Entwurf interagieren. Se erfährt man schnell, ob die Nutzer das Design verstanden haben oder nicht.

Im nächsten Abschnitt werde ich jedes der Tools genauer besprechen, insbesondere die Prototyping und die analytischen Funktionalitäten. Das Testen ähnelt sich in in den drei Tools. Man veröffentlicht seinen Prototyp und teilt einen Link mit den Testern/innen. Während des Tests mit dem Prototypen werden alle Interaktionen aufgezeichnet. Alle Tools erstellen Bildschirm-Aufnahmen. Das gute daran ist, dass keinerlei zusätzliche Browser-Plugins installiert werden müssen.

canvasflip.com

CanvasFlip ähnelt InVision und MarvelApp und konzentriert sich auf Klick-Dummies. Du entwirfst mit einem Tool der Wahl, exportierst das Design in PNG-Dateien und lädst es auf die Plattform hoch. Nach dem Hochladen verknüpft man die Bilder und definiert die Trigger-Ereignisse und Animationen zum Erstellen eines Test-Prototyps. Man kann Ebenen verwenden, um modale Dialogfelder, Popups usw. zu erstellen. CanvasFlip wird mit drei analytischen Werkzeugen ausgeliefert. Die erste ist der Video-Player für die Bildschirm-Aufnahmen, welche korrekte oder falsche Klicks zeigt. Das zweite Werkzeug sind Heatmaps, die die Benutzerinteraktion zusammenfassen. Und das dritte Werkzeug ist ein Funnel-Diagramm, das den Conversion-Funnel visualisiert. Es gibt auch ein Dashboard, welches die Testdaten zusammenfasst. Man kann zum Beispiel sehen, wie viel die Benutzer getestet haben und wie lange der Prototyp getestet wurde.

kyrapp.de

KYRA ist vergleichbar mit Werkzeugen wie Proto.IO oder Axure und ermöglicht die Erstellung funktionaler Prototypen. Dies bedeutet, dass die Prototypen wirklich funktionieren, z. b. können die Benutzer ihre Daten in Eingabefelder eingeben oder Optionen aus Dropdown-Listen auswählen. Das Tool kommt mit seinem eigenen visuellen Editor und UI Elemente können aus einer eigenen Bibliothek auf den Screen gezogen werden. Der visuelle Editor ist sehr mächtig und hat viele fortgeschrittene Funktionen wie Master-Bildschirme, Form-Validierung oder “Logic Flows”. Wenn du lieber mit dem Grafik-Tool deiner Wahl designen möchtest ist das kein Problem. KYRA unterstützt die gängigen Bitmap-Formate. Um den Interaktionsfluss zu modellieren, verknüpfet man die Screens. Animationen und zusätzliche Layer können auch verwendet werden, zum Beispiel zum Erzeugen von Modal-Window-Dialogen etc.

KYRA verfügt zusätzlich zu den Bildschirm-Aufnahmen über sieben analytische Werkzeuge. Auf der rechten Seite des Video-Players findet man verschiede Abschnitte während des Test – in nettes Feature. Die wichtigsten analytischen Werkzeuge sind Klick-Heatmaps und User-Journey-Diagramme, die die Reise des Nutzers durch das Design im Detail modellieren. Schöne Funktionen sind die Scroll-Analyse und die Heatmaps der Sichtbarkeit, die zeigen, wie viel Zeit der Benutzer im Viewport zugebracht hat. KYRA unterstützt auch Task/Conversion-Analyse. Du kannst eine Aufgabe aufzeichnen. Das Tool berechnet die Erfolgsquote und die Zeit die es gebraucht hat, um diese Aufgabe zu erfüllen. Es gibt auch ein Dashboard, dass die Testdaten zusammenfasst.

Konceptapp.com

KonceptApp ähnelt CanvasFlip und konzentriert sich auf Klick-Dummies. KonceptApp unterstützt Layer, Animationen und erlaubt auch scrollbare Elemente innerhalb eines Screens. Nachdem die Tests gestartet wurden, kann man die Screenshots anzeigen oder in die Heatmap-Ansicht wechseln. Wie KYRA gibt es auch die Möglichkeit Testaufgaben zu definieren und in einem Dashboard zu visualisieren. KonceptApp kommt mit zwei Flugzeugen.

Fazit.

Aus meiner Sicht machen die analytischne Funktionalitäten das Testen mit Nutzern viel einfacher. Alle Tools sind sehr nützlich und man darf gespannt sein, wie diese sich weiterentwickeln. KYRA ist mit Abstand das leistungsfähigste Werkzeug. Es ermöglicht die Erstellung realistischer Prototypen und die Auswertung mit fortschrittlichsten analytischen Werkzeugen.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.