Navigationsmuster: Priority+ oder Tableiste?
Navigationskonzepte für mobile Geräte stehen ganz im Zeichen der Ökonomie. Meist heißt es Platz sparen, um alle Inhalte auf dem kleinen Screen unterzubringen.
In Zeiten von Responsive Design muss eine zeitgemäße Webseite vor allem flexibel sein, um sich den unterschiedlichen Gerätegrößen anzupassen. Gleichzeitig darf die Usability nicht leiden. Insbesondere das Navigationskonzept stellt in diesem Gestaltungsprozess eine der größten Herausforderungen dar.
Für die Navigation stehen unterschiedliche Musterlösungen zur Verfügung. Im folgenden erläutern wir fünf gängige Navigationsmuster, die sich gerade auf mobilen Screens auch kombinieren lassen.
1. Tab Leiste
Die beliebte mobile first Lösung am unteren (oder oberen) Ende des Bildschirms bietet Platz für vier bis fünf Icons plus Beschriftung. Vorzugsqweise nuzt man diese für die wichtigsten Menüpunkte, sekundäre Inhalte sind hinter einem ergänzenden Hamburger Icon gut aufgehoben.
2. Priority+ Menu
In diesem Fall wird die Navigation horizontal aufgebaut. Wie der Name anzeigt, priorisiert diese Lösung Inhalte, so dass die wichtigen Navigationspunkte immer angezeigt werden, während die weniger wichtigen beispielsweise in einer zweiten Zeile aufklappen. Manche Gestalter handeln Priority+ bereits als Nachfolger des Burger-Menus.
3. Slider-Menu
Diese Navigation wird in einer vertikalen Liste versteckt und kann über einen Button (oftmals ein Burger-Icon) geöffnet werden. Diese Art der mobilen Navigation wird mittlerweile auch auf großen Displays eingesetzt, sie ist platzsparend und durch Apps wie Google oder Facebook bekannt und gelernt. Mehr als drei Navigationsebenen lassen sich allerdings nicht benutzerfreundlich abbilden.
4. Scrollbare Navigation
Um viele Navigationspunkte auf einem kleinen Bildschirm unterzubringen, kann man die horizontale Leiste auch um eine Scrollfunktion erweitern. Je mehr Navigationspunkte man hat, desto unübersichtlicher wird dieses Modell allerdings.
5. Mega-Menu
Für Webseiten mit umfangreicher und tiefer Sitemap ist in der Desktop-Darstellung häufig ein Mega-Menu die Lösung, bei dem sich hinter jedem Menüpunkt mehrere Unterpunkte befinden. Auf kleinen Displays kann man ein solches Mega-Menu in ein Drill-Down-Menu überführen, dass per Klick tiefere Ebenen anzeigt.
Mehr zum Thema »Navigationskonzepte« erfahren Sie in PAGE 07.2017 im PAGE-Shop!
Das könnte dich auch interessieren
