Touch auf dem Vormarsch
Kommentare

Tappen, flicken, dragen, pinch open, pinch close, touch and hold ­- Touch-Navigation ist spätestens seit dem Smartphone- und Tablet-Boom auf dem besten Weg zum neuen Bedienstandard. Ebenso wie die Schallplatte von der CD oder die VHS-Kassette von DVD abgelöst wurde, darf man also davon ausgehen, dass es nur noch eine Frage der Zeit sein wird, bis die alte Tastatur ausgedient hat. Denn Mobile Devices aller Art verlangen Fingergesten. Annika Brinkmann (www.absichtbar.de, www.mobile-knowledge.de) und Patrick H. Lauke (The Paciello Group) stimmten auf dem Responsive Design Day der IPC Spring 2013 darauf ein, „touchy“ zu werden.

Touch-Navigation für Mobilgeräte hat ihren Ursprung bereits in den 1990ern: Stylus-Geräte, wie der Palm traten auf die Bildfläche. Mit einem kleinen Eingabestift musste dabei munter auf dem Display herumgetippt werden. Die Usability ließ aber noch zu wünschen übrig, wie Annika Brinkmann erklärte: „Man musste sehr filigran arbeiten.“ Heute sind die Herausforderungen hingegen andere: „Es gibt es keinen Stick mehr, aber teilweise recht große Finger.“ Demzufolge gibt es angepasste Design-Richtlinien, die bei Touch zu beachten sind: Links & Co. müssen größer sein, in der mobilen Ansicht muss klar ersichtlich sein, was wo ist. Auch ein ausreichender Zeilenabstand ist zu beachten. Bei kleinen Elementen sollte es einen klickbaren Bereich Drumherum geben. Touch spiegelt sich heute also bereits ganz deutlich im Layout wieder.

Mobile-Design-Regeln im Überblick

Ein geringerer Schwarz-Weiß-Kontrast wirkt zunächst edler, bei Kontrasten muss aber immer auch die Helligkeitseinstellung des Phones, Sonneneinstrahlung etc. einkalkuliert werden. Links sollten sich nicht nur im Grauwert unterscheiden, sondern deutlicher hervorgehoben werden z.B. bold, underlined etc.
Im Satzspiegel möglichst nicht zu viel Platz verschwenden, aber auch von Zweispaltigkeit kann Brinkmann nur „dringend abraten“.
Es gibt ca. 13 verschiedene Linkarten, wie etwa Anschlusslinks, Breadcrumbs, Links auf die Hauptkategorie usw., die jeweils unterschiedlich gestaltet und ausgewiesen werden sollten z.B. mit Pfeilen oder Icons.
Buttons sollten in optische und technische unterschieden werden. Brinkmann rät: „Nicht jeder Link sollte wie ein Button aussehen, besser gezielt einsetzen.“ Bei umfangreichen Klappmenüs, so Brinkmann, eine „Waschbrett-Optik“ vermeiden, und Menüs lieber auf- und zuklappbar umsetzen.
Was das Layout insgesamt betrifft, ist man besser beraten ein etwas langweiligeres Konzept zu erstellen, dass aber auf vielen Geräten funktioniert.

Soweit also zu den Design-Ratschlägen für Touch-Geräte. Was aber, wenn ich eine Webseite habe, die gar nicht auf Touch ausgelegt ist. Patrick H. Lauke zeigte, wie man mit diversen Kniffen Websites Touch-Device-kompatibel machen kann. Mobile Browser sind generell darauf ausgerichtet, Webseiten so gut wie möglich auf Handys und Tablets darzustellen und via Touch bedienbar zu machen. Dazu simulieren sie auf Touch-Geräten die meisten bekannten Maus-Events (mouseover, mousemove, mousedown, mouseup). Wenn man also den Touchscreen berührt, feuert der Browser eine Reihe an Events, die gewährleisten, dass mausorientierte Scripts fast originalgetreu via Touch ausgeführt werden.
Aber diese Event-Emulation im Browser hat auch Nachteile: Verspäteter Event Dispatch, Mouse-spezifische Interfaces und nicht-trackender Mousemove.

Browser bieten daher auf touch-fähigen Geräten neben der Maus-Emulation eine Reihe an Touch-Events. Ursprünglich für Apples Safari-Browser eingeführt, wurden sie inzwischen offiziell von W3C standardisiert.
Diese Touch-Events sind: touchstart, touchmove, touchend, touchcancel. Die ersten drei Events sind dabei die Touch-Alternativen zu den Maus-Events mousedown, mousemove und mouseup. touchcancel gibt an, dass eine Touch-Interaktion abgebrochen wurde .

Zuerst werden die touch-spezifischen Events abgefeuert: touchstart, mindestens ein touchmove und touchend. Danach werden die simulierten Maus-Events abgesandt.
Im Gegensatz zu Mausclicks ist auf Touch-Geräten eine Berührung des Bildschirms nicht unbedingt gleich ein click.  Der Browser „wartet“ also erst einmal, um die Art der Berührung zu erkennen – es kommt zu einer Verzögerung nach der die entsprechenden Maus- und Click-Events ausgelöst werden. Im Gegensatz dazu werden Touch-Events ausgelöst, sobald der User den Screen berührt. Die Reaktionszeit des Scripts lässt sich reduzieren, indem das JavaScript ebenso auf touchstart wie auf click reagiert.

Am Beispiel eines Maus Trackers, der in einen einfachen und einen Multi-Touch Tracker umgewandelt wird, zeigte Lauke die Modifikation der Listener-Funktion, so dass sie sowohl auf Mouse- als auch auf Touch-Events reagiert. So funktioniert der Tracker schon mal bei Single Touches. Um nun sogar das Multi-Touch Tracking zu erreichen, wird anstatt nur eines Koordinatenpaares gleich ein Array an Punkten gespeichert und wie in einer Schleife durchlaufen. Die Demo hat Patrick Lauke auch auf GitHub bereitgestellt.

Touch-Events ermöglichen es also relativ einfach, Webseiten und Applikationen auf Touchscreens bedienbar zu machen. Steht der Navigationsform Touch ja eigentlich wirklich nichts mehr im Wege, also folgen wir doch Patrick H. Laukes und Annika Brinkmanns Ruf: Let’s get touchy!

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -