Webseiten-Navigation unter der Lupe

Vertikales Navigationsdesign bald Standard oder wohin segelt das Schiff?

In den 90er Jahren, zu den Anfängen des Webdesigns, als man noch Frames und Tabellen als Bausteine nutzte, verwendete man hauptsächlich die vertikale Webseiten-Navigation. Jetzt, wo man sich an das Switchen in horizontale Menüstrukturen gewöhnt hat, scheint auf einmal wieder das vertikale Menü die Lösung für die Mobile-first-Generation zu sein. Der Trend bei Smartphones besteht darin, die Geräte höher, aber nicht breiter zu designen. Das heißt, wir müssen diesen Viewport eventuell anders nutzen. Ist die horizontale Navigation somit Geschichte? Handelt es sich hier um einen Webdesign-Trend, der von Dauer ist?

Grundlagen-Check: Usability und Navigation im Einklang

Die Navigation hat in der Hauptsache die Aufgabe, dass sich Ihr Besucher auf Ihrer Webseite zurechtfinden soll. Usability ist auch bei der Navigation die Intension, nach der Sie ein schlüssiges, nachvollziehbares und intuitiv verständliches und somit erfolgreiches Navigationskonzept entwickeln. Es sollte so konzipiert sein, dass Ihr Besucher in Sekunden versteht, wo er ist und wie er zum Gewünschten kommt. Sonst ist er ganz schnell bei Ihrer Konkurrenz.

Webseiten sind im Wandel. Zum einen schreibt das der Google-Algorithmus und zum anderen der Nutzer vor. Das Internet entwickelt sich vom reinen Informationsdisplay hin zu interaktiver Kommunikation und geführter User Experience. Die Navigation muss Nutzer an die Hand nehmen und in der gewünschten Reihenfolge zeigen, was ihn zum Kauf animiert.

Trotzdem stellt sich uns als Webdesign-Agentur immer die Aufgabe, die richtige Balance zwischen Form und Funktion finden. Entscheidend ist natürlich der Nutzer und auf welchen Geräten er zuhause ist. Und ja, form follows function, aber wir werden auch durch Design-Grundsätze und -Philosophien beeinflusst. Und das ist auch gut so.

Vorteile der horizontalen Webseiten-Navigation

Das neue Jahrhundert hat die horizontale Navigation als Best Practice für Flatscreens festgelegt. Damals konnte man noch davon ausgehen, dass der Bildschirm breiter als höher war und keine Alternative zum Desktop existierte. Und man konnte ohne viel nachzudenken zum gewünschten Ziel gelangen. Auch die unten liegende Navigation, mit der der Webdesigner spielte, hatte seinen Grund: Die Menüpunkte waren leicht mit der Maus zu erreichen oder bei einer Touchfunktion mit dem Daumen.

Neue Messlatte für die Navigation: Smartphones

Die letzten Jahre haben durch die steigende Beliebtheit mobiler Geräte, durch Browser mit 3D Support, durch HTML5, CSS3 und die Front-End Javascript Frameworks sowie die allseitige Erhöhung der Bandbreiten zu einer großen Veränderung gebracht und vor allem auf responsive Design ausgelegte Mobilgeräte. 2018 geht es noch einen Schritt weiter – Realität und Technologie treffen aufeinander. Dem Nutzer wird ein Surferlebnis versprochen.

Vorteile vertikaler Navigation

Das, was eine Webseiten-Navigation braucht, ist Aufmerksamkeit, vor allem, wenn eine Benutzerführung genau geplant ist. Vertikale Menüs, die links angebracht sind, bedienen die natürliche Blickführung: meistens scannt man zuerst über den Seitenanfang zum linken Bereich und dann nach unten. Ein vertikales Menü bedient sich diesem Muster. Und wenn das vertikale Menü sichtbar bleibt, fordert es vom Besucher keine gedankliche Anstrengung und kann schnell aufgenommen werden.

Auch ist ein vertikales Menü in der Länge unabhängig, während ein horizontales begrenzt ist. Das Scrolling setzt sich mehr und mehr durch und wird durch ein vertikales Menü ebenfalls unterstützt. Aber auch das vertikale Menü steht vor der Barriere des Textes. Man muss kurze Wörter verwenden, um nicht Platz zu verschwenden.

Vertikal als Standard?

Das vertikale Menü wird zum Standard oder wie man in moderneren Apps sieht, mindestens als Ergänzung zur horizontalen Menüleiste genommen. Oder das responsive Design geht zumindest den Kompromiss ein, dass sich die horizontale Leiste ab einer definierten Auflösung umbricht. Man arbeitet vertikal mit einer Piktogramm-Leiste, die entweder direkt Funktionen auslöst oder sich bei Klick auf das jeweilige Icon öffnet. 

Alternativen und Trends zur Webseiten-Navigation:

1. Hamburger Menü / Hamburger Icon: Momentan setzt sich auch das Hamburger Menü oder auch das sogenannte Hamburger Icon durch. Für mobiles Design zwar eine Lösung, aber auch in der Kritik: Es soll User Engagement im Wege stehen, manchmal schwer zu entdecken sein, und seine Effizienz für den Nutzer wird angezweifelt. Da aber doch immer mehr Nutzer wissen, dass diese drei Linien das Menü verstecken, fangen Designer sogar an jetzt hier mit Alternativen zu den Linien herumzuspielen.
2. Fly-Out-Menü: Dieses Menü öffnet sich per Overlay von links nach rechts (oder anderen Bewegungsrichtungen) über den Bildschirm.
3. Iconleiste: Einen Kompromiss geht auch eine dauerhaft sichtbare Iconleiste ein. Das gibt unbegrenzten Platz nach unten und kann jedem noch so unwichtigen Punkt ein eigenes Navigations-Item zugeteilt werden.
4. Kein Menü als alternatives Menü: Man sagt vom modernen Nutzer, dass er weiß, was er auf einer Seite zu tun hat. Gerade die Seiten zum Scrollen verleiten den Besucher dazu, so lange zu scrollen bis er am Ziel ankommt. Das lässt auch ein gewisses Stöbern zu. Auch das Side-Scrolling ist als Alternative immer häufiger zu finden. Bedenken Sie allerdings, dass das auch wieder zu Ihrem Konzept und Produkt passen muss.
5. Pop-Menü: Wir sind so sehr im “Drop-Down“ gefangen, dass die Designer erst langsam anfangen, die Webseiten-Navigation aufpoppen zu lassen. So kann man das Menü ganz überraschend und mit zusätzlichem Überraschungseffekt platzieren. Oder vereinzelt sieht man schon Popover, die die ganze Seite mit Navigation besetzen. Eine sehr auffällige Variante.
6. Split Screens: Ein Trend, der auch immer stärker im Design genutzt wird, ist die vertikale Aufteilung des Bildschirms in zwei gleich große Teile. Extrem auffallend und auf kleineren Bildschirmen / Geräten werden für das responsive Design die zwei Teile einzeln übereinandergestapelt oder in eine Side-Panel-Navigation umgewandelt.

Fazit: Die Webseiten-Navigation will genutzt sein!

2018 und die folgenden Jahre werden auch bei den Navigationen immer mehr Greifbares und Digitales verschmelzen lassen. Wir werden durchaus durch Schatten und Farbverläufe geführt und mithilfe von Animationen und Mikrointeraktionen unser Nutzerverhalten gesteuert werden. Webseiten fangen auch schon an, Seitenverhältnisse komplett zu ignorieren und rein dem Betrachter die Kontrolle über den Verlauf zu geben.

Was der Trend eigentlich zeigt ist, dass Navigation generell das Wichtigste beim Einstieg in Ihre Unternehmenswelt ist und nicht gern versteckt wird. Selbst der Sticky-Header in der horizontalen Navigation wie auch das dauerhafte Mitführen der Webseiten-Navigation am oberen Bildschirmrand zeigen, dass der Besucher seine Optionen zwar gerne im Blick behält, aber das Erlebnis und der Spaß im Web, passend zu den Unternehmen, zu ganz individuellen Lösungen führen.