6 Argumente für das vertikale Navigationskonzept

Horizontale und vertikale Navigationskonzepte: Lange Zeit waren horizontale Navigationskonzepte der absolute Standard für Websites. Doch mittlerweile begegnen uns auch immer öfter vertikalen Menüs. Warum ist das so?

Beginnen wir mit den Grundlagen: Im UI Design gibt es unterschiedliche Möglichkeiten, eine Navigation zu visualisieren. Sie kann sich oben, unten, links oder rechts anheften, „sticky“ an einer Position fixiert sein oder beim Scrollen verschwinden, mit oder ohne Dropdown-Funktion ausgestattet sein. Bei der Wahl muss immer die ganze Website betrachtet werden, um eine optimale Navigation zu konstruieren.

Hinzu kommt, dass das Menü meist für Desktop-Devices anders gestaltet wird als für mobile Geräte. Bei Smartphones besteht die Herausforderung, dass wir besonders wenig Platz zur Verfügung haben, beim PC ist das Gegenteil der Fall. Darüber hinaus ist zu beachten, dass eine Website auf unterschiedlichen Formaten funktionieren muss. Mobile wird in der Regel im Hochkant-Format genutzt, während am Desktop Websites meist im Querformat aufgerufen werden.

Wie kann also das Navigationskonzept bestmöglich eingesetzt werden, sodass es sowohl auf Mobile- als auch auf Desktop-Devices optimal funktioniert?

Bei mobilen Geräten stellt sich diese Frage nicht wirklich. Aufgrund des Platzmangels ist eine vertikale Navigation meist alternativlos. Am Desktop gibt es jedoch mehrere Möglichkeiten. Die Spanne der Bildschirmauflösung zwischen kleinen Monitoren (Tablet oder Laptop) bis hin zu großen Widescreen-Monitoren ist groß und bietet der Website mal mehr, mal weniger Platz. Im Desktop-Bereich besteht mehr Freiheit zu entscheiden, wie der Viewport — also der sichtbare Bereich im Browser — optimal genutzt werden kann. Aus folgenden Gründen raten wir bei Desktop-Geräten immer häufiger zur vertikalen Navigation:

‍

Vorteil 1: Barriefreies Webdesign

Vertikale Menüs sind für barrierefreie Websites besonders ratsam, weil sie die Navigation auf einfache und klare Weise strukturieren. Sie bieten Nutzern mit Behinderungen, insbesondere solchen mit motorischen oder visuellen Einschränkungen, eine lineare und leicht verständliche Navigationsstruktur. Da vertikale Menüs in der Regel weniger verschachtelt sind, erleichtern sie die Bedienung mit der Tastatur oder Screenreadern. Außerdem bieten sie eine bessere Orientierung auf mobilen Geräten und ermöglichen konsistente Layouts, was die Zugänglichkeit und Benutzerfreundlichkeit für alle Nutzergruppen erhöht. Ab Mitte 2025 müssen Websites, die elektronische Dienstleistungen anbieten, nach dem WCAG-Standard (Web Content Accessibility Guidelines) barrierefrei gestaltet und umgesetzt sein.

Vorteil 2: Mehr Platz

Im Desktop-Bereich haben wir aufgrund des Widescreenformat in der Horizontalen viel Platz. Für eine optimale Usability und Lesbarkeit sollten Texte und andere Inhalte nicht zu sehr in die Breite gehen. Somit entstehen am linken und rechten Rand ungenutzte Flächen. Dieser Platz kann optimal für vertikal angeordnete Navigationselemente genutzt werden.

Vorteil 3: Mobile First

Beim Einsatz eines vertikalen Navigationskonzepts können wir in der Handhabung und Visualisierung sowohl mobile als auch Desktop dasselbe vertikale Navigationskonzept einsetzen. Wir verfolgen somit bereits im Navigationskonzept den Mobile-First Ansatz. So sparen wir an Konzeptions- und Entwickleraufwand. Zudem wird das Website-Script dadurch reduziert

Vorteil 4: Immer sichtbar, immer erreichbar

Auf Desktop-Geräten ist eine vertikale Navigation mit ihren Haupt- und Submenüpunkten jederzeit sichtbar und erreichbar, ohne wichtigen Platz wegzunehmen.

Vorteil 5: Platz für Filter und mehr

Vor allem bei komplexen und umfangreichen Websites sehen wir den Einsatz von vertikalen Navigationskonzepten, weil solche Websites in der Regel mehrere Navigationskonzepte beinhalten. Zusätzlich zur Haupt- und Subnavigation benötigt die Website ausreichend Platz und Aufmerksamkeit für zum Beispiel eine Ankernavigation oder auch Filtermöglichkeiten.

Bei einem vertikalen Navigationskonzept können weitere Navigationselemente über den eigentlichen Content der Website erscheinen und haben dort genügend Aufmerksamkeit für den User.

Vorteil 6: Intuitiv und klar definiert

Last but not least: Navigationspunkte, die untereinander angeordnet sind, werden als Liste wahrgenommen. Dadurch sind sie besonders gut lesbar und intuitiv erfassbar für den User. Durch Einrückungen können wir untergeordnete Punkte anderen unterordnen und so Ordnung schaffen.

Aufgepasst

Vor allem im E-Commerce ist es ratsam, wichtige Shoppingfunktionen wie „Mein Konto“ oder den „Warenkorb“ oben rechts auf der Website zu belassen. Diese Platzierung ist intuitiv, sichtbar und gewährleistet Konsistenz. Sie erhöht die Benutzerfreundlichkeit und ermöglicht eine reibungslose Nutzererfahrung, insbesondere auf mobilen Geräten. Abweichungen von dieser bewährten Praxis können die Nutzer verwirren und die Conversion-Raten beeinträchtigen. Daher ist es empfehlenswert, an dieser etablierten Position festzuhalten.

Cases

Für die Hamburg Media School haben wir ein benutzerfreundliches vertikales Menü entwickelt, bei dem man sich durch die zahlreichen Unterpunkte durch eine Aus- und Einklappmechanik navigieren kann.

Die Navigation des Buchgroßhändlers Libri bietet genügend Platz für weitere Navigationselemente wie eine Suche, Kontakt usw. Mehr dazu im zugehörigen Case.

Unser UX und UI-Design für das Wiesental-Viertel zeigt: Neben weiterführenden Links auf eine externe Seite kann hier beispielsweise ein dekoratives Hintergrundbild eingebunden werden, welches das Corporate Design unterstützt.

Fazit

Wie immer gilt: Es gibt keine pauschale Empfehlung für horizontale und vertikale Navigationskonzepte und bei manchen Cases ist eine vertikale Navigation nicht empfehlenswert. Bei einem Nachrichtenportal etwa würden die Menüpunkte in Textform beim Lesen längerer Artikel ablenken. Wir bieten bei jedem Projekt eine individuelle Beratung an und verfolgen gespannt die neuesten Entwicklungen und Trends im UX-Universum.