Responsive Navigation: Dynamische Menüs fürs mobile Surfen

Responsive Webdesign gehört mittlerweile zu den Standards in der Gestaltung von Websites – egal, ob bei der Umsetzung von Onlineshops, News-Blogs oder Unternehmensprofilen. Denn die potenziellen Kunden surfen nicht mehr nur wie gewohnt mit Desktop-Rechner oder Laptop, sondern vermehrt über mobile Endgeräte wie Smartphones und Tablets. Das ist nichts Neues, sondern kündigt sich seit Jahren durch steigende Zahlen beim Absatz von mobilen Endgeräten und der Nutzung von mobilem Internet an. Dass eine Optimierung für mobile Endgeräte zum Standard-Repertoire für den Erfolg im Online-Business gehört, haben wir bereits in unserem Artikel zum Thema "Webdesign Benutzerfreundlichkeit" erläutert.

Fest steht: In einer digitalen Welt, die zunehmend mobil wird, setzt sich nur durch, wer seinen Usern geräteübergreifend die maximale Usability bietet. Einer der Hauptaspekte der mobilen Optimierung ist eine entsprechend responsive Navigation.

Die mobile Navigation stellt eine besondere Herausforderung an den Webdesigner dar: Das Nutzerverhalten auf kleinen Touch-Displays ist kaum zu vergleichen mit dem auf großen Bildschirmen, auf denen zudem der Mauszeiger die Navigation erleichtert. Um das Nutzererlebnis auf mobilen Endgeräten mindestens genauso reibungslos und zufriedenstellend zu gestalten, sollte man sich bei der Entwicklung seiner mobilen Website viel Zeit für die Umsetzung einer responsiven Navigation nehmen. Denn ebenso, wie sich das Nutzerverhalten ändert, haben sich auch die Nutzererwartungen gewandelt: Der Nutzer und damit potenzielle Kunde ist ungeduldiger. Bringt ihn die mobile Navigation nicht reibungslos von A nach B, wird eine Seite viel schneller weggeklickt – und dem Unternehme geht Traffic und vor allem Umsatz flöten.

Eine gute Navigation ist Dreh- und Angelpunkt einer Website, denn über sie muss der Nutzer die für ihn relevanten Infos finden. Die Bedienelemente sollten reibungslos funktionieren, der Aufbau leicht verständlich und selbsterklärend sein und eine intuitive Bedingung ermöglichen. Die besonderen Herausforderungen der responsiven Navigation sind vor allem der Platzmangel und das Touch-Prinzip als Eingabemethode auf mobilen Endgeräten. Doch es gibt einige responsive Lösungen, die dennoch eine übersichtliche und nutzerfreundliche Website-Navigation ermöglichen.

Der Grundgedanke hinter responsivem Design ist, dass Inhalt und Design einer Seite sich dynamisch an die jeweiligen Bedingungen bzw. die jeweilige Größe des Endgerätes anpassen. Das gleiche gilt natürlich für die responsive Navigation.

Meist bietet es sich an, die Seiten nach dem „Mobile First“-Ansatz zu erstellen. Das Gestaltungskonzept stellt die mobile Optimierung von Webprojekten in den Vordergrund – Gestaltung, Usability und Performance der mobilen Version kommen an erster Stelle, erst im zweiten Schritt folgt die Anpassung an Desktop- und Laptop-Darstellung. Eine bestehende Website-Navigation auf ein mobiles Gerät umzupolen, ist oft schwieriger und aufwendiger, das Ergebnis für den mobilen Nutzer meist nicht zufriedenstellend.

Bevor man mit der Planung und Umsetzung seiner responsiven Navigation beginnt, gilt es allerdings noch, einige grundsätzliche Fragen zu beantworten. Die erste Entscheidung, die ansteht, ist die für die Position auf der Seite.

Die gängigsten Modelle sind die Footer-Navigation und die Darstellung am Seitenanfang. Bei der Footer-Navigation findet der Nutzer am Anfang der mobilen Seite lediglich den Verweis auf die Navigation, der direkt zum Footer führt – dort sind dann die einzelnen Menüpunkte untergebracht.

Navigationen, die im Footer untergebracht sind, sind nicht immer nutzerfreundlich – im Gegenteil führt die Platzierung manchmal zu Verwirrung beim Nutzer. Dafür liegt der Fokus auf dem Inhalt der Startseite, was je nach Ziel der Website von großem Vorteil ist. Häufiger als im Footer findet man die mobile Navigation am Seitenanfang. Diese klassische Umsetzung der Navigation für responsive Designs ist den meisten Nutzern vertraut

Bei beiden Varianten kann man zusätzlich ein- und ausblendbare Unterpunkte einfügen.

Wir kommen nun zur zentralen Frage: Wie öffnet sich die mobile Navigation? Die Art und Weise, wie dem Nutzer die Navigation präsentiert wird, bestimmt das Konzept. Die Darstellungsoptionen sind vielfältig: Die Navigation liegt entweder direkt im Sichtfeld oder wird erst bei Klick geöffnet, sie verdrängt entweder den Inhalt oder legt sich über ihn – wir haben einige Beispiele gesammelt.

Welches Navigationskonzept das richtige für ein Webprojekt ist, hängt von vielen Faktoren ab. Fest steht: eine Einheitslösung gibt es nicht. Die vorgestellten Navigationskonzepte stellen einen guten Anhaltspunkt dar, müssen aber für individuelle Konzepte und Projekte natürlich angepasst werden. Zu Beginn ist es in jedem Fall wichtig, die Navigationsstruktur bzw. die unterschiedlichen Kategorien einer Seite zu erfassen. Dann erst kann man sinnvoll entscheiden, wie man die Navigation aufbaut und welche Punkte man berücksichtigen will.

Das sogenannte Hamburger-Icon ist mittlerweile Standard auf mobilen Endgeräten und sollte deshalb noch kurz erwähnt werden. Das kleine Symbol mit drei waagrechten, parallel platzierten Linien hat sich auf Smartphones und Tablets als universelles Zeichen für ein verstecktes Menü durchgesetzt.

Großer Vorteile ist natürlich der Wiedererkennungswert, dennoch bleibt das Hamburger-Icon unter Webdesignern umstritten. Streitthema ist die Usability. Kritiker sprechen oft von einem Verstecken der Optionen und erhöhten Interaktionskosten. Ursprünglich hat man es bereits Anfang der 80er-Jahre für den Xerox Star, einem der ersten Workstations mit grafischer Benutzeroberfläche, entworfen. Auch bei der ersten Version von Windows war der kleine Hamburger zu finden.