Spaces. Smartes Cloud Hosting für anspruchsvolle Webprojekte. Loslegen und Spaces testen. Von Mittwald.
Denis Potschien 26. Juli 2016

Mobile Navigation mit Taps und Gesten statt Maus

Mobile Navigation mit Taps und Gesten

Das mobi­le Internet hat in vie­ler­lei Hinsicht die Gewohnheiten, wann, wie und wo wir das World Wide Web nut­zen, stark beein­flusst. So hat sich vor allem die Art und Weise, wie wir durch Websites navi­gie­ren, ver­än­dert. War die Maus bis vor eini­gen Jahren maß­geb­lich für die Navigation ver­ant­wort­lich, sind es auf Smartphones und Tablets nun Taps und Gesten mit mehr oder weni­ger Fingerspitzengefühl. Zeitgemäße Websites soll­ten daher Taps und Gesten deut­lich berück­sich­ti­gen, wenn es um Benutzeroberflächen und mobi­le Navigation geht.

Das Problem mit dem Hover

Grundsätzlich funk­tio­niert die Navigation auf einem Smartphone oder Tablet  ohne beson­de­res Augenmerk auf Taps und Gesten zu set­zen. Links wer­den statt Klick per Tap geöff­net und das Scrollen funk­tio­niert per Wischen über das Display. Doch schon bei Hovereffekten, die im Webdesign gän­gig und beliebt sind, hat man auf Mobilgeräten so sei­ne Probleme.

Denn ein Hovereffekt – bei­spiels­wei­se per CSS-Pseudoklasse „:hover“ – exis­tiert auf Mobilgeräten schlicht nicht und wird daher wie das Aufrufen von Links per Tap aus­ge­löst. Versiehst du also Links mit Hovereffekten, wer­den Linkaufruf und Hovereffekt auf Mobilgeräten zusam­men aus­ge­führt. Im bes­ten Fall sieht der Besucher den Hovereffekt für kur­ze Zeit, bis die im Link refe­ren­zier­te Seite auf­ge­ru­fen wur­de.

hover-navigation
Navigation per Hovereffekt auf Fotolia

Als Webentwickler kannst du natür­lich grund­sätz­lich auf Hovereffekte ver­zich­ten, um eine ein­heit­li­che Benutzeroberfläche auf Desktop- und Mobilgeräten zu garan­tie­ren. Oder du du ent­schei­dest dich dafür, auf Desktop- und Mobilgeräte einen unter­schied­li­chen Ansatz zu wäh­len. Ist der Hovereffekt aus­schließ­lich schmü­cken­des Beiwerk, soll­test du ihn auf Mobilgeräten ein­fach weg­las­sen.

Werden Information wie Texte über einen Hovereffekt ange­zeigt, soll­test du auf Mobilgeräten eine Möglichkeit fin­den, die­se so dar­zu­stel­len, dass sie ohne Hovereffekt sicht­bar sind.

Media Query und „pointer“

Zwar gibt es per CSS kei­ne expli­zi­te Möglichkeit, zwi­schen Steuerung per Maus und Touchdisplays zu ent­schei­den. Aber die „pointer“-Angabe erlaubt dir die Unterscheidung zwi­schen hoher und begrenz­ter Genauigkeit beim Zeiger. Bei Geräten mit Touchdisplays gibt „poin­ter“ den Wert „coar­se“ aus, was für eine begrenz­te Genauigkeit steht. Bei ande­ren Geräten wird „fine“ für eine hohe Genauigkeit aus­ge­ge­ben.

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

Im Beispiel wird ein Absatz inner­halb eines Links nur dann per Hover ange­zeigt, wenn du mit einem Gerät unter­wegs bist, wel­ches eine hohe Genauigkeit beim Zeiger auf­weist, sie also mit der Maus gesteu­ert wird. Auf die­se Weise hast du ohne Einsatz von JavaScript die Möglichkeit, das Aussehen dei­ner Website je nach Bedienkonzept – Maus oder Touch – zu steu­ern.

Links und Buttons brauchen Raum

Neben Hovereffekten gibt es noch einen wei­te­ren Aspekt, den du bei der Gestaltung mobi­ler Benutzeroberflächen berück­sich­ti­gen soll­test. Das sind die Größe und Abstände von Links und Buttons.

touch-navigation
Beispiel für Menüs mit aus­rei­chen­der Größe: Google+ und FontShop

Während du mit der Maus recht genau auch klei­ne Links und Buttons ziel­si­cher erreichst, ist ein Tap per Finger nicht ganz so ziel­si­cher. Daher soll­test du vor allem im mobi­len Layout auf aus­rei­chend gro­ße Elemente ach­ten. Ebenfalls wich­tig ist, dass du aus­rei­chend Platz zwi­schen den ein­zel­nen Elementen lässt. So ver­hin­derst du, dass ver­se­hent­lich ein fal­scher Link auf­ge­ru­fen oder Button aus­ge­wählt wird.

Willst du hier zwi­schen Desktop- und Mobilansicht unter­schei­den, kannst du eben­falls die „pointer“-Angabe nut­zen, um bei­spiels­wei­se Menüs und Formulare unter­schied­lich zu gestal­ten.

Die Gestaltung sol­cher Elemente von der Displaybreite eines Gerätes – wie im respon­si­ven Weblayout üblich – abhän­gig zu machen, ist wenig sinn­voll. Schließlich wer­den auch Tablets, auf denen in der Regel des Desktoplayout dar­ge­stellt wird, per Taps und Gesten gesteu­ert.

Auf Gesten per JavaScript reagieren

Standardmäßig wer­den Links und Buttons mit einem ein­fa­chen Tap auf Mobilgeräten aus­ge­löst. Aber du kannst auch auf Gesten reagie­ren, indem du Touch-Events ein­setzt. Diese sind ähn­lich auf­ge­baut wie die bekann­ten Mouse-Events. So gibt es Ereignisse, die zu Beginn und Ende einer Berührung, sowie wäh­rend der Bewegung auf dem Display aus­ge­löst wer­den.

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 „touch­mo­ve“ eine Funktion aus, wel­che die Position der Berührung im Browser – „pageX“ und „pageY“ – in die Konsole schreibt. Über „tou­ches[]“ wer­den im Übrigen alle Berührungen als Array erfasst. Sind also zwei Finger gleich­zei­tig auf dem Display, ste­hen dir mit „touches[0]“ „touches[1]“ bei­de Bewegungen und somit deren Positionen zur Verfügung.

hammerjs_gesten

Von Hammer-JS unter­stütz­te Gesten

Auf die­se Weise regierst du auf Wischgesten sowie auf Gesten zum Drehen und zum Vergrößern. Da JavaScript kei­ne kon­kre­ten Gesten erkennt, musst du dir die­se selbst mit den Touch-Events erstel­len oder setzt auf ent­spre­chen­de Frameworks wie Hammer.JS, wel­ches bekann­te Gesten kennt und auf sol­che mit indi­vi­du­el­len Aktionen bezie­hungs­wei­se Funktion reagie­ren kann.

Long-Tap ist das „neue“ Hover

Mit Hammer.JS rea­li­sierst du auch soge­nann­te Long-Taps. Dabei bleibt der Finger für eine kur­ze Zeit auf dem Display. Häufig wird ein sol­cher Long-Tap ein­ge­setzt, um Kontext- oder Pulldown-Menüs auf­zu­ru­fen.

Long-Taps haben den Vorteil, dass sie ähn­lich wie der Hover-Effekt bei der Maus zwei ver­schie­de­ne Aktionen für ein Element ermög­li­chen. So wird auf Desktopgeräten häu­fig mit der Maus ein Dropdown-Menüs per Hover-Effekt aus­ge­klappt wird, wäh­rend der Klick ein­zel­ne Menüpunkte auf­ruft. Per Long-Tap rea­li­sierst du auch auf Mobilgeräten die Möglichkeit, ein Dropdown-Menü auf­zu­klap­pen, ohne direkt einen Menüpunkt auf­zu­ru­fen.

Der Long-Tap kann auf Mobilgeräten somit als eine Art Hover-Ersatz genutzt wer­den. In jedem Fall soll­test du berück­sich­ti­gen, ob dei­ne Gesten und Taps intui­tiv sind und vom Benutzer ent­spre­chend ange­wen­det wer­den kön­nen.

Fazit

Es ist nicht ein­fach, die gewohn­ten Bedienkonzepte, die wir mit der Maus ken­nen, auf Mobilgeräte und Touchdisplays zu über­tra­gen. Allerdings haben sich in den letz­ten Jahren vie­le Gesten eta­bliert – Wisch- und Pinch-Gesten zum Beispiel –, die du in die Navigation dei­ner Website über­neh­men kannst.

Auch der Long-Tap ist als Alternative für den Hovereffekt eta­bliert. Nichtsdestotrotz bleibt fest­zu­hal­ten, dass bei­de Bedienkonzepte – Maus und Touch – ihre Unterschiede haben und die­se auch Berücksichtigung fin­den müs­sen.

(dpe)

Denis Potschien

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.

2 Kommentare

  1. Hat “Long-Tab” nicht schon immer nativ funk­tio­niert. Also auf Android und Win?
    Kommt mir so bekannt vor…

  2. Sehr coo­ler Beitrag! Danke! :)

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.