Klickdummies oder Prototypen // Testing von User-Journeys und Interaktionen

Erstellung von Klickdummies oder Prototypen zwecks Testing von Bedien- und Content Konzepten

Beschreibung der Methode

Worum geht es?

Im folgenden Abschnitt der UX Methoden gehen wir auf den Grund zur Erstellung von Klickdummies und Prototypen ein, sowie deren Nutzen beim Testing von User-Journeys und Bereitstellung von Interaktions-Animation an FrontEnd.

Worin liegt der Nutzen für das Projekt?

Mit Klickdummies oder Protototypen sollen bestimmte Teile eines Projektes visuell und interaktiv unterstützten und es somit dem Kunden, als auch der Umsetzung leichter vermitteln. Die Ausnahmen machen hier richtige Testings am User, hier muss ein Prototyp vorliegen, der die Anwendung bestmöglich simuliert.

Man unterscheidet zwischen vier grundlegenden Anwendungsbereiche von Klickdummies/Prototypen. …

  • Darstellung von Klickstrecken, Userjourneys und Infoarchitekturen im Einsatz (Klickdummy)

  • Darstellung der Seitenstruktur zur Unterstützung des visuellen Konzeptes z.B. bei einem Pitch (Klickdummy – selten; Prototyp)

  • Unterstützung in der Konzeption von Interaktionsmöglichkeiten/-Animationen an den Kunden und später Umsetzenden (Klickdummy; Prototyp)

  • Darstellung der Seite im späteren gewünschten Live-Zustand, mit komplexen Interaktionsmöglichkeiten zu Testzwecken (Prototyp; Statische Website)

Gibt es Abhängigkeiten?

Grundsätzlich Nein. Der Stand des Projektes sollte aber mindestens schon grafische Elemente auf Wireframbasis vorweisen, besser noch sind komplette ausdefinierte Layouts. Es werden durch Klickdummies/Prototypen komplexe Interaktions-Animationen oder User Journeys unterstützt und einfacher vermittelt, es ist aber kein Muss. Bei einem Testszenario mit Endverbrauchern muss allerdings ein vollumfänglicher Prototyp vorliegen, der einen Seitenführung bestmöglich simuliert.

Zielbeschreibung

Was soll an Erkenntnis erarbeitet werden?

Klickdummies
Mit der Ausarbeitung von Klickdummies wird geprüft ob User-Journey und Infoarchtitekturen lückenfrei sind, oder ob es noch Ausbesserungen geben muss.

Zudem können Interaktionen, wie zum Beispiel Hover-Effekte optisch dargestellt werden.

Prototypen
Prototypen soll den Kunden bei der Entscheidungsfindung unterstützen und ist entsprechend eine argumentative Hilfe für den vorstellenden Konzepter. Auch hier können Klickstrecken detailliert dargestellt werden.

Eine weitere Erkenntnis können HTML-Prototypen geben, indem diese bei direkten Test an dem User verwendet werden können. In einem Labor wird hierbei der Prototyp als eine “fertige” Seite vorgestellt, auf dem der User bestimmt Aufgaben lösen und/oder die Seite durchstöbern sollen. Dazu muss der Prototyp SO nah an der Realität sein, wie nur möglich.

  • Prüfen von Klickstrecken und Infoarchtektur

  • Prüfen der Sinnhaftigkeit von Interaktionen/Verlinkungen

  • Darstellung von Animationen und Interaktionen für Kunden aber auch FrontEnd

  • Darstellung von kompletten Seite als argumentative Hilfe für die Layoutvorstellung

  • Durchführung von Usertests an einer vorläufigen Seite

Wofür ist dies wichtig?

Vorgehensweise

Welche Vorarbeiten sind notwendig?

Wie oben bereits erwähnt, sollten mindestens grafische Elemente in Wireframequalität vorliegen. Je nach Nutzen, kann das benötigte Material mehr oder weniger weit in der grafischen Darstellung sein. Klickdummies, die nur Klickstrecken/User-Journeys darstellen sollen, benötigen keine komplett ausgearbeiteten Layouts. Während spätestens beim Prototyp das fertige Layout mit Interaktionszuständen (z.B. Hover-Effekte) vorliegen sollte. Dies gilt auch für den HTML-Prototyp, dieser unterscheidet sich nur in der Herstellung vom einfachen Prototypen.

Wie wird der Inhalt erarbeitet?

Klickdummy
Für einen Klickdummy wird meistens das Programm InVision oder aber auch Adobe XD und Sketch genutzt. Das zu verlinkende Element wird auf ein neuen Screen verlinkt oder ankert innerhalb der Seite. Hierbei muss nicht unbedingt ein Hover vorliegen, es geht nur um die Unterverlinkung von Seiten untereinander. - Die Darstellung einer Klickstrecke.

Prototyp (einfach)
Je nach Komplexität kann Figma (geringe Komplexität) oder Protopie (hohe Komplexität) genutzt werden.

In Figma können Layouts direkt miteinander verbunden werden, zudem ist es möglich einfache Hover und Micro-Animations zu setzen.

In Protopie können Dateien von Figma importiert werden. Diese werden komplett mit Ebenenlogik in einzelnen Elementen hochgeladen. Dieses Javascriptbasierte Programm kann diese Layouts komplett simulieren und animieren. Von Scrollanimationen bis hin zu “Timern” oder Parallax-Effekten, kann hier alles dargestellt werden. Daneben ist es möglich die Seiten untereinander zu verlinken. Auch eine responsive Erstellung von Prototypen ist grundlegend möglich, hierfür sollte das Design aber direkt in Protopie erstellt werden. Neben einer Vorschau, liefert Protopie ebenfalls eine Cloud. Diese Cloud stellt den Prototypen jedem mit Link zu verfügung. Mit Rechten kann der User die Arbeitsdatei zum Prototypen auch direkt von der Seite herunterladen und bearbeiten. Vorteil: Will man ein komplexen Prototypen, welcher sich wie die fertige Seite anfühlen kann, empfiehlt es sich dieses Programm zu nutzen. Es ist relativ einfach in der Handhabung und auch wenn man JavaScript einfügen kann, ist dieses wissen zur Nutzung der Software nicht nötig.

Wichtig: Schriften werden in Protopie nicht eingebettet. Dafür kann man diese aber in der Software in Grafiken umwandeln. Sofern die Hausschrift des Kunden keine Systemschrift ist, empfiehlt sich dieses vorgehen.

Prototyp (HTML)
Hier reicht es eine Art Storyboard zu haben, welches klar anzeigt wie der Prototyp sich verhalten soll. Erarbeitet wird der HTML-Prototyp vom FrontEnd. Sofern möglich kann dieser auch einen einfachen Prototypen als Vorlage bekommen.

Wann macht ein Kundenworkshop Sinn? 

Vor der Erstellung der Klickdummies oder Prototypen, sollte in dem Visions-Workshop abgesprochen werden, ob etwaiges benötigt wird und in welchem Ausarbeitungsgrad.

Nach einem User-Test sollte man einen Workshop zur Analyse der Ergebnisse und Verbesserungsideen abhalten.

Ist diese Methode ein Pflichtinhalt für Projekt-Visionsphasen?

Nein. Nur bei aufwändigen animativen Konzepten zur adäquaten Präsentation der Idee vor der eigentlichen technischen Umsetzung.