Toolbox Interactiondesign


UI Prototyping

UI Prototyping Tutoriat — Teil III |Quartz Composer & Origami

3.0 | Fäden ziehen oder eben visuelles Programmieren

Pixate ist ein spannendes Tool zum Prototypen, in der Auswahl an Interaktionen und Animationen aber begrenzt. Manchmal müssen wir deshalb auf andere Tools zurückgreifen um unsere Visionen erfahrbar zu machen. Wie in Teil II beschrieben ist es daher immer eine Möglichkeit seine Ideen mit Hilfe von Code umzusetzen. Doch davor graut es vielen Designern. Meist ist es die Angst vor dem komplizierten Textbasierten arbeiten ( → wieso und wie man als Designer trotzdem Coden lernen sollte, gibt es unteranderem hier zu lesen). Das Programmieren aber auch anders funktionieren kann zeigen visuelle Programmiersprachen wie VVVV,MaxMsp oder auch Quartz Composer. Das sich mit dem letzteren auch ganz gut Prototypen lässt, zeigen wiederum die Jungs und Mädels von Facebook. Diese haben ein Plugin extra dafür mit dem Namen Origami geschrieben.

Etwas genauer:
Quartz Composer ist eine Node basierte Programmiersprache. Das bedeutet das wir verschiedene Module durch fadenartigen Verbindungen mit einander verknüpfen können um so logische Abhängigkeiten zu erzeugen. Diese Module nennen sich in der Quartz Composer Welt Patches, und Origami erweitert diese Welt mit Patches die genau auf unsere UI Prototyping Bedürfnisse ausgelegt sind.

Rechts: Protrotyp in Quartz Composr | Links: Vorschaufenster zum Testen

3.1 | Ein etwas holpriger Start

Zunächst einmal: Quartz Composer läuft nur auf dem Mac — Und die Installation könnte auch einfacher sein. Denn Quartz Composer gibt es nur wenn man sich bei Apple als Developer anmeldet (das ist tatsächlich sogar ganz kostenlos), und dann die Graphic Tools für Xcode lädt. Erst danach lässt sich Origami installieren ( → Die komplette Anleitung gibts auch nochmal auf der offiziellen Origami Seite).

Für alle iPhone Besitzer gibt es noch eine ganz angenehme Art zu Prototypen. Ihr könnt euch die Origami iOS App laden und dann euren Mac mit dem iPhone per Kabel verbinden um dann den Prototypen zu testen.

3.2 | Get Schwifty

Im folgenden video Tutorial werden wir uns anschauen wie wir mit Hilfe von Quartz Composer und Origami einen Prototypen bauen können.

Der Kompassmodus in der Guidr App

Aufgabe: Die Nutzer sollen mit Hilfe der Guidr App einfach zu ihrem nächsten Sight kommen. Dafür haben wir einen Kompass Modus mit Hilfe von Sketch visualisiert und wollen nun testen wie die Interaktion und Animation dafür aussehen.

Screencast – UI Prototyping – Quartz Composer & Origami Teil I from Interaction Design Group on Vimeo.

Screencast – UI Prototyping – Quartz Composer & Origami Teil II from Interaction Design Group on Vimeo.

3.1 | Origami — Die Vor und Nachteile

Wenn man sich für Origami als Prototyping Tool entscheidet, kann man sich vieler schöner Vorteile gewiss sein, muss aber auch mit einigen Nachtteilen leben. Deshalb möchte ich ganz kurz ein paar dieser aufzählen.

Pro:

  • Einige Origami Patches basieren auf der POP Animationslibrary von Facebook. So lässt uns Origami die POP Patches als Codeschnipsel ausgeben. Das vereinfacht die Kommunikation mit unseren Entwicklerkollegen.

Ausschnitt aus dem Promo Video für Avocado
  • Auch die Design schmiede IDEOhat eine zusätzliche Library an Patches für Origami namensAvocado geschrieben. Mit Avocado können wir beispielsweise eine Bluetoothverbindung zu Arduinos aufbauen um so schnell analoge Interaktionen zu testen.

Con:

  • Quartz Composer ist nicht gerade Apples Lieblingskind. Ob uns wieviel an Quartz Composer noch entwickelt wird oder ob es nicht doch eines Tages komplett eingestellt wird, steht in den Sternen.
  • Es gibt keine Möglichkeit unsere Prototypen nativ auf einem anderen PC zum laufen zu bringen. Möchten wir diesen also dem Kunden oder unseren Entwicklern zeigen, müssen diese sich erst Quartz Composer und dann Origami (, Avocado) installieren. Also eher unwahrscheinlich.

Im letzten Teil unseres Prototyping Tutoriats werden wir die Welt der Touch Interfaces komplett verlassen und uns anschauen wie wir Gestenbasierte Interfaces mit Hilde der Leap und Quartz Composer Prototypen können.

03.02.2016 | Dennis Hatwieger |