Mobile Anwendungen für das Smartphone werden durch spezifische Gesten auf einem Multitouch-Display bedient. So wird es dem Benutzer ermöglicht, virtuelle Elemente direkt auf dem Display seines Smartphones zu berühren und zu manipulieren, ohne die Notwendigkeit externer Eingabegeräte wie Maus, Tastatur oder ähnlichem. Laut dem Material Design der Firma Google gibt es drei Arten von Gesten. Dazu zählen Navigationsgesten sowie sogenannte Aktions- und Verwandlungsgesten. Navigationsgesten dienen dem Benutzer dazu, sich durch eine Anwendung zu bewegen und umfassen unter anderem Navigationskomponenten wie den Navigation Drawer oder Schaltflächen wie Buttons, welche auf verschiedene Gesten reagieren. Als Aktionsgesten werden Gesten bezeichnet, die bestimmte Aktionen auslösen. Ein langer Klick auf ein Listenelement kann beispielsweise das Element auswählen. Als Verwandlungsgesten werden Gesten bezeichnet, mit denen die Größe, Position oder Rotation eines Elements verändert werden kann. Ein Beispiel für diese Art von Gesten ist das Hinein- und Hinauszoomen. Diese Geste entsteht durch ein auf- oder zuziehen von zwei Fingern, welche auf ein bestimmtes Element auf dem Bildschirm gelegt und zusammen oder auseinander gezogen werden. Diese Geste vergrößert oder verkleinert das ausgewählte Element.

In meiner Masterarbeit widme ich mich drei ausgewählten Navigationsgesten – dem Swipe, dem Touch und dem Scrollen durch eine Liste. Diese Gesten wurden gewählt, da heutzutage keine Anwendung ohne diese auskommt. Diese Gesten teste ich in drei Interaktionsszenarien, welche in speziell für diese Arbeit entwickelten Anwendungen ausgeführt werden. Als Entwicklungsplattformen wurden einerseits die nativen Plattformen für Android und iOS gewählt und zusätzlich wurden die Anwendungen noch mit den drei plattformübergreifenden Ansätzen ReactNative, Flutter und Ionic umgesetzt. Dabei zählt ReactNative zum interpretierten, Flutter zum cross-kompilierten und Ionic zum hybriden Entwicklungsansatz nach Biørn-Hansen et al.

Interaktionsszenario: Öffnen und Schließen des Navigation Drawers

Viele Anwendungen benutzen den sogenannten Navigation Drawer um das Menü der Anwendungen anzuzeigen. Diese „Schublade“ kann mit einem Swipe vom linken Bildschirmrand zur Mitte hin geöffnet werden. Geschlossen wird der Drawer mit einem Touch außerhalb des Drawers.

Interaktionsszenario: Navigation zwischen zwei Bildschirmen

Die meisten Anwendungen bestehen aus mehr als nur einen einzigen Bildschirm, daher gehören Bildschirmübergänge zu den grundlegenden User Interface-Interaktionen. Dieser Übergang wurde in der Testanwendung mittels eines Buttons, welcher nach einem Touch zum nächsten Bildschirm führt, implementiert. Auf dem zweiten Bildschirm befindet sich ein Button, welcher wiederum zum vorherigen Bildschirm führt. Auf diese Weise kann zwischen den beiden Bildschirmen hin und her gewechselt werden.

Interaktionsszenario: Scrollen durch eine Liste

Auch das Scrollen durch eine Liste ist eine sehr häufig verwendete Komponente bei mobilen Anwendungen. Dies begründet sich vor allem darauf, dass Smartphones auf Grund des relativ kleinen Bildschirms nur begrenzten Platz zur Darstellung des Inhalts zur Verfügung haben. So kann immer nur ein Teil einer Liste sichtbar auf dem Bildschirm dargestellt werden. Die nicht sichtbaren Listenbeiträge, welche sich unter dem angezeigten Teil befinden, müssen nicht bearbeitet und gerendert werden. Beim Scrollen nach oben oder unten werden zur Laufzeit die Listeneinträge erzeugt und gerendert. In der Testanwendung werden 1000 Listeneinträge mit dem Aufbau „Person“ + Anzahl beim Start der Anwendung generiert und im Speicher abgelegt.

Bei jeder Interaktionsgeste wird seperat die CPU- und RAM-Auslastung während der Durchführung gemessen. Alle drei Interaktionsszenarien werden mittels vollautomatischen User Interface Testfällen durchgeführt. Die Implementierung und eine detailierte Beschreibung wird im nächsten Blogpost vorgestellt.