Mobile Website: Navigationskonzepte

Mathias Nöthiger,
14. Oktober 2014 um 13.22 Uhr,
0 Kommentare

Vertikal, horizontal oder doch lieber Off-Canvas? Wir präsentieren verschiedene Navigationskonzepte für mobile Websites und zeigen ihre Vorteile auf.

Zunehmend werden Websites mit einem responsive Design und Layout ausgestattet, bei dem sich der Inhalt einer Website der Bildschirmgrösse mobiler Geräte anpasst. Damit die Website immer bedienbar bleibt, reagieren auch die Navigationselemente auf die kleineren Bildschirme.

Normales Desktop Layout

In dem meisten Fällen verfügt eine Website auf dem Desktop über eine horizontale Hauptnavigation. Um diese kompakt und dennoch bedienbar zur Verfügung zu stellen, haben sich verschiedene Navigationskonzepte etabliert.

vertikale Navigation

Vertikal – Lösung bei wenigen Navigationspunkten

Ist in der Horizontalen kein Platz für die Hauptnavigationspunkte, können diese einfach vertikal aufgelistet werden. Um sie bequem mit dem Finger zu bedienen, lassen sich die Navigationspunkte als Buttons und etwas grösser ausgegeben.

Diese Darstellung eignet sich vor allem bei wenigen Navigationspunkten und wenn keine Subnavigationspunkte vorhanden sind. Je mehr Navigationspunkte bestehen, desto weiter muss man nach unten scrollen, bis der eigentliche Inhalt beginnt.

Dropdown Navigation

Dropdown-Navigation – platzsparend aber geräteabhängig

Deutlich platzsparender ist die Dropdown-Navigation. Allerdings kann sie Navigationspunkte nur in einer Ebene darstellen. Das heisst, die Subnavigationspunkte werden zwar etwas eingerückt, ansonsten aber komplett ausgegeben.

Die Dropdown-Navigation nutzt das gerätespezifische User Interface. Damit ist gemeint, dass die Darstellung des Auswahlmenüs durch das Gerät gegeben ist und nicht selbst gestaltet werden kann.

Fly-out Navigation

Fly-out-Navigation – Inhaltsübersicht ohne Ladezeiten

Eine Fly-out-Navigation öffnet sich wie die Dropdown Navigation gegen unten, wobei der Seiteninhalt nach unten geschoben wird. Die Fly-out-Navigation lässt sich designtechnisch komplett frei gestalten.

Submenüpunkte können über die Pfeilsymbole auf- und zugeklappt werden, ohne dass der Inhalt der Seite geladen wird und man die Navigation folglich neu öffnen muss. Sind allerdings zahlreiche Navigationspunkte vorhanden, geht die Übersicht verloren. Dies, weil der Inhalt immer weiter nach unten rutscht.

Auf der folgenden Seite kann die Fly-out-Navigation getestet werden. Verkleinere das Fenster deines Browsers, um die Darstellung eines mobilen Gerätes zu simulieren oder teste direkt mit einem mobilen Gerät.

http://jasonweaver.name/lab/flexiblenavigation/

Off Canvas Navigation

Off-Canvas-Navigation

Die Off-Canvas-Navigation ist weit verbreitet. Sie kommt beispielsweise bei der mobilen Version von Facebook zum Einsatz. Im Gegensatz zur Fly-out-Navigation schiebt sich nach dem Klick auf einen Menübutton die Navigation als Panel von links auf den Screen, wobei der Inhalt rechts daneben entweder überdeckt oder nach rechts geschoben wird.

Als Menübutton hat sich das sogenannte «Hamburger»-Symbol etabliert (in der Skizze mit dem roten Pfeil ganz oben markiert).

Dass sich der Inhalt bei der Einblendung ist ein klarer Vorteil, da der User so den Überblick behält. Er kann sich in aller Ruhe die Navigationsstruktur ansehen, ohne die aktuelle Seite verlassen zu müssen. Zudem können im Navigations-Panel auch Menüpunkte der Metanavigation, die Sprachwahl oder die Suche platziert werden.

Das Navigationskonzept selbst testen

Auf der folgenden Seite kann die Off-Canvas Navigation getestet werden. Verkleinere das Fenster deines Desktop-Browsers, um die Darstellung mit kleinerem Bildschirm zu simulieren oder teste direkt mit einem mobilen Gerät: http://www.ensi.ch/

Das Prinzip der Off-Canvas-Navigation wird oft für die rechte Spalte einer Website angewendet, die sich so auf kleineren Bildschirmen von rechts her einblenden lässt. Befinden sich in der rechten Spalte kontextbezogene Inhalte, ist es besser, diese auf der «Höhe des Inhalts» im Panel rechts daneben auszugeben, statt unter dem Hauptinhalt der Website.

Mein Fazit und inspirierende Beispiele

Für kleinere Sites genügt die einfache Dropdown-Navigation. Verfügt eine Seite über zahlreiche Menü- und Submenüpunkte sowie Metanavigationen, ist die Off-Canvas-Navigation die beste Wahl. Inspirierende Beispiele zu den verschiedenen Konzepten gibt es auf http://mediaqueri.es/

Welche Variante bevorzugst du? Gibt es ein Beispiel, das dir besonders gefällt?

Mobile-Serie – schon erschienene Artikel

Übersicht aller Artikel zum Thema mobile Website:

(Artikelbild: Thomas Wojcik bei flickr.com CC by 2.0)

Mathias Nöthiger

Mathias Nöthiger ist Senior Account Manager bei der Blogwerk AG.

Twittern

Schreiben Sie einen Kommentar

Wir sind sehr an einer offenen Diskussion interessiert, behalten uns aber vor, beleidigende Kommentare sowie solche, die offensichtlich zwecks Suchmaschinenoptimierung abgegeben werden, zu editieren oder zu löschen. Mehr dazu in unseren Kommentarregeln.