Ausgangspunkt

In der aktuellen Zeit findet die Interaktion mit dem Smartphone vor allem über Touch-Eingaben statt. Zwar hat sich dieser Standard mittlerweile etabliert, jedoch ist es z.B. in puncto Intuition, Bedienbarkeit und Komfort nicht optimal.

Um dem entgegenzuwirken, war es Ziel dieses Projektes mit einer Versuchsreihe eine neue Art der Interaktion aufzuzeigen.

⠀

⠀⠀

⠀

1. Konzeption

1.1 Ideenfindung und Vor-Studie

Schon in den vorrausgehenden Studien entdeckte ich schnell mein Interesse für die Gesten-basierte Interaktion. Jedoch waren die Möglichkeiten und die Umsetzbarkeit für mich noch unklar, sodass ich eine Versuchs-Reihe zu verschiedenen Gesten-Eingaben erstellte. Dafür nutzte ich Webanwendungen in Kombination mit der Libary p5.js. Dabei entwickelte sich ein Repertoire an Prototypen, die ich als Grundlage für spätere Schritte nutzen konnte.

Besonders gut umsetzbar waren dabei:

• Das vertikale Scrollen
• Das horizontale Scrollen
• Der Ja/Nein-Dialog
• Die Mehrfachauswahl
• Weitere (z.B. Multitasking in Fächerform, Notificationcenter, Shuffle)

Ausprobiert werden können diese hier (Mobil-Gerät empfohlen).

1.2 Kontext-Findung

Zunächst war es das Ziel, die gefundenen Möglichkeiten final in einer Zusammenfassung/Übersicht zu präsentieren. Jedoch wären die einzelnen Prototypen nur relativ isoliert aufnehmbar und wenig anschaulich gewesen, sodass ich mich dagegen entschied.

Besser ist hier die Präsentation in einem passendem Wirtssystem – in meinem Fall einer konkreten App. Genauer entschied ich mich für einen Nachbau von „Instagram“. Social Media Plattformen sind beliebt wie nie zuvor, sodass die Veranschaulichung hieran mir als durchaus praktisch erschien. Darüber hinaus erkannte ich schon in den Vor-Studien das Potential der Gesten in Kombination mit Bildern. Die Interaktion mit Foto-Anwendungen durch Gesten wirkte auf mich deutlich angenehmer und intuitiver im Gegensatz zu herkömmlichen Methoden.

Leider war mir jedoch auch klar, dass der Funktions-Umfang des finalen Systems sehr eingeschränkt sein würde. Das liegt an einem (noch) zu kleinen von mir gefundenen Gesten-Pool, der schweren Wahrnehmung der Gesten durch die Sensoren sowie dem relativ knappen Zeitplan. Das sollte jedoch insgesamt die Präsentation der Möglichkeiten nicht wirklich einschränken.

Letztendlich setzte ich den Umfang der App auf das einsehen „geposteter“ Bilder sowie dem „Hochladen“ eigener Fotos fest. Es soll damit eher ein Prototyp für die Demonstration der Möglichkeiten sein und nicht eine eigenständige App.

⠀

⠀⠀

⠀

2. Umsetzung

2.1 App-Aufbau und Funktionen

Grundlegend basiert die App auf der Methodik eines Zustandsautomaten. In verschieden Zuständen der App kann der Nutzer

1. Inhalte einsehen,
2. Bilder durchsuchen, um eines davon „hochzuladen“ und
3. Die Bild-Auswahl für den „Upload“ bestätigen, sodass keines unabsichtlich „hochgeladen“ wird

Ausgangspunkt für jede Nutzungs-Session bildet die Hauptseite für das Scrollen durch die Posts. Gewechselt werden kann zwischen den Zuständen mit einfachen Gesten. 

Im ersten Schritt erstellte ich mit Figma ein Prototyp, der weniger die Interaktion stattdessen eher die notwendigen App-Zustände und deren Interface-Elemente darstellte.

2.2 Design

Grundlegend soll das gesamte System in dunklen Farben erscheinen. Das unterstützt eine bessere Wirkung der Bilder, die wiederum den zentralen Bestandteil der „App“ bilden.

Als Grundlage für das Design orientierte ich mich vor allem an den folgenden zwei Services.

Apple’s Human Interface Guidelines:

Für Komponenten wie Text, Icons und Bars meines zu entstehenden Systems analysierte ich vor allem die Position, das Verhalten, die Größe sowie die Farbe der einzelnen Elemente. Letztendlich entschied ich mich v.a. für einen klassischen iOS App-Aufbau sowie sieben Font-Abstufungen. Das erleichtert den Fokus auf die Gesten-Steuerung, da zumindest der App-Aufbau für den Nutzer einem bekannten Muster folgt.

Instagram:

Nachdem die Anlehnung an Instagram erkennbar sein sollte und die Darstellung der Bilder innerhalb von Instagram gut funktioniert, habe ich den Grundaufbau der App übernommen. In abgespeckter Version fokussiere ich mich bei der Bilddarstellung auf das Foto selber sowie die Anzeige des „Urhebers“ (Profilfoto + Namen). Lediglich den Bereich des Bilder-Uploads habe ich zugunsten der Gesten-Interaktion selber gestaltet.

2.3 Logo

Nachdem Gesturegram die Interaktion mit der Instagram-App auf Basis von Gesten simuliert, entschied ich mich das Logo an das von Instagram anzulehnen.

Um die Interaktion auf Basis von Gesten in dem Logo widerspiegeln zu können, erweiterte ich es um eine weitere Dimension. Wie bei einer Kipp-Geste sollte auch das Logo nach hinten kippen, was den Kontext der App wiederspiegeln soll.

In mehreren Versionen erarbeitete ich das finale Aussehen der „Geste“.

Die dunklen Farbtöne habe ich aufgrund des dunklen Designs meiner App gewählt, wobei meiner Meinung nach, Grautöne weniger ansprechend sind. Deshalb entschied ich mich für eine Abwandlung durch blau-grüne Farben. Einen Gradienten wie im Logo von Instagram habe ich beibehalten.

2.4 Gesten und Interaktionen

Alle Interaktionen finden auf Basis von Gesten statt. Pro Zustand der App versuchte ich die Gesten-Eingabemöglichkeiten auf maximal drei zu beschränken. Das senkt die Wahrscheinlichkeit für Überschneidungen und fördert die Übersichtlichkeit bzw. Verständlichkeit.

In der gesamten Anwendung spiegeln sich grundsätzlich drei Muster in den Gesten wider.

• Neigen auf horizontaler oder vertikaler Ebene dienen vor allem der stetigen Navigation.
• Kippen zur Seite oder nach vorne/hinten ist vor allem für eindeutige Zuweisungen bzw. für einmalige Aktionen gedacht.
• Schütteln bezieht sich auf das Zurücksetzen bzw. dem Abbrechen von Zuständen.

Um dennoch ein klares Verständnis für die Auswahl der möglichen Gesten zu schaffen, visualisierte ich diese am unteren Ende des Bildschirmes. Kleine Animationen mit einem Rechteck sollen dem Nutzer verdeutlichen wie er welche Interaktion durchführen kann.

2.5 Entwicklungsprozess

Entwickelt habe ich die App in mehreren Schritten auf der Basis von HTML/CSS/JS sowie der Libary p5.js. Letzteres ist vor allem für die Erkennung und Verarbeitung der Gesten notwendig, weniger für das Zeichnen eines Canvas'. Alle zu sehenden Elemente sind somit DOM-Elemente, die entsprechend manipuliert werden.

Besondere Meilensteine stellten folgende Punkte dar.

Zu Beginn schuf ich ein Grundgerüst, das grundlegende Funktionen für die App bereitstellt sowie die verschiedenen Zustände verwalten kann. Nach und nach erweiterte ich dann die App um die entsprechenden Zustände. Der Vorteil hierbei ist, dass auch in Zukunft einfach verschiede Erweiterungen implementiert werden können. Das liegt neben der modularen Entwicklung auch an einer möglichst wiederverwertbaren Codestruktur.

Ein stetiges Problem stellte die Nutzung von Orientierungssensoren auf iOS Geräten dar. Das liegt an den Sicherheitseinstellungen von Apple, die das Lesen von Rotationen, Beschleunigungen etc. ohne die Erlaubnis des Nutzers blockiert. Zunächst konnte ich mit dem Wechsel zu einem anderen Browser hier Abhilfe schaffen. Firefox Klar stellt ohne weiteres grundlegend die benötigten Sensor-Daten zur Verfügung. Jedoch konnte ich gerade mit Blick auf die öffentliche Präsentation diesen Browser nicht voraussetzen, sodass ich mich für eine code-basierte Lösung entschied. Mit einer Abfrage zu Beginn des Webseitenaufrufes stelle ich fest, ob ein iOS-Gerät verwendet wird. Wenn ja, bitte ich den User darum, mit Hilfe eines Buttons der Seite die nötigen Rechte zu geben, um die App nutzen zu können. Sollte er dem nicht zustimmen ist die Seite arbeitsunfähig. Diese Methode ist deutlich User-freundlicher und zukunftssicherer.

Bezüglich der Posts habe ich die technische Umsetzung vereinfacht. Alle Bilder werden bei jedem Aufruf der Seite zufällig generiert und sehend damit jedes Mal anders aus. Auch die Fotos für den Upload werden zufällig ausgewählt. Diese Elemente sollen eher dem Verständnis und zu Demonstrationszwecken dienen und keine echte Funktionalität darstellen. Die Abbildungen erhalte ich dabei von Lorem Picsum, die diese wiederum von unsplash beziehen.

2.6 Entscheidungen während des Prozesses

Immer wieder wich ich bei der Umsetzung der Anwendung von meinen ursprünglichen Plänen ab. Das lag daran, dass viele Erkenntnisse erst während der Implementierung festzustellen waren.

App-Aufbau und Funktionen:

Der Upload von Bildern beschränkte ich im Nachhinein auf ein Element. Zuvor hatte ich geplant, den Nutzer mehrere Bilder auszuwählen zu lassen um diese gebündelt hochzuladen. Jedoch sah ich darin keinen Mehrwert. Stattdessen würde die Komplexität dadurch sogar weiter steigen. Während ich im finalen Produkt nur drei Gesten im Upload Bereich abfange, wären es bei mehreren Bildern mindestens vier gewesen. Das hätte den Nutzer ggf. überfordert und eine klare Abgrenzung der Gesten erschwert.

Um für die Präsentation eine frequentierte Nutzung mit immer derselben Ausgangslage ermöglichen zu können, fügte ich abschließend einen passiven Zustand ein. Dieser fordert den Nutzer auf, das Smartphone in die Hand zu nehmen und die App auszuprobieren. Gleichzeitig setzt es alle Bilder und Uploads zurück, sodass bei der nächsten Benutzung der User ein neues sauberes Erscheinen auffindet. Beim Anheben wird dieser automatisch beendet und bei zu langer Inaktivität wieder aktiviert.

Design:

In Bezug auf das Design waren ursprünglich keine Profilbilder vorgesehen. Jedoch war die Simulation von hochgeladenen Bildern von anderen Nutzern nicht ganz klar, sodass ich mich entschied diese zusätzlich generieren zu lassen. Insgesamt ähnelt es somit noch mehr einem Feed von verschiedenen Nutzern, was wiederum die Verständlichkeit steigert.

Gesten und Interaktion:

Die meisten Gesten konnte ich wie geplant codetechnisch umsetzen.

Nachdem ich wie oben beschrieben den Multi-Image Upload gestrichen habe, konnte ich die Gesten zugunsten der Differenzierbarkeit neu belegen. Damit konnte ich vermeiden, dass das Hochladen und das Navigieren innerhalb der verfügbaren Bilder auf einer ähnlichen Geste fundiert.

Darüber hinaus hatte ich festgestellt, dass immer wieder Bilder unabsichtlich hochgeladen wurden. Das lag daran, dass die Gesten für das Auswählen eines Bildes und das Bestätigen dessen auf dem gleichen Prinzip beruhen. Daraus resultierte, dass der Zustand der App sich änderte bevor die Geste abgeschlossen war und damit unabsichtlich eine Bestätigung des Fotos vorgenommen wurde. Gelöst habe ich das, in dem ich den Ja-Nein-Bestätigungsdialog mit einem horizontalen Schwenken steuere. Damit sind die Achsen der beiden Gesten voneinander getrennt. Darüber hinaus habe ich bei diesem Dialog die Sichtbarkeit des Headers sowie der Animations-Leiste mit den verfügbaren Gesten sichergestellt, damit der Nutzer nicht unnötig auf unerwartete Situationen stößt. Das fördert die Konsistenz im Design zwischen den einzelnen App-Zuständen.

⠀

⠀⠀

⠀

3. Resultat

3.1 Anwendung

Die fertige Anwendung Gesturegram bietet die Möglichkeit eine Instagram-ähnliche App anstatt mit Touch-Interaktionen allein durch Gesten zu nutzen. Dabei bilden die grundlegenden Funktionen dieser Version das Einsehen von Posts „anderer Nutzer“ sowie das „Hochladen eigener“ Bilder.

Zu diesem Zeitpunkt ist die App hier einsehbar, wobei für die Nutzung ein Smartphone mit möglichst schmalen UI-Elementen empfehlenswert ist.

Interaktionsmöglichkeiten

In diesem Beitrag habe ich die Interaktionsmöglichkeiten mit Gesturegram anhand eines Videos visualisiert.

3.2 Präsentation und Ausstellung

Abschließend wollten wir unsere im Semester erarbeiteten Ergebnisse sowohl untereinander als auch der Öffentlichkeit vorstellen. Dafür organisierten wir eine Präsentationsrunde sowie eine Ausstellung.

Den Fokus für meine Präsentation setzte ich vor allem auf die Entstehung, das Produkt sowie mein Fazit. Beginnend mit meinem Projekt-Hintergrund stellte ich meine Idee vor, Interaktionen mit Smartphones neu zu überdenken. Anschließend leitete ich über zu meiner Vor-Studie über, wobei ich nur die für das Endprodukt wichtigsten Ergebnisse darstellte. Auf Basis dessen konnte ich zu meiner Kontext-Entscheidung übergehen, um die Brücke zwischen Gestensteuerung und Instagram mit einem kleinen Demonstrationsvideo des Endprodukts zu schließen. Abschließend erklärte ich noch die technische Grundlage, bestehend aus HTML, CSS, JS und p5.js und gab mein persönliches Fazit zu diesem Projekt. Inhaltlich entspricht es somit im Groben dem dieser Dokumentation.

Während der anschließenden Ausstellung präsentierte ich mein Ergebnis mit zwei iOS-Geräten, einem Fullscreen-Browser und der geführten Steuerung von iOS. Mit Letzterem stellte ich sicher, dass Nutzer das Smartphones ausschließlich durch Gesten nutzen konnten und eine anderweitige Nutzung ausgeschlossen war.

⠀

⠀⠀

⠀

4. Fazit

Mit dieser Anwendung ist gut sichtbar geworden, wie Gesten als Alternative zu den herkömmlichen Touch-Eingaben auf Smartphones die Interaktion neu definieren können.

Positive Reaktionen

Während der Abschluss-Ausstellung konnte ich hauptsächlich positive Reaktionen auf die Gestensteuerung feststellen. Grundsätzlich funktioniert es soweit erstaunlich gut und auch die Bedienung wird als durchaus angenehmer empfunden. Für die Interaktion sind grobe kurze Gesten wesentlich komfortabler als die präzise Platzierung von Touch-Bewegungen. Gerade Nutzer mit großen Displays oder kleinen Händen können durch die Gesten-Steuerung stark profitieren. Während Schaltflächen in Apps oder auf Webseiten gerade in den äußeren Regionen des Displays schwer erreichbar sind, ist das bei einer Gestensteuerung unerheblich.

Herausforderungen

Jedoch ist die Verwendung von Gesten aktuell noch wenig etabliert. Das bringt sowohl auf der Entwickler- als auch auf der Nutzer-Seite Probleme mit sich.

Das Abfragen der Gesten war codetechnisch nicht trivial. Aktuell frage ich diese durch hart-codierte Schwellwerte ab, was jedoch gerade in Bezug auf die Diversität an Nutzer-Gesten-Umsetzungen zu Problemen führt. Jeder Mensch führt Gesten anders durch, was mit fixen Werten eher schlecht widergespiegelt werden kann. Besser wären trainierte Algorithmen, die Gesten trotz auftretender Variationen präziser differenzieren können. Das hätte jedoch den Rahmen dieser Studie gesprengt. Ebenfalls fällt das Debuggen schwerer aus als sonst. Nachdem meine Entwicklungsumgebung (PC) keine passenden Sensoren bereitstellt, muss ich alles auf dem Smartphone testen. Das wiederum bietet mir nicht die Debugging-Tools, die mir standardmäßig am PC zur Verfügung stehen. Diese musste ich nachträglich selber in meiner App implementieren um die Probleme zu lösen.

Darüber hinaus übersteigen die Funktionen die Anzahl der Möglichkeiten, diese in Form von Gesten abzufangen. Eine einfache Lösung ist hierfür eine Gruppierung der Funktionen in verschiedenen Zuständen. Das verbessert die Übersichtlichkeit, steigert aber auch den Komplexitätsgrad bzw. die Lernkurve.

Das nächste Problem ist, dass Nutzer ebenfalls auf die neue Art der Interaktion einsteigen müssen. Für viele ist das ungewohnt und damit zu umständlich. In Situationen, in denen das Ergebnis nicht den Erwartungen entspricht, verfallen die Personen schnell in Panik und versuchen mit Touch-Eingaben das Problem zu lösen. Unweigerlich trägt die ursprüngliche Funktionalität des Touch-Displays beim Smartphone zu diesem Verhalten bei. Lösbar wäre das durch z.B. das Halten des Smartphones über einen gesonderten Griff, der dieses Verhalten damit ausschließt.

Ausblick

Nichts desto trotz denke ich, dass diese Art an Interaktion bei einer häufigeren Umsetzung in verschiedenen Anwendungen eine bessere Akzeptanz erhalten kann. Denn das Potential hierfür ist noch lang nicht ausgeschöpft. Eine pure Steuerung auf Basis von Gesten erscheint mir zwar derzeit als eher schwierig, während jedoch eine ergänzende Rolle für mich durchaus vorstellbar ist. Apps wie Instagram könnten meiner Meinung nach durchaus mit solchen zusätzlichen Funktionen die User-Experience steigern.

Erstellungserklärung