Portrait von Sarah
Sarah Siebold
UX/UI Designer
Oct 16, 2020 5 min read

Die 3 wichtigsten NavigationsmenĂĽs

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.

“Clear menus and links are the foundations upon which all great websites are built.”

Gerry McGovern, 2010

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 (outside in), niemals von der internen Sichtweise eines Unternehmens (inside out). 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.

“A well-designed business program must make its structure and organization as clear as possible. Users don’t want to waste time solving the mystery of where resources and information are hidden.”

Alan Cooper, 2001

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

  1. Tiefe der Informationsarchitektur: Wie ausfĂĽhrlich sollen die Themen dargestellt werden?
  2. Breite der Informationsarchitektur: Wie viele unterschiedliche Themen gilt es abzudecken?
  3. Nutzerverhalten und -bedĂĽrfnisse: Ist die Navigation zentraler Bestandteil des User Erlebnisses bzw. der User-Flows?
  4. Stakeholder Ziele : Gibt es zentrale Inhalte, die je nach Stakeholder BedĂĽrfnis besonders hervorgehoben werden mĂĽssen?
  5. Gewichtung der Navigationspunkte: Gibt es zentrale Elemente der Navigation, 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 Navigation auseinandergesetzt. Im folgenden stellen wir euch drei state-of-the-art Navigationskonzepte von Menüs für Desktop vor, die sich bewährt haben.

#1 Mega-Dropdown

Das Mega-Dropdown ist ein einfaches Navigationsmenü 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.

Wireframe Mega Dropdown mit Interaktion

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. 

Wireframe Mega Dropdown und Meta Navigation mit Interaktion

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.

Wireframe Full-Size / Burger Navigation mit Interaktion

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 Navigationskonzept

Welches nun das richtige Navigationskonzept für deine Website ist, hängt stark vom Umfang der Informationsarchitektur ab. Nicht jedes Navigationskonzept 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 Navigationskonzepte vorgestellt mit denen Nutzer sich schneller zurechtfinden und Zielgruppen berücksichtigt werden können. Je übersichtlicher die Navigationsstruktur gestaltet ist, desto besser finden sich Nutzer zurecht.

“It doesn’t matter how good your website is if users can’t find their way around it.”

Spannende Links zum Thema