Die Navigation und ihre anwenderfreundliche Gestaltung sind unerlässlich, um dem Benutzer eine übersichtliche Webseite zu präsentieren. Längst wurde durch das Responsive Webdesign eine Reihe von neuen Navigationsmustern entwickelt, die bisherige Standards in der Gestaltung abgelöst haben und nicht nur bei mobilen Websites, sondern auch vermehrt auf dem Desktop zum Einsatz kommen. Diese Entwicklung bringt einige neue Gestaltungsvarianten mobiler Navigationen mit sich, die im Folgenden einmal näher vorgestellt werden.
Dropdown-Menü mit OS-Picker
Die einfache Lösung.
Ausreichend Platz und lediglich minimaler JavaScript-Bedarf – mit einem Dropdown-Menü lassen sich zahlreiche Seiten und Kategorien unkompliziert in der Kopfzeile positionieren. Das Betriebssystem regelt die Ausgabe, sodass keine Gestaltung für den Dropdown-Inhalt erforderlich ist. Allerdings wird das Menü durch zu viele Einträge schnell unübersichtlich.
Die Toggled-Navigation
Der Klassiker unter den mobilen Navigationsarten.
Kaum eine mobile Webseite kommt ohne die Toggled-Navigation aus, denn diese klassische Navigationsart, bei der ebenfalls eine Leiste im oberen Website-Bereich platziert wird, zählt zu den häufigsten Gestaltungsvarianten. Betätigt der Benutzer das Button-Element, wird die Navigation ausgefahren und die Webseite um die entsprechend benötigte Länge erweitert. Im Unterschied zum Dropdown-Menü erfolgt zur Einblendung der Navigation also keine Überlappung durch eine zweite Ebene, sondern eine Verlängerung der Seite.
Multi-Toggle
Bei komplexen Menüstrukturen bietet sich Multi-Toggle an.
Sollen mehrschichtige und äußerst komplexe Navigationen platziert werden, ohne zu viel Raum einzunehmen, dann fällt die Wahl häufig auf ein Multi-Toggle-Menü. Diese Gestaltungsvariante umfasst eine Hauptkategorie, die sich durch Antippen in eine beliebige Anzahl von Unterkategorien auffächert. Während Benutzer von einer schnelleren Zielführung profitieren, können Webworker das Pattern zum Multi-Level-Dropdown-Menü ausbauen und um endlos viele Ebenen erweitern. Eine überschwänglich gestaltete Kategorisierung kann allerdings zu einer unübersichtlichen Navigationsstruktur führen, die Benutzer beim Surfen schnell frustriert.
Slide Navigation
Optisch ansprechend, aber mit hohem Aufwand
Technisch vergleichsweise aufwendig umzusetzen, aber detailliert und durchaus übersichtlich – die Slide Navigation ordnet Navigationselemente nicht untereinander an, sondern splittet Kategorien auf mehreren Ebenen auf. Die Unterpunkte der Navigation werden durch einen Swipe oder weitere Bedienelemente geöffnet. Somit präsentiert sich dieses Pattern mit hoher Detailtiefe und Übersichtlichkeit, aber einhergehend mit einem höheren technischen Aufwand. Als Beispiel sei der Navigations-Balken von Apple genannt, der durch einen Swipe bedient werden kann und nur bei großen Screens komplett sichtbar bleibt.
Mega Dropdown
Die schicke, aber wenig platzsparende Lösung.
Als Toggled-Navigation in abgewandelter Form zeigt sich das Mega-Dropdown-Menü, bei dem nicht nur Textlinks, sondern auch Bilder und/oder Icons verwendet werden können. Diese nehmen im Vergleich zur herkömmlichen Toggled-Navigation zwar mehr Platz auf der Fläche ein, wirken aber auch optisch ansprechender.
Off-Canvas Flyout
Übersichtlich und genügend Platz.
Von einer großen Gestaltungsfreiheit und reichlich Platz für Elemente profitieren Designer bei einem Off-Canvas-Pattern, das erst durch die Bedienung eines Buttons ausgefahren und damit auf dem Screen sichtbar wird. Die Navigation ist außerhalb des Displays positioniert und erscheint nach dem Ausfahren auf einer zweiten Ebene über dem Content oder verschiebt diesen um den benötigten Platz. Durch diese Navigationsart wird die Orientierung nicht beeinträchtigt und es kann eine Vielzahl an Elementen untergebracht werden.
Fazit: Responsive Webdesign hat vielfältige Gestaltungsmöglichkeiten eröffnet, aber Webworker auch vor neue Herausforderungen gestellt. Websites sollten sich nun komplett an die verschiedenen Screengrößen der mobilen Devices anpassen. Dies ist bei den meisten der vorgestellten Navigationsarten zwar nicht mehr der Fall, aber dennoch nur selten von Nachteil für den Benutzer. Ohne die technisch bedingten Einschränkungen im Responsive Webdesign können Designer ihrer Kreativität wieder mehr Freiraum lassen.
Quelle: t3n
