Fluid GUI Interactions

Fluid GUI Interactions

Im Kurs Applicationdesign 1 entwickelten wir neue Lösungsansätze für ein bestehendes Problem: Transparenzverlust in der persönlichen Finanzverwaltung.
Das Ziel dieses Projektes war es, uns studierende auf die Nutzung verschiedener Methoden zu sensibilisieren und diese in einem Designprozess anzuwenden.

Wir entschieden uns für die Verschmelzung verschiedener Anwendungen aus dem Genre Finanzverwaltung. So konnten wir mit einer breiten Marktforschung starten, konkurrenzanalysen bilden und Unterkategorien der bestehenden Anwendungen und derer zugrunde liegender Probleme definieren.

Neben den verschiedenen Stärken und Schwächen der Produkte entdeckten wir ein Muster in genutzten Elementen. Dieses stellt die Daten der finanziellen Ein- und Ausgaben grafisch in Form einer Ellipse dar.

Ein weiteres Muster: In vielen Produkten ist auf der Hauptseite ein Plus- und ein Minussymbol zu finden. Diese Elemente dienen als Aktivierungsfläche für Funktionen zum Eintragen von Ein- und Ausgaben.

Im weiteren Prozess erstellten wir eine Affinity Map. Dort ordneten wir alle gefundenen Funktionen der Anwendungen in einem zweiachsigen Koordinatensystem an. Die X-Achse stellt die Wichtigkeit der Funktionen da, während die Y-Achse die Häufigkeit der Nutzung darstellt. Die wichtigsten Funktionen mit der höchsten Nutzungshäufigkeit bildeten die Grundlage für unser Minimum Viable Product (MVP).

Wir analysierten die ausgewählten Funktionen auf deren Bedienkonzept. Wie viele Interaktionen muss der Nutzer tätigen um die gewünschte Funktion zu aktivieren? ... Für den Interaktionskontext der Ein- und Ausgabefunktionen ist die Zeit ein wesentlicher Faktor, der sich direkt auf die User-Experience auswirkt. Je schneller und einfacher der Nutzer seine Funktion (Ein- oder Ausgabe) aktivieren kann, desto besser!

Für das neue Bedienkonzept entwickelten wir fluid Interactions, dadurch kann der Nutzer mit nur einer Geste verschiedene Informationen eingeben und die gewünschte Funktion in passender Form aktivieren.

In der ersten Phase der Interaktion, wählt der Nutzer aus ob er eine Aus- oder Eingabe tätigen möchte.
Durch ein ziehen des jeweiligen Icons in den Innenbereich, wird die Funktion ausgewählt und weitere Eingabeoptionen erscheinen.

In der zweiten Phase der Interaktion, wählt der Nutzer auf welches seiner Konten er diese Ein- oder Ausgabe verbuchen möchte.
Durch einen swipe nach rechts, wählt er diese Option aus und weitere Eingabeoptionen erscheinen.

In der dritten Phase der Interaktion, wählt der Nutzer das Produkt aus, welches er kaufen möchte. Er bekommt hier Optionen vorgeschlagen die für ihn relevant seien könnten.
Durch verlassen der Geräteoberfläche an der gewünschten stelle, aktiviert er die Funktion. Der Nutzer kann die Funktion jederzeit unterbrechen, indem er seinen Finger in den Außenbereich bewegt und dort die Geräteoberfläche verlässt.

Im Produktvideo ist der Prozessablauf der Interaktionen dargestellt. (siehe oben)


Sources:
https://developer.apple.com/videos/play/wwdc2018/803/