Navigationsvarianten im mobile Web

Content ist King, aber ohne geeignete Navigation findet der User schlimmstenfalls den guten und wichtigen Content nicht. Gerade im Responsive Webdesign bzw. im mobile Web stellen, aufgrund des geringeren Platzes, Navigationen eine Besondere Herausforderung dar. Es gilt, die wichtige Navigation prominent genug zu platzieren, und dabei darauf zu achten, dass diese nicht zu viel Platz im Viewport einnimmt und den eigentlichen Content verdrängt.

In Anlehnung an meinen Vortrag u.a. auf dem Barcamp Kiel, in dem ich auch wesentlich auf das Thema Navigation eingegangen bin, möchte ich hier verschiedene Navigationsmöglichkeiten im Responsive Webdesign darstellen. Um die Beispiele zu veranschaulichen, nehme ich ein kleines Responsive Webdesign Testprojekt, wobei es hier mehr um das eigentliche Navigationskonzept, als um eine saubere Programmierung geht. Die hier aufgeführten Beispiele sind aus Zeitgründen “Quick & Dirty” erstellt und dienen nur der Veranschaulichung :-)

Ich gehe jeweils von einer klassischen horizontalen Navigation aus!

Navivariante 1: Reduzierung und einfaches “umstylen” des Menüs

In dieser Variante werden die Navigationspunkte von einer horizontalen in eine vertikale Darstellung geändert. Zudem werden – in Hinblick auf die Nutzung von Touchscreens auf z.B. Smartphone – die “sensitiven Bereiche” vergrößert, so dass ein “Fehlklick” mit dem Finger möglichst vermieden wird. In diesem Fall wurde das Menü auf wesentliche Punkte reduziert – so wurde z.B. der Home-Button entfernt (display:none).

Navigation vertikal iPhone

Sollte es in der Navi viele Menüpunkt geben, so wird es bei dieser Variante schnell ein Platzproblem geben. Es sollte darauf geachtet werden, dass die Navi auf kleinen Geräten nicht zu viel Platz vom Viewport einnimmt! Im obigen Screenshot (Viewport des iPhone)  ist vom Content schon nicht mehr viel zu sehen.

Navivariante 2: Select-Menü

In dieser Variante wird die Navigation von einer Listen-basierten (<li>) Darstellung in ein Select-Menü umgestellt. Da wir beim Responsive Webdesign zunächst immer auf den gleichen Quelltext zurückgreifen müssen, ist hier eine Anpassung über Javascript notwendig.

Navigation iPhone Select

Eine sehr einfache und schnelle Lösung für diesen Ansatz bietet z.B. das kleine jQuery-basierte Skript tinynav.js von Viljami Salminen.

Klarer Nachteil dieser Variante ist die Abhängigkeit von Javascript, jedoch spart man bei dieser Lösung sehr viel Platz für den eigentlichen Content ein!

Navivariante 3: Versteckte Navigation

Eine häufig genutzte Variante ist das Verstecken der Navigation, die durch einen Klick auf ein Icon “aufgeklappt” wird. Als Icon werden oft 3 untereinander stehende horizontale Striche eingesetzt.

Diese Variante spart sehr viel Platz ein, da die Navigation erst bei Bedarf eingeblendet wird, setzt aber auch voraus, dass auch der nicht tägliche Internetnutzer das Icon versteht. Widerspricht dem Usability-Grundgedanken “Don’t make me think”, scheint sich aber immer mehr zu verbreiten. In den meisten Fällen finde ich diese Variante am sinnvollsten.

Eine weitere Variante der “versteckten Navigation” wurdel ursprünglich eher in Apps genutzt:

In diesem Fall schiebt sich die eigentliche Website nach rechts aus dem Screen raus und eröffnet so einen sehr großen Bereich für die Navigation. Über das Icon (hier wieder 3 Striche) kann die Navigation aus- und eingeklappt werden. Auch hier wird durch das Verstecken der Navi wieder viel Platz auf kleinen Devices gespart.

Navigationsvariante 4: eigene Seite für Navigation

Nicht selten wird auf mobilen Websites (gerade beim Einsatz von jQuery mobile) eine eigene Seite für die Navigation genutzt. Folgt der User einem Menüpunkt, kann er über einen integrierten Zurück-Button wieder auf die “Navigationsseite” (oftmal die Startseite) zurückspringen.

Etwas unglücklich ist dieser Variante aus meiner Sicht, wenn der User z.B. über Suchmaschinen direkt auf eine Unterseite gelangt. In diesem Fall ist das “Zurück” für den User nicht zu verstehen, da er noch nicht “gelernt” hat, was sich  hinter dem “zurück”-Button befindet und er das Navigationskomzept noch nicht “kennengelernt” hat.

Auch für das Responsive Webdesign bietet sich diese Lösung nicht an!

Welche Varianten nutzt Ihr im Responsive Webdesign / mobile Web?