Toolbox Interactiondesign


UI Prototyping

UI Prototyping Tutoriat — Teil IV | Quartz Composer & Processing & LEAP Motion

4.0 | Gesture Control is dead, long live Gesture Control

Als elementarer Bestandteil im Forschungsfeld der Natural User Interfaces, bemühen sich schon seit langem Forscher und Entwickler den heiligen Gral der gestenbasierten Steuerung ausfindig zu machen. Doch die Geschichte der Gestensteuerung ist vor allem von vielen Hypes und genau so vielen Ernüchterungen geprägt. Bestes Beispiel dafür ist wohl Nintendos Power Globe Flop. Eben gescheitert an der technologischen Umsetzung, der unterirdischen UX und der schrecklichen Usability.

Auch die fast 20 Jahre später entstandene neue Welle an gestenbasierten Systemen war dann keine Heilsbringer. Ja, Wii und Kinect haben vieles besser gemacht als ihr unrühmlicher Vorgänger und ja, den Gaming Sektor haben sie ganz schön durchwirbelt. Doch darüber hinaus? Unser Alltag hatte sich nicht in ein wundervolles Minority Report Wunderland verwandelt, indem wir alle wie Tom Cruise wild fuchtelnd unsere Daten auf unserem Desktop hin und her verschieben.

Die Zukunft ?!

2013 schien sich das endgültig zu ändern. Mit der LEAP Motion erhob sich ein neuer Stern am Himmel der gestenbasierten Steuerung. Wie die Bloggospähre vermeldete, hatte ein findiger jung Mathematiker, fast schon so eine Art neuer Gauß oder Leibniz, ein Algorithmus geschrieben mit dem hochaufgelöst kleinste Gesten einfach getrackt werden können. Die Technologie war also da um die Eingaberevolution zu starten und die Computermaus in die staubige Ecke zu verbannen in die sie scheinbar hingehört.

Mit eigenem App Store, Designguidlines und einer großen Developer Community bestückt wollte LEAP Motion vieles besser als die Vorgänger machen. Dennoch schlug auch hier die Ernüchterungskeule mit geballter Kraft zu. Viele UX und Usability Probleme wurden noch nicht gelöst und sinnenhafte Anwendungsfälle blieben einfach aus.

Nach nun fast drei Jahren der erneut großen Ernüchterung blühen nun die ersten Knospen der neuen gestenbasierten Technologien. So fordert vor allem die kommende VR-Welt die „neuen“ Bedienkonzepte ein. Aber auch große Unternehmen haben die Möglichkeiten der gestenbasierten Steuerung ausgemacht. Als bestes Beispiel steht hierfür BMW mit seinem AirTouch System.


Die Anwendungsfälle sind da und nun liegt es an uns Interaction Designern das große Seufzen zu verhindern.

4.1 | Kenne deinen Freund

Wir sitzen jeden Tag vor Mousepads und Touchdisplays. Als Nutzer wissen wir wann wir klicken und wo wir swipen müssen. Anders verhält es sich mit den gestenbasierten Eingabemethoden von LEAP Motion & Co. Es gibt einige Interaktionsparadigmen doch oft kommen wir an die Grenze des „intuitiven“. Deshalb ist es für uns Interaction Designer so wichtig diese „neuen“ Interaktion im Entstehungsprozess zu explorieren.
Auch hierfür gibt es wieder zwei Möglichkeiten. Zum einen können wir uns dem Code zuwenden oder auch, wie im letzten Teil, wieder das visuelle Programmieren heranziehen. Beides hat wie immer seine Vor- und Nachteile.

4.2 | VR/AR & 2DR

Doch wann Code wir und wann ziehen wir unsere Strippen? Betrachten wir dazu die zwei Anwendungsfälle VR/AR und das BMW AirTouch Interface.
Für VR/AR müssen wir uns ganz auf die gängigen Möglichkeiten des VR/AR Prototypings stützen. Wir kommen also (derzeit) nicht um den Umgang mit Game Engines und/oder das Code herum.
Anders verhält es sich wenn wir „einfache“ Interfaces Prototypen wollen. Hier können wir zwar auch schon mit Hilfe einfachen codens schnell vorankommen, aber auch das visuelle Programmieren mit Quartz Composer, Max Msp oder VVVV eignet sich dafür.

Im folgenden Videotutorial werden wir uns anschauen wie wir das LEAP Motion Plugin für Quartz Composer installieren und unsere erste Interaktion testen.

Screencast – UI Prototyping –  Quartz Composer & Leap Motion from Interaction Design Group on Vimeo.

Im folgenden video Tutorial schauen wir uns die Implementation der LEAP in Processing an und werden die erste Interaktion testen.

Screencast – UI Prototyping – Leap Motion & Processing from Interaction Design Group on Vimeo.

4.3 |Mind the Ergonomics

Und nun? Auf in das wundervolle Minority Report Wunderland?!? Naja, eher nicht. Also am besten nicht so wie im Film. Auch wenn das alles ganz schick aussah, schien es ganz schön anstrengend zu sein. So wird zumindest berichtet das Tom Cruise wegen seiner Rumfuchtteilie regelmäßig Pausen einlegen musste. Eben der Gorilla-Arm-Effekt.
Deswegen die Empfehlung. Prototypen, Prototypen und viel Lesen. Zum Beispiel das hier.


5 | Abschluss

Das war nun der letzte Teil zum UI Prototyping Tutoriat. Wir haben uns angeschaut wie wir mit Hilfe von Sketch und InVision einfache Klickdummys schnell bauen können, wie Pixate uns beim Prototypen von Apps hilft, wie wir mit Quartz Composer und Origami verschiedene Interaktionen testen können und abschließend wie wir gestengesteurte Systeme schnell testen können. In allen Teilen des Tutoriats haben wir immer nur die Basis gelegt. Nun ist es an euch das richtige Tool für den richtigen Prototypen zu wählen.

Ihr habt noch Fragen oder kommt nicht weiter? Schreibt mir doch auf Twitter, eine Mail {mailATdennishatwieger.de} oder schaut euch auf den Community Seiten der Prototyping Tools um.

12.02.2016 | Dennis Hatwieger |