Die perfekte Navigation Teil 1: die Ausprägung

Das Navigationsmenü ist einer der wichtigsten Bausteine für eine erfolgreiche Webseite. Es spiegelt die Struktur der Webseite wider und hilft dem Besucher bei einer schnellen Orientierung.....zumindest in der Theorie. Denn viele Webseiten-Betreiber haben große Schwierigkeiten damit, die Navigation einfach und übersichtlich zu strukturieren und diese Struktur beizubehalten. Wir haben einmal zusammengefasst, worauf es bei der perfekten Navigation ankommt. Im ersten Teil dieser Reihe geht es um die Ausprägung der verschiedenen Navigationsformen und deren Vor- und Nachteile.

Horizontal, vertikal oder Burger-Button?

Bei dieser, zumindest auf den ersten Blick, rein optischen Frage gehen die Meinungen der Experten auseinander. Grundsätzlich kann das Navigationsmenü einer Webseite in den unterschiedlichsten Formaten dargestellt werden:

  • Oldschool: vertikale Navigation am Bildschirmrand


    Dies ist der eigentliche Navigationsmenü-Klassiker: Die Navigationspunkte befinden sich am linken Bildschirmrand und sind vertikal untereinander angeordnet. Vorteil: die Navigation ist deutlich präsenter als bei der horizontalen Variante, da sie sich neben dem angezeigten Content befindet. Zudem gibt es im Vergleich zur horizontalen Variante keine natürliche Beschränkung der Anzahl von Navigationspunkten durch die Breite des Displays, da die Navigation einfach nach unten verlängert wird. Nachteil: da sich die Navigation üblicherweise am linken Bildschirmrand befindet, muss dies bei der Gestaltung des Layouts berücksichtigt werden. So lassen sich beispielsweise keine Elemente über die volle Bildschirmbreite nutzen, da die Navigation im Weg wäre.

  • Classic: horizontale Navigation über die Breite des Bildschirms


    Diese Form der Navigation ist mittlerweile weit verbreitet und setzte sich im Zuge von Responsive Design mehr und mehr durch. Die Navigationspunkte befinden sich im oberen Bereich des Bildschirms und sind horizontal von links nach rechts angeordnet. Vorteil: diese Form der Navigation lässt sich auch auf schmaleren Displays relativ lange beibehalten, da der Abstand der Navigationselemente sowie die Schriftgröße verringert werden können. Dadurch, dass sich die Navigation am oberen Bildschirmrand befindet, ist das restliche Layout der Webseite so gut wie nicht davon betroffen. Dies ermöglicht eine maximale Flexibilität bei der Gestaltung und Aufteilung der Elemente, wie beispielsweise Elemente die über die volle Breite des Displays angezeigt werden. Sobald das Display zu schmal wird, um alle Navigationspunkte anzeigen zu können, wechselt die Anzeige in der Regel auf einen sog. Burger-Button, der auf Klick bzw. Touch die Navigation öffnet. Nachteil: die Anzahl der Navigationspunkte ist durch die Displaybreite beschränkt und kann nicht beliebig erweitert werden.

  • Modern: Burger-Button


    Ein ganz moderner Ansatz ist es, die Navigation komplett ausgeblendet zu lassen und wie bei den mobilen Layouts nur mit einem sog. Burger-Button darauf hinzuweisen. Mit einem Klick auf den Button öffnet sich dann das Navigationsmenü. Dies kann verschiedene Ausprägungen haben. Eine sog. Off-Canvas-Navigation schiebt sich beispielsweise beim Klick auf den Burger-Button vom linken oder rechten Bildschrimrand in die Seite “hinein”. Es gibt aber auch die Vollbild-Variante, bei der mit einem Mausklick auf den Burger-Button ein Overlay in der Mitte des Displays erscheint und so die Navigation einblendet. Der Vorteil einer solchen Lösung liegt ganz klar in der Flexibilität des Designs, sowohl der grundsätzlichen Webseite als auch des Menüs. Dadurch dass auf der Webseite nur ein Button an einer zentralen Stelle platziert werden muss, bleibt viel Raum und voller Gestaltungsspielraum für Design-Entwürfe. Die Nachteile einer solchen Navigationslösung liegen allerdings auf der Hand: dadurch, dass das Menü nicht sofort für jeden Webseiten-Besucher zu sehen ist, fällt die Orientierung auf der Seite etwas schwerer. Zudem ist das Einblenden der Navigation permanent mit einem weiteren “Arbeitsschritt” versehen, nämlich dem aktiven Anklicken des Menü-Buttons durch den User. Darüber hinaus geht man unter dem Aspekt der Usability das Risiko ein, dass der Menü-Button gerade von älteren Besuchern der Seite, die mit modernen Layouts nicht allzu vertraut sind, schlichtweg nicht gesehen oder erkannt wird und die Bounce-Rate der Webseite hierdurch steigt.

Unsere Meinung zur perfekten Ausprägung der Navigation einer Webseite

Wir tendieren ganz klar zur mittlerweile klassisch gewordenen Form der Navigation, nämlich der horizontalen Ausprägung. Zum Einen bleibt uns so genügend grafischer Spielraum, um sämtliche Layouts problemlos umsetzen zu können, während der User gleichzeitig sofort auf den ersten Blick alle relevanten Navigationspunkte zu sehen bekommt. Die Nachteile, dass sich die Navigation am oberen Rand des Bildschirms befindet und später nicht mehr gesehen werden kann, lassen sich mit Lösungen wie einem sticky Header, der auch beim Scrollen im kleineren Format sichtbar bleibt, kaschieren. Die Begrenzung der Navigationspunkte lässt sich bspw. mit einem Mega-Menü aufheben. Bei den anderen beiden Navigationsformen wie der vertikalen Navigation oder dem Burger-Button lassen sich die Nachteile nicht so schnell aus der Welt schaffen.

 

Im nächsten Teil geht es um die Inhalte der Navigation und die Frage welche und wie viele Navigationspunkte die perfekte Navigation beinhalten sollte.