Mobile Navigation mit Taps und Gesten statt Maus

Mobile Navigation mit Taps und Gesten

Denis Potschien

Denis Potschien ist seit 2005 freiberuflich als Kommunikationsdesigner tätig, seit Anfang 2010...

Das mobile Internet hat in vielerlei Hinsicht die Gewohnheiten, wann, wie und wo wir das World Wide Web nutzen, stark beeinflusst. So hat sich vor allem die Art und Weise, wie wir durch Websites navigieren, verändert. War die Maus bis vor einigen Jahren maßgeblich für die Navigation verantwortlich, sind es auf Smartphones und Tablets nun Taps und Gesten mit mehr oder weniger Fingerspitzengefühl. Zeitgemäße Websites sollten daher Taps und Gesten deutlich berücksichtigen, wenn es um Benutzeroberflächen und mobile Navigation geht.

Das Problem mit dem Hover

Grundsätzlich funktioniert die Navigation auf einem Smartphone oder Tablet  ohne besonderes Augenmerk auf Taps und Gesten zu setzen. Links werden statt Klick per Tap geöffnet und das Scrollen funktioniert per Wischen über das Display. Doch schon bei Hovereffekten, die im Webdesign gängig und beliebt sind, hat man auf Mobilgeräten so seine Probleme.

Denn ein Hovereffekt – beispielsweise per CSS-Pseudoklasse „:hover“ – existiert auf Mobilgeräten schlicht nicht und wird daher wie das Aufrufen von Links per Tap ausgelöst. Versiehst du also Links mit Hovereffekten, werden Linkaufruf und Hovereffekt auf Mobilgeräten zusammen ausgeführt. Im besten Fall sieht der Besucher den Hovereffekt für kurze Zeit, bis die im Link referenzierte Seite aufgerufen wurde.

hover-navigation
Navigation per Hovereffekt auf Fotolia

Als Webentwickler kannst du natürlich grundsätzlich auf Hovereffekte verzichten, um eine einheitliche Benutzeroberfläche auf Desktop- und Mobilgeräten zu garantieren. Oder du du entscheidest dich dafür, auf Desktop- und Mobilgeräte einen unterschiedlichen Ansatz zu wählen. Ist der Hovereffekt ausschließlich schmückendes Beiwerk, solltest du ihn auf Mobilgeräten einfach weglassen.

Werden Information wie Texte über einen Hovereffekt angezeigt, solltest du auf Mobilgeräten eine Möglichkeit finden, diese so darzustellen, dass sie ohne Hovereffekt sichtbar sind.

Media Query und „pointer“

Zwar gibt es per CSS keine explizite Möglichkeit, zwischen Steuerung per Maus und Touchdisplays zu entscheiden. Aber die „pointer“-Angabe erlaubt dir die Unterscheidung zwischen hoher und begrenzter Genauigkeit beim Zeiger. Bei Geräten mit Touchdisplays gibt „pointer“ den Wert „coarse“ aus, was für eine begrenzte Genauigkeit steht. Bei anderen Geräten wird „fine“ für eine hohe Genauigkeit ausgegeben.

@media (pointer: fine) {
  a:hover p {
    display: block;
  }
}

Im Beispiel wird ein Absatz innerhalb eines Links nur dann per Hover angezeigt, wenn du mit einem Gerät unterwegs bist, welches eine hohe Genauigkeit beim Zeiger aufweist, sie also mit der Maus gesteuert wird. Auf diese Weise hast du ohne Einsatz von JavaScript die Möglichkeit, das Aussehen deiner Website je nach Bedienkonzept – Maus oder Touch – zu steuern.

Kennst du unser E-Book-Bundle? Spare jetzt 6,99 €!

E-Book Bundle von Andreas Hecht

Links und Buttons brauchen Raum

Neben Hovereffekten gibt es noch einen weiteren Aspekt, den du bei der Gestaltung mobiler Benutzeroberflächen berücksichtigen solltest. Das sind die Größe und Abstände von Links und Buttons.

touch-navigation
Beispiel für Menüs mit ausreichender Größe: Google+ und FontShop

Während du mit der Maus recht genau auch kleine Links und Buttons zielsicher erreichst, ist ein Tap per Finger nicht ganz so zielsicher. Daher solltest du vor allem im mobilen Layout auf ausreichend große Elemente achten. Ebenfalls wichtig ist, dass du ausreichend Platz zwischen den einzelnen Elementen lässt. So verhinderst du, dass versehentlich ein falscher Link aufgerufen oder Button ausgewählt wird.

Willst du hier zwischen Desktop- und Mobilansicht unterscheiden, kannst du ebenfalls die „pointer“-Angabe nutzen, um beispielsweise Menüs und Formulare unterschiedlich zu gestalten.

Die Gestaltung solcher Elemente von der Displaybreite eines Gerätes – wie im responsiven Weblayout üblich – abhängig zu machen, ist wenig sinnvoll. Schließlich werden auch Tablets, auf denen in der Regel des Desktoplayout dargestellt wird, per Taps und Gesten gesteuert.

Auf Gesten per JavaScript reagieren

Standardmäßig werden Links und Buttons mit einem einfachen Tap auf Mobilgeräten ausgelöst. Aber du kannst auch auf Gesten reagieren, indem du Touch-Events einsetzt. Diese sind ähnlich aufgebaut wie die bekannten Mouse-Events. So gibt es Ereignisse, die zu Beginn und Ende einer Berührung, sowie während der Bewegung auf dem Display ausgelöst werden.

document.getElementsByTagName("body")[0].addEventListener("touchmove", function(e) {
  console.log(e.touches[0].pageX);
  console.log(e.touches[0].pageY);
}, false);

Im Beispiel löst das Ereignis „touchmove“ eine Funktion aus, welche die Position der Berührung im Browser – „pageX“ und „pageY“ – in die Konsole schreibt. Über „touches[]“ werden im Übrigen alle Berührungen als Array erfasst. Sind also zwei Finger gleichzeitig auf dem Display, stehen dir mit „touches[0]“ „touches[1]“ beide Bewegungen und somit deren Positionen zur Verfügung.

hammerjs_gesten

Von Hammer-JS unterstützte Gesten

Auf diese Weise regierst du auf Wischgesten sowie auf Gesten zum Drehen und zum Vergrößern. Da JavaScript keine konkreten Gesten erkennt, musst du dir diese selbst mit den Touch-Events erstellen oder setzt auf entsprechende Frameworks wie Hammer.JS, welches bekannte Gesten kennt und auf solche mit individuellen Aktionen beziehungsweise Funktion reagieren kann.

Long-Tap ist das „neue“ Hover

Mit Hammer.JS realisierst du auch sogenannte Long-Taps. Dabei bleibt der Finger für eine kurze Zeit auf dem Display. Häufig wird ein solcher Long-Tap eingesetzt, um Kontext- oder Pulldown-Menüs aufzurufen.

Long-Taps haben den Vorteil, dass sie ähnlich wie der Hover-Effekt bei der Maus zwei verschiedene Aktionen für ein Element ermöglichen. So wird auf Desktopgeräten häufig mit der Maus ein Dropdown-Menüs per Hover-Effekt ausgeklappt wird, während der Klick einzelne Menüpunkte aufruft. Per Long-Tap realisierst du auch auf Mobilgeräten die Möglichkeit, ein Dropdown-Menü aufzuklappen, ohne direkt einen Menüpunkt aufzurufen.

Der Long-Tap kann auf Mobilgeräten somit als eine Art Hover-Ersatz genutzt werden. In jedem Fall solltest du berücksichtigen, ob deine Gesten und Taps intuitiv sind und vom Benutzer entsprechend angewendet werden können.

Fazit

Es ist nicht einfach, die gewohnten Bedienkonzepte, die wir mit der Maus kennen, auf Mobilgeräte und Touchdisplays zu übertragen. Allerdings haben sich in den letzten Jahren viele Gesten etabliert – Wisch- und Pinch-Gesten zum Beispiel –, die du in die Navigation deiner Website übernehmen kannst.

Auch der Long-Tap ist als Alternative für den Hovereffekt etabliert. Nichtsdestotrotz bleibt festzuhalten, dass beide Bedienkonzepte – Maus und Touch – ihre Unterschiede haben und diese auch Berücksichtigung finden müssen.

(dpe)

Denis Potschien

Denis Potschien ist seit 2005 freiberuflich als Kommunikationsdesigner tätig, seit Anfang 2010 im Kreativkonsulat in Iserlohn, einem Büro für Gestaltung und Kommunikation. Dort betreut er kleine und mittelständische Unternehmen ebenso wie kommunale Körperschaften und Organisationen aus Südwestfalen und dem Ruhrgebiet. Als Webdesigner und -entwickler gehören HTML5 und CSS3 zu seinen Kernthemen, weshalb er dazu 2013 ein Buch geschrieben hat. „Pure HTML5 und CSS3“ richtet sich an alle, die Vorkenntnisse haben, sich aber bisher mit HTML5 und CSS3 nicht oder nur am Rande beschäftigt haben.

Sortiert nach:   neueste | älteste | beste Bewertung
Sebastian
Gast

Sehr cooler Beitrag! Danke! :)

MFGSparka
Gast

Hat “Long-Tab” nicht schon immer nativ funktioniert. Also auf Android und Win?
Kommt mir so bekannt vor…

wpDiscuz