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