Mixed Prototyping: Interfaces mit Augmented Reality testen

Stellen Sie sich folgende Situation vor …

Ihre Idee oder Ihr Produkt befindet sich in einem frühen Entwicklungsstadium. Nun möchten Sie herausfinden, ob es seinen Zweck erfüllt und ein besseres Verständnis für den entstehenden Look & Feel entwickeln. Ausserdem möchten Sie echtes Nutzerfeedback zur Akzeptanz sammeln.

Da es noch nicht entwickelt ist, bietet Ihr Produkt allerdings noch keine Möglichkeit, es konventionell zu testen. Sie müssen jedoch vor der Umsetzung wissen, ob das Design weiterentwickelt werden sollte.

Was würden Sie tun?

„The technologies that we design do not, and never will, exist in a vacuum.“ — Bill Buxton

Klassisches Prototyping: bietet noch Luft nach oben

Typischerweise starten Usability Professionals damit, die Produktziele sowie die Nutzergruppen zu bestimmen und fahren damit fort, Prototypen für Testings zu entwickeln. Prototypen müssen — im Gegensatz zum finalen Produkt — nicht voll funktionsfähig sein. Im Grunde erfüllen sie zwei Ziele: sie sehen wie das finale Produkt aus und lassen die Researcher eine kleine Auswahl an Szenarios testen.

So weit, so gut.

Aber stellen Sie sich vor, die zu gestaltende Software oder das Embedded UI werden in einem komplexen Umfeld oder einer Industriemaschine zum Einsatz kommen. In diesem Kontext ist der Einfluss der Interaktion mit sowie der Eindruck von der Maschine entscheidend für den Erfolg des Interface.

Liefert ein Testing in einem neutralen Umfeld also eine realistische Experience?
Wie könnte ein Interface ohne die entsprechende Hardware effizient getestet werden?

Na ja … Mixed Reality könnte die Antwort sein.

Eröffnet neue Möglichkeiten: Prototyping mit Mixed Reality

Es gibt zahlreiche Möglichkeiten des Prototypings, von komplett physisch bis hin zu komplett virtuell.

Bevor Microsoft die HoloLens 2 veröffentlichte, erforschten wir mit Hilfe der ersten Generation der HoloLens, wie die Hardware in das Testing-Szenario projiziert werden könnte.

Wir hatten die Idee, dem Nutzer ein realistischeres Verständnis der Grösse und Erscheinung des Produkts zu vermitteln, wie beispielsweise der Hardware, sowie ein echtes Display zu nutzen, mit dem er interagieren kann.

Dieser grundlegende Workflow lässt sich so skizzieren:

1. Ein Designer erstellt einen digitalen UI-Prototypen mit einem Prototyping Tool und exportiert ihn in einem Webformat wie HTML, CSS oder JS.

2. Der Export dient als Grundlage für das Hologramm der physischen Maschine.

3. Während des Testings trägt der Nutzer eine HoloLens. Er oder sie interagiert mit dem Interface, das auf dem Browser eines Smartphones (oder eines anderen webfähigen Geräts) zu sehen ist und erhält direktes Feedback über Animationen oder Geräusche.

4. Die Maschine, die das Interface später umgeben wird, wird von der HoloLens als Hologramm um das Interface herum dargestellt.

Das Hologramm und das Interface werden als eine Einheit gesehen. So kann die Interaktion mit dem Interface realistischer getestet werden.

Ausserdem können Designer und Entwickler ein interaktionsbereites Produkt früher testen.

Natürlich mussten wir diese Idee bei Ergosign testen. Und zwar so:

Arbeitet im Hintergrund: die Technologie

Wir setzten ein IPC-Netzwerk für die Interaktion zwischen den zwei Geräten (dem Screen und der HoloLens) und den Nutzern auf. Dieses besteht aus den Hauptkomponenten:

1. NodeJS-Server

2. Socket.io Web Client

3. TCP .NET Client

Ein Computer betreibt den NodeJS-Server, die zwei Clients laufen auf dem Smartphone und der HoloLens.

Wir nutzten WebSockets, ein TCP-basiertes Netzwerkprotokoll, als WebBrowser Client in Kombination mit einem Unity/UWP Client. (Universal Windows Platform)

Der Web Client schickt Nachrichten an den Server, während der UWP Client stets Status-Updates vom Server anfordert.

Der Input, den der WebSocket Client empfängt, stösst die Animation des virtuellen Prototypen an. Wenn ein User einen Maschinenprozess startet, reagiert das Maschinenhologramm entsprechend.

Die 3D-Modelle erstellten wir in Blender und Autodesk 3ds max, alle Interaktionen und Partikelsysteme implementierten wir in Unity.

Wir nutzen ausserdem Hammer JS zur Erkennung der Touch-Interaktionen vom Webserver und zum Mapping des virtuellen Modells auf das Interface — mit Unterstützung von Vuforia SDK in Unity.

Designer können das UI entweder mit Hilfe einer Prototyping-Software oder direkt im Code Editor anpassen.

Wir begannen dieses Projekt, bevor die zweite Generation der HoloLens vorgestellt wurde. Deswegen nutzten wir zur Erstellung des Hologramms die erste Generation der HoloLens. Wir wählten die HoloLens, da sie kabellos und freihändig genutzt werden kann. Ausserdem bietet sie eine entsprechende Auflösung und wurde als Industriestandard betrachtet.
Da wir aber wissen, dass Technologie einen grossen Einfluss haben kann, sind wir sehr gespannt, wie die HoloLens 2 die Karten neu mischen wird!

Los geht’s: unser Showcase

Anhand eines Prototypen einer Kaffeemaschine zeigen wir, wie das ganze Setup eingesetzt werden kann:

Das Hologramm einer Kaffeemaschine ist mit dem Display des physischen Smartphones verankert. Das Smartphone befestigten wir auf einem Stativ. Das UI öffneten wir über einen Browser. Wir gestalteten das Interface für ein Touchdisplay, sodass die Experience des Nutzers der Interaktion mit einem eingebauten Display so nahe wie möglich kommt.

Der Nutzer kann problemlos mit dem Prototyp interagieren und klassische Szenarien starten, wie beispielsweise:

• einen normalen Kaffee ziehen (nach dem Drücken eines Buttons kann er beobachten, wie Kaffee in eine Tasse läuft)

• Milch hinzufügen (indem er den Button länger drückt)

• nach Erscheinen einer Fehlermeldung den Kaffeebehälter nachfüllen.

In diesem Setup ist es auch möglich, zu testen, ob das Interface Sicherheitsrisiken birgt. Beispielsweise kann beobachtet werden, dass bei beim Wunsch nach einem Tee das Wasser aus einem anderen Hahn herauskommt.

Zusammenfassung: die zahlreichen Vorteile

Die Wahrscheinlichkeit steigt, dass Remote Usability Testings zum neuen Standard werden. Sie benötigen aber wiederverwendbare, mobile und belastbare Setups, die reibungslose und mühelose Interaktionen ermöglichen.

Diese bieten den wichtigsten Stakeholdern, sprich Designern, Researchern, Kunden und Nutzern eine gemeinsame Grundlage.

Ausserdem stellen sie für Designer eine Möglichkeit dar, das physische Produkt besser zu verstehen und ihre Designidee und Interaktionstechniken in einem frühen Projektstadium zu testen.
Gleichzeitig können Researcher das Interface hinsichtlich der Bedürfnisse der Nutzer testen.

Unser Projekt bildet den ersten Baustein, um virtuelle Prototypen real umzusetzen.

Remote Testings könnten auch für ihr Projekt interessant sein? Sprechen Sie uns gerne an!