Alternative Bedienkonzepte für Webanwendungen

Die typische Webanwendung wird seit jeher über das Klicken auf Links gesteuert. Und vermutlich hat gerade das zur Popularität des Internets beigetragen, schließlich kann somit jeder ohne große Vorkenntnisse eine Website bedienen. Anders sähe es aus, wenn man Webanwendungen nur mit kryptischen Befehlen steuern könnte, wie beim Arbeiten mit einer Shell. Hier wäre dann wieder Expertenwissen gefragt.

Jedoch ist das Steuern einer Webanwendung mit der Maus auch noch nicht die schnellste Art, um zum Ziel zu gelangen. Je nach Zweck der Seite kann es durchaus Sinn machen sich alternative Möglichkeiten zu überlegen, um die Bedienbarkeit der Anwendung zu erhöhen und diese zu beschleunigen. Einige diese Möglichkeiten möchte ich im folgenden kurz vorstellen.

Shortcuts

Zu den bekannteren, alternativen Bedienungsmöglichkeiten zählt wohl das Navigieren via Shortcuts. Die sind vor allem bei wiederkehrenden Arbeitsabläufen sinnvoll, wie etwa in einem Wiki oder Ticketsystem. Ihr relativ hoher Lernaufwand macht sich nur bei häufiger Verwendung bezahlt, erhöht dann aber die Produktivität drastisch.

Eine sehr gute JavaScript-Bibliothek hierfür ist Mousetrap, die auf GitHub zur Verfügung steht. Mit ihr lassen sich sowohl einzelne Tasten wie auch Tastenkombinationen auf Funktionen registrieren. Dabei kann man auch mehrere Tastenkombinationen für die selbe Funktion nutzen.

So wäre eine Shortcut zum Speichern innerhalb einer Webanwendung mit

Mousetrap.bind(['ctrl+s', 'command+s'], function(e) {
    save();
});

möglich. Hier wird der Bind-Funktion als erstes Argument die Tastenkombination übergeben. Gleichzeitig zu drückende Tasten trennt man mit einem +, jedoch ohne Lehrzeichen. Möchte man verschiedene Tastenkombinationen gleichberechtigt nutzen, wie hier Ctrl + s als Standard, sowie Cmd + s für den geneigten Mac-Anwender, so lassen sie sich als Array übergeben.

Sind die einzelnen Tasten einer Kombination durch ein Leerzeichen getrennt, werden sie als Sequenz interpretiert, müssen also nacheinander aufgerufen werden, um die registrierte Funktion aufzurufen.

Auch Aufrufe mit Shift behandelt Moustrap von Haus aus, so kann man beispielsweise

Mousetrap.bind('%', function() { ... });

mit Shift + 5 ansprechen.

Oft ist es hilfreich, das Weitergeben des Shortcuts an die nächsthöhere Schicht zu verhindern. So verwendet der zuvor genutzte Shortcut zum Speichern den im Browser vorgegebenen Standard, was zu unnötigen Seiteneffekten führen würde. Hier kann man, wie auch bei jQuery, am Ende der Funktion einfach false zurückgeben, um die weitere Behandlung der Keydown Events zu unterbinden. Obiger Code würde dann wie folgt aussehen:

Mousetrap.bind(['ctrl+s', 'command+s'], function(e) {
    save();
    return false;
});

Befehle

GitHub hat vor kurzem eine spannende Navigationsidee implementiert. Bei der Command Bar handelt es sich um ein einfaches Eingabefeld, das – ähnlich wie eine Shell – verschiedene Befehle entgegen nimmt und auf die entsprechende Seite weiterleitet.

An sich funktioniert das ganze recht simpel. Es wird bei der Eingabe ein Ajax-Request ausgelöst und auf Serverseite die Eingabe überprüft. Wenn sie bestimmte Sonderzeichen enthält, wird nur ein bestimmter Typ von Ressource zurückgegeben.

Am besten sieht man dies am @, das für Benutzer als Ressourcen steht, ergo nur noch Benutzer als Vorschlag zurück liefert.

Je nach Ressourcentyp und ausgewählter ID kann man dann mit einer Weiterleitung reagieren. So würde ein @newLoki als Eingabe auf eine User-Ressource mit der ID newLoki weiterleiten. Besonders elegant funktioniert das Ganze unter Verwendung der pushState-Funktion des JavaScript History-Objekts.

Eine Bibliothek gibt es hierzu meines Wissen noch nicht, daher ist steht hier viel Handarbeit einem relativ geringem Nutzen gegenüber.

Ringmenüs

Eine selten anzutreffende Form der Navigation ist das Ringmenü. Durchaus sinnvoll kann das in Vollbild-Applikationen wie einer Fotoanwendung sein, da es wenig Platz wegnimmt und direkt an der Stelle aufgerufen werden kann, an der es der Anwender benötigt. Ebenso denkbar ist diese Form der Interaktion für Aktionen auf 3D-Objekte innerhalb eines Canvas-Elements. Weiterer Vorteil: das Ringmenü ist sowohl per Touch, wie auch per Maus bedienbar, was bei einem klassischen Kontextmenü so nicht unbedingt gegeben ist.

Ein besonders schönes Beispiel für einen gelungenen Einsatzzweck eines Ringmenüs ist das Browser Spiel Die Stämme, in welchem ein Ringmenü auf in der Kartenansicht genutzt wird um Aktionen los zu treten.

Hierfür steht mit Nikeshs Pie-Menu eine ausgezeichnete Bibliothek zur Verfügung, ebenfalls auf GitHub. Aufgrund der simplen Verwendung soll diese hier nicht weiter ausgeführt werden.

Gestensteuerung

Auf mobilen Geräten sind Touchgesten bereits weit verbreitet, programmtechnisch lassen sie sich beispielsweise mit der Hammer.js-Bibliothek realisieren, die verschiedene Events für Multitouchgesten zur Verfügung stellt – darunter auch Transform, also das als Zoom-Geste bekannte Aufziehen von zwei Fingern.

Für Desktopbrowser gibt es bis jetzt noch keine bekannten Beispiele mit Gestensteuerung, auch wenn Mozilla mit Mouse Gesture ein entsprechendes Plug-in zur Verfügung stellt. Mit ihm lassen Gesten sich innerhalb von Firefox und Thunderbird als Alternative zu Shortcuts verwenden.

Wer ähnliche Funktionen in einer Webanwendung ausprobieren möchte, beispielsweise das Verwerfen einer Änderung per Mausbewegung nach Links, bei gedrückter Maustaste, dem sei die JavaScript-Bibliothek Gesture Recognition ans Herz gelegt. Mit ihr können Entwickler verschiedene Figuren (also virtuelle Zeichnungen) registrieren, bei deren Auftreten eine Funktion aufzurufen ist:

var gest = new gestures({
    debug: true,
    draw: false,
    drawColor: "#000000",
    drawWidth: 5,
    autoTrack: true,
    allowRotation: true,
    inverseShape: true,
    points: 33
});

gest.addGesture("Line", [
    {x: 0, y: 0},
    {x: 0, y: 100}
], next());

Nachteil daran ist, dass die Start- und Endpunkte nicht bekannt sind, man also die hier gezeigte Liniengeste nur einmal nutzen kann. In diesem Fall für eine Navigation auf die nächste Seite, anstatt in umgedrehter Reihenfolge auch für die entgegengesetzte Aktion.

Echte Handgesten

Wer sich noch an den Film Minority Report erinnert, dem wird vor allem die Szene mit der Handsteuerung über das Computerinterface im Gedächtnis geblieben sein. Dank der Xbox Kinect rückt das (theoretisch) in greifbare Nähe, wobei hierfür die zusätzliche Hardware in Form einer Kinect notwendig ist.

KinectJS scheint für den Zweck sehr vielversprechend, steht aktuell jedoch nur Windows-Usern zur Verfügung.

Plattformübergreifend (für verschiedene Browser) gibt es das MIT-Projekt DepthJS, das  auf Unix-Systemen, aufgrund der erforderlichen Installation diverser Komponenten, aktuell viel zu aufwendig ist, um damit reale Projekt umsetzen zu können. So wäre zusätzlich der Treiber aus dem OpenNI-Projekt erforderlich, oder auch das Firebrath-Projekt zum Erstellen der benötigten Chrome-Extensions. Darüber hinaus scheint unter Mac OS X aktuell nur das Safari-Plug-in richtig zu funktionieren und an einer Unterstützung für Firefox wird noch gearbeitet.

Ebenfalls über Browser-Plug-ins funktioniert das kommerzielle Zigfu, das sich auf meinem System immerhin ohne Probleme Installieren ließ. Nachteil ist vielleicht der Fokus auf die Unity3D-Engine, die einen in den Browser zu integrierenden Webplayer mitbringt. Daneben bietet Zigfu auch ein JavaScript-API, zu dem es bis auf ein Einstiegstutorial jedoch kaum Dokumentation gibt.

Einen weiteren spannenden Ansatz für Gestenerkennung bieten die Web Gestures mit Hilfe von getUserMedia(), wobei die nativ im Browser zur Verfügung stehen und damit keine weitere Hardware (abgesehen von einer Webcam), benötigen. Implementiert ist das sogenannte Stream-API bisher jedoch nur in Firefox und Chrome, sowie im aktuellsten Opera.

Bis also in einer Webanwendung die Kommunikation per Handgesten möglich ist, scheint noch einige Zeit ins Land zu gehen und Entwickler werden auf herkömmliche Techniken setzen müssen.

Fazit

Webseiten lassen sich heute nicht mehr nur über die klassische Linknavigation nutzen. Es gibt durchaus Alternativen, die – je nach Einsatzzweck – die Nutzererfahrung und die Bedienbarkeit einer Anwendung enorm verbessern können. Hier lohnt sich ein Blick über den Tellerrand hinaus, auch wenn nicht jede Technik schon eine weite Verbreitung hat.

Vielleicht hat Sie dieser Artikel ja dazu angeregt, für ein nächstes Projekt auch alternative Bedienweisen für ihre Webanwendung in Betracht zu ziehen.