Be responsive: mobile Navigationskonzepte

Für den Nutzer Ihrer Website ist die Navigation die wichtigste Orientierungshilfe. Sie dient ihm als Kompass, mit dem er relevante Inhalte schnell erfasst und findet. Damit das funktioniert, arbeiten Sie als Website-Betreiber vor: In der Konzeptionsphase sammeln, sortieren und ordnen Sie Informationen nach ihrer Bedeutung.

Gerade auf Smartphones ist Bildschirm-Raum ein knappes Gut. Zu den größten Herausforderungen im responsiven Webdesign gehört die Navigation. Sie ist ein wichtiges Element, das Ihre Nutzer auf Ihrer Website hält. Häufig wird empfohlen: Inhalte auf mobilen Geräten ausblenden. Daran sollten Sie sich nicht halten. Ihre mobilen Besucher sollten die gleichen Inhalte sehen wie Desktop-Nutzer.

Wichtig während der Konzeption: Überdenken Sie die Navigation. Werten Sie gesammelte Statistik-Daten aus. Und konzentrieren Sie sich auf die stärksten Menüpunkte. Das freut mobile und Desktop-Nutzer gleichermaßen. Denn sie erfassen auf einen Blick sowieso nur maximal 7 Menüpunkte.

Die Navigationsprinzipien von Desktop-Websites lassen sich aber nicht einfach auf mobile Geräte übertragen. Trotzdem müssen auch auf Smartphones häufig auf wenig Platz viele Menüpunkte und Inhalte dargestellt werden. Folgende Lösungsansätze haben sich dafür herauskristallisiert:

1. Do nothing: vertikale Navigation

Die Menüpunkte sind großzügig angeordnet und können auf dem Touchscreen bequem ausgewählt werden (Beispiel: www.nordkirche.de).

Für größere Navigationsmenüs ist dieser Lösungsansatz nicht empfehlenswert. Die Navigation nimmt zu viel Platz ein. Ihre Besucher müssen erst auf der Seite herunterscrollen, bevor sie weitere Inhalte Ihrer Website sehen. Ähnliche Probleme treten auf, wenn Ihre Website in mehreren Sprachen verfügbar ist. Übersetzen Sie mal Ihre Navigationspunkte ins Polnische. Die Begriffe sind häufig länger – für die Navigation ist nicht mehr genügend Platz.

Um den kostbaren Platz am Anfang der Seite zu nutzen, können Sie Ihre Navigation auch im Footer platzieren. Ein Ankerlink am Seitenbeginn führt Ihre Nutzer schnell und einfach zur Navigation (Beispiel: www.contentsmagazine.com). Da der Seiteninhalt über der Navigation sitzt, gibt es nach unten eigentlich keine Platzbeschränkungen für große Navigationen.

2. Select-Menü: gewohnte Auswahl

Die Navigation wird in einem einfachen Dropdown-Menü dargestellt. Dropdowns sind den Usern bekannt und lassen im ersten Viewport Platz für den Content. Die Darstellung hängt davon ab, wie dieses native Steuerelement in dem jeweiligen Betriebssystem aussieht. Untermenü-Punkte werden eingerückt. Daher eignet sich diese Variante nicht für komplexe Strukturen.

3. Das versteckte Menü: Navigation auf Klick

Diese Navigation wird über ein Icon aufgerufen (Beispiel: www.interreg-baltic.eu). Das Icon kann der „Hamburger“ sein, der inzwischen viele mobile und responsive Websites dominiert. Oder das ausgeschriebene Wort „Menü“. Oder eine Kombination aus beiden.

Die Navigation legt sich dabei über den Content der Seite. Für den Besucher fühlt sich diese Navigation wie ein Dropdown-Menü auf einer Desktop-Webseite an. Und ist damit keine ungewöhnliche Bedienform.

Untermenü-Punkte werden per Klick oder Tab auf die Obermenü-Punkte aufgerufen (Beispiel: www.ppi.de). Die Untermenüs werden dabei wie in einem Akkordeon sichtbar. Ihren Besuchern bietet diese Lösung schnelle Orientierung auf erster Ebene. Ihnen als Website-Betreiber bietet sie die Option, auch komplexe Navigationen übersichtlich zu gestalten.

4. Das Menü nebenan: Off-Canvas

Facebooks mobile App prägte die Off-Canvas-Navigation. Über ein Hamburger-Icon öffnet sich die Navigation – der Content wird zur Seite geschoben (Beispiel: www.hansapark-mobil.de). So kann die gesamte Höhe der Seite für die Navigation genutzt werden. Und bietet damit auch Platz für große und komplexe Strukturen. Dieses Navigationskonzept wird von vielen Apps genutzt (Facebook, Google, Spotify etc.) und ist den meisten Nutzern bereits bekannt.

Es gibt verschiedene Möglichkeiten für eine benutzerfreundliche Navigation in einem responsiven Webdesign. Die Anforderungen an eine Website richten sich nach den jeweiligen Bedürfnissen ihrer Nutzer. Daher gilt es, die beste Lösung immer individuell herauszufinden.