Toolbox Interactiondesign


UI Prototyping

UI Prototyping Tutoriat— Teil II | Pixate

Klick, Klick, Bang — Interactive Interfaces

Vor allem für das Prototypen gilt: Effizienz ist eine Tugend.
Wir müssen uns immer genau vor Augen halten, dass die Prototypen die wir bauen (in den meisten Fällen) nicht Teil des fertigen Produktes sein werden. Deshalb macht es auch sinn sich genau zu überlegen wieviel zeit wir in den Prototypenbau investieren wollen. Möchten wir beispielsweise wie in Teil I beschrieben nur die Struktur besser verstehen, reicht dann doch ein einfacher Klickdummy. In manchen Fällen wollen dann aber auch komplexere Interaktionen und Animationen erklärt oder exploriert werden. Dann ist es eben doch sinnvoll etwas mehr Zeit in die Umsetzung eines Prototypen zu setzten.

Für die Codeaffinen unter uns kann es Sinn machen solche komplexeren Interaktionen mit Hilfe von Processing, Web-Technologien oder codebasierten Prototypingtools wie Farmer.js umzusetzen. Für dieses Tutoriat wollen wir uns aber Tools anschauen die (fast) ganz auf Code verzichten. Das bekannteste dieser Tools ist wohl Axure. Diese eierlegende Wollmilchsau unter den Prototypingtools ist wohl das Designpendant zu SAP Software. Mächtig, komplex und nicht gerade ein Paradebeispiel für Usability. Axure zu lernen würde eindeutige den knappen Rahmen des Tutoriats sprengen.
In den letzten Monaten sind jedoch immer mehr verschiedenster Prototypingtools aufgepoppt. Principle, Floid, Flinto, Origami, Form, Pixateum nur ein paar wenige zu nennen. Für dieses Tutoriat werden wir uns letzteres genauer anschauen.

Pixate hat den Vorteil das wir unsere Animationen mit Hilfe des UIs einfach zusammenklicken und das Ergebnis dann einfach sharen können.

Aufgabe: Die Nutzer sollen in der Guidr App ganz einfach die Sigths auswählen können die sie in einer Stadt gerne besichtigen wollen. Unsere Vision ist eine Tinder ähnliche Interaktion. Dazu haben wir schonmal die Visual erstellt und wollen nun explorieren wie die Interaktion und Animation der einzelnen UI Elemente genau funktioniert.

2.0| Pixate — Was geht?

Guidr Prototype in pixate

Pixate funktioniert am besten für Touchdevices. Es lassen sich also nicht nur Software für Smartphone oder Tablets, sondern auch alle anderen Interfaces simulieren die eben über Touch gesteuert werden — also beispielsweise Navigationsgeräte, smarte Kühlschränke, intelligente Heizungszähler und so weiter. Für Guidr bleiben wir aber ganz konservativ bei dem Prototyping einer Smartphone App.

2.1| Aller Anfang ist gar nicht so schwer

Spannend an Pixate ist, dass Kreation und Testing getrennt sind. Das bedeutet das wir zunächst Pixate Studio auf unserem Rechner installieren müssen um so unsere Interaktionen bauen zu können. Im zweiten Schritt installieren wir die Pixate App auf unserem Smartphone um dann wiederum das Ergebnis darauf testen zu können.

Wie wir in Pixate unseren Prototypen bauen ist in diesem zweiteiligen Videotutorial zu sehen.

Screencast – UI Prototyping – Pixate Teil I from Interaction Design Group on Vimeo.


Screencast – UI Prototyping – Pixate Teil II from Interaction Design Group on Vimeo.


In Teil III des Tutoriats werden wir mit Hilfe vonOrigami eine weitere Art kennen lernen um Interaktionen und Animationen zu prototypen.

03.02.2016 | Dennis Hatwieger |