Räumliche Orientierung ist für uns Menschen sehr wichtig. Orientierungspunkte helfen uns bei der Fortbewegung zum gewünschten Ziel. Hilfsmittel wie richtungsweisende Schilder, Gebäude, Strassen oder Karten helfen uns bei der Orientierung im Raum. Im Web gibt es dazu verschiedene Hilfen wie z.B. Breadcrumbs oder Next-Best-Actions. Eine wichtige Orientierungshilfe ist aber das Menü, es schafft einerseits Überblick und hilft uns andererseits unsere Ziele auf der Webseite so schnell wie möglich zu erreichen.

Auch wenn die Informationsarchitektur im ersten Schritt losgelöst von einem zukünftigen Design, rein inhaltlich vorgenommen werden sollte, ist es zentral die wichtigsten UX/UI Fragen zu stellen. Die Informationsarchitektur muss vom Nutzer ausgehen – also "outside-in" konzipiert werden. Sie darf sich nicht auf die internen Bereiche, Strukturen oder Sichtweisen des Unternehmens "outside-in" beziehen. Verpassen wir die Chance den Nutzer in den Vordergrund zu stellen, wird dieser unweigerlich Probleme bei der Nutzung erfahren. Frustrierte Nutzer verlassen die Webseite frühzeitig und kehren im ungünstigsten Fall gar nicht mehr zurück. Eine gut gestaltetes, konsistentes Menü mit einfachen Strukturen hilft dem Nutzer beim Erkunden und Erleben von Webseiten-Inhalten, dient der Orientierung und ermöglicht einen optimalen User-Flow. Es ist letztlich ein zentrales Instrument, um die Usability einer Webseite positiv zu beeinflussen.

Die Wahl des optimalen Menüs hängt von folgenden 5 Punkten ab:

1. Breite der Informationsarchitektur: Wie viele unterschiedliche Themen gilt es abzudecken?

2. Tiefe der Informationsarchitektur: Wie ausführlich sollen die Themen dargestellt werden?

3. Nutzerverhalten und -bedürfnisse: Ist die Navigation zentraler Bestandteil der User Experience oder eher zweitrangig?

4. Stakeholder Ziele: Gibt es zentrale Inhalte, die je nach Stakeholder Bedürfnis besonders hervorgehoben werden müssen?

5. Gewichtung der Menüpunkte: Gibt es zentrale Elemente des Menüs, auf die die Nutzer jederzeit schnell zugreifen müssen (z.B. Warenkorb oder Suche)?

Über die letzen bald zehn Jahre haben wir sehr viele Projekte mit den unterschiedlichsten Anforderungen umgesetzt und uns immer wieder mit dem Thema Menü auseinandergesetzt. Im folgenden stellen wir euch drei state-of-the-art Menükonzepte für grosse Screens vor, die sich bewährt haben.

#1 Mega-Dropdown

Das Mega-Dropdown ist ein einfaches Menü mit schnellem Zugriff. Das Menü ist aufgeteilt in eine horizontale Main-Navigation, welche die Menüpunkte der ersten Ebene (1st Level Navigation) beinhaltet und ein Dropdown, wo die tiefere Informationsarchitektur abgebildet wird. Der Zugriff auf das gesamte Menü erfolgt über die Hauptnavigation (Main Navigation). Bei Interaktion öffnet sich das Dropdown. Der eigentliche Content der Website ist für den Nutzer auch bei geöffnetem Dropdown noch sichtbar.

Vor- und Nachteile

Beim Mega-Dropdown sind die wichtigsten Punkte - die First Levels - direkt sichtbar und durch einen Klick erreichbar. Allgemein hat der Nutzer schnellen Zugriff zur Navigation.

Um die Übersichtlichkeit auch bei umfangreichen und tiefen Informationsarchitekturen zu bewahren, sollte die Anzahl der Spalten der 2nd Level Navigation auf maximal fünf begrenzt sein (optimale Voraussetzung für das Verhalten des Menüs auf kleineren Screengrössen). Die 2nd Level Navigation erfordert visuell eine ausgewogene Struktur und Anzahl an Navigationspunkten. Im Gesamten sollte die Informationsarchitektur eine Tiefe von drei Levels nicht überschreiten. Die Spaltenbreite verhält sich immer gleich – lange Navigationspunkte brechen zweizeilig um. 

Die 2nd Level Navigation sollte sich immer durch hover öffnen, damit der Nutzer zusätzlich die Möglichkeit hat, durch Klick auf die Main Navigation die Übersichtsseite des entsprechenden Navigationspunktes zu erreichen.

Das Mega-Dropdown eignet sich für Webseiten mit mittelgrosser Sitemap, bei denen die Nutzerführung über die Navigation essentiell ist.

#2 Mega-Dropdown mit Meta Navigation

Komplexere Webseiten mit einer umfangreichen Informationsarchitektur erfordern oftmals die Auslagerung von Teilen der Informationsarchitektur in eine separate Navigation – die Meta Navigation. Diese befindet sich oberhalb der Main Navigation und ist visuell deutlich zurück genommen. 

Vor- und Nachteile

Bei der Kombination aus Mega-Dropdown mit Meta Navigation können Navigationspunkte priorisiert werden. Sekundäre Navigationspunkte der Meta Navigation wie z. B. Über uns oder Sprachauswahl treten visuell etwas in den Hintergrund, sind für den Nutzer aber dennoch von jedem Punkt der Seite aus über einen Klick erreichbar. Die Priorisierung, welche Inhalt nun wichtig und welche weniger wichtig sind, ist nicht immer einfach. Es besteht die Gefahr, dass zu viele Punkte in die Navigation gepackt werden. Auch hier gilt es den Nutzer nicht zu überfordern und zu versuchen die Informationsarchitektur so übersichtlich wie möglich zu gestalten. So wird vermieden, dass durch das Overlay der Meta Navigation zu viele Informationen der Main Navigation verdeckt werden. Die Main Navigation dient der Präsentation der Hauptinhalte der Webseite. Es empfiehlt sich die Interaktion hier analog zur Interaktion von Variante #1 zu gestalten.

Das Mega-Dropdown mit Meta Navigation eignet sich für Webseiten mit grosser Sitemap (Umfang), bei denen die Nutzerführung über das Menü essentiell ist.

#3 Full-Size / Burger

Die Full-Size / Burger Navigation bietet durch die Verwendung der gesamten Bildschirmfläche viel Raum für die Navigation. Der Burger trennt den Content klar von der Navigation.

Vor- und Nachteile
Wird auf der Website stärker über den Inhalt navigiert, eignet sich die Full-Size / Burger Navigation besonders gut.  Die Navigation ist durch den Burger klar vom Content getrennt. Bei Klick auf das Burger Icon öffnet sich die Navigation Full-Size. Durch die Verwendung der gesamten Bildschirmfläche bietet diese Navigation mehr Raum für Navigationsinhalte. Auch zu einem späteren Zeitpunkt ist das Hinzufügen weiterer Navigationspunkte problemlos möglich. Diese Darstellung ermöglicht eine offenere Gestaltung und gute visuelle Strukturierung. Der Nutzer hat die gesamte Übersicht über alle Navigationspunkte auf einen Blick. Die maximale Anzahl Navigationspunkte ist sehr flexibel, da viel Raum zu Verfügung steht (der gesamte Viewport). Auch hier werden längere Wörter oder Navigationspunkte, die aus mehreren Wörtern bestehen zweizeilig umgebrochen. Um die Navigationsinhalte bestimmten Nutzergruppen zuordnen zu können, besteht die Möglichkeit diese zusätzlich zu unterteilen. Diese Unterteilung kann beispielsweise in sogenannten Bereiche wie z.B. Privat- und Geschäftskunden erfolgen. Inhalte, die alle Nutzergruppen umfassen, können als zusätzlichen Auswahlpunkt dargestellt werden. So sind die Inhalte noch nutzerspezifischer platziert.

Die Full-Size / Burger Navigation eignet sich besonders, wenn Nutzer über Inhalte (Teaser, Next-Best-Actions) navigieren, es mehrere Nutzergruppen gibt, die sich in der Informationsarchitektur unterscheiden und unterteilt werden sollen, dem Nutzer aber dennoch eine Gesamtübersicht über die gesamte Navigation ermöglicht werden soll. 

Das richtige Menü

Welches nun das richtige Menü für deine Website ist, hängt stark vom Umfang der Informationsarchitektur ab. Nicht jedes Menü kann auf jeder Website angewendet werden. Es ist wichtig, die Informationsarchitektur und später auch die Navigationsstruktur so aufzubauen, dass ein jeder Nutzer sich an jedem Punkt der Seite zurechtfindet und immer die Möglichkeit hat, zurückzukehren. In diesem Artikel haben wir dir drei Menüs vorgestellt mit denen Nutzer sich schneller zurechtfinden und Zielgruppen berücksichtigt werden können. Je übersichtlicher das Menü gestaltet ist, desto besser finden sich Nutzer zurecht.

Spannende Links zum Thema

• Usability: Navigation is More Important Than Search by Gerry McGovern

• Mega Menus Work Well for Site Navigation by Jakob Nielsen and Angi Li

• Hamburger Menus and Hidden Navigation Hurt UX Metrics by Kara Pernice and Raluca Budiu

• Types of Navigation by James Kalbach