Die richtige Website Navigation – so führst Du Deine Nutzer ans Ziel!

20 min

Was ist eine Website Navigation und wozu brauchst Du sie?
Welche Arten der Website Navigation gibt es?
Was bringt Dir die Website Navigation für SEO?
Worauf solltest Du bei der Erstellung von Navigationen besonders achten?
Wie passt Du die Navigation der Website an verschiedene Endgeräte an?
Die Website Navigation und deren Strukturierung
Fazit: Warum eine gute Navigation(sstruktur) wichtig ist

Was ist eine Website Navigation und wozu brauchst Du sie?

Die Website Navigation kennst Du vielleicht ebenfalls unter dem Begriff (Website) Menü. Es ist die Leiste, die Du auf einer Website findest, um zu verschiedenen Unterseiten zu gelangen. Dazu sind dort Links hinterlegt, auf die Du klicken kannst, um zu verschiedenen Landingpages zu gelangen. Die Navigationsleiste ist dabei auf jeder einzelnen Unterseite der Website zu finden, um dem Internetnutzer Orientierung zu geben.

Auf dem Bild ist ein Screenshot der eology Homepage zu sehen. Auf dieser findest Du eine Navigationsleiste in Form einer horizontalen Navigation, die durch ein Burger Menü ergänzt wird. Das Burger Menü ist eine vertikale Drop-Down Navigation.
Beispiel eology Website: Hier findest Du die Navigation in Form einer horizontalen Navigation in Kombination mit einem vertikalen (Burger) Menü.

Besonders im Hinblick auf die unterschiedlichen Verhaltensweisen Deiner Website-Besucher ist eine Navigation wichtig. Während die einen auf direktem Weg zu der Seite gehen, zu der sie möchten – sei es direkt über die Eingabe der passenden URL oder über die Suchfunktion auf der Seite – gibt es andere, die sich gerne erst einmal durchklicken. Eben für diese zweite Art der Website-User wird eine Navigation wichtig. Sie benötigen diese, um sich selbst ihren Weg zu bahnen. Ohne ein Hauptmenü oder eine Hauptnavigation käme es schnell zu Frust, da sie schlichtweg nicht das finden würden, was sie suchen. Deshalb ist es grundlegend, dass eine Seite gut und sinnvoll strukturiert und intuitiv bedienbar ist.

Welche Arten der Website Navigation gibt es?

Grob kann man die Website Navigation bzw. die einzelnen Menü-Arten in horizontal und vertikal gliedern. Einige der bekanntesten und wichtigsten Navigationsarten findest Du nachfolgend.

Die Grafik zeigt schematisch den Unterschied zwischen horizontaler und vertikaler Navigation. Während horizontale Menüs am oberen Rand der Website zu finden sind, befinden sich vertikale Menüs links oder rechts der Website.

Horizontale Navigationsarten

Die horizontale Navigation ist die Art, die es von beiden schon länger gibt. Ein echter Klassiker also. Diese Version galt jahrelang als der Standard und war als Best Practice weit verbreitet. Sie besticht dadurch, dass Nutzer sich bereits viele Jahre an diese Art der Navigation gewöhnt haben und einfach ihrer Gewohnheit folgen. Das Drop-down ist somit logisch und verständlich. Allerdings sind horizontale Navigationen in erster Linie auf die Desktop-Anwendung ausgelegt, da hier das Seitenverhältnis passender ist. Mittlerweile findest Du horizontale Navigationen deshalb oft in Verbindung mit Drop-down-Menüs. Drop-down-Menüs sind also eine Kombination aus horizontalem und vertikalem Menü.

Mega Menü

Das Mega Menü ist die meist verwendete horizontale Navigationsleiste. Es ist dabei mehrstufig aufgebaut. Das heißt es besteht zuerst aus der Oberkategorie, welche Du anklicken kannst. Nach dem Klick erscheinen alle Unterkategorien, die zur entsprechenden Kategorie gehören. Diese erscheinen dann entweder in einem Drop Down (von oben nach unten) oder in einem Fly Out (von links nach rechts).

Achtung: Ein Mega Menü hat viel Platz für Kreativität, sollte jedoch niemals unübersichtlich werden. Sonst verschlechterst Du dessen Usability bzw. Nutzerfreundlichkeit.

Darstellung eines Mega Menüs mit Fly Out.
Hier zu sehen ist ein Mega Menü als eine Möglichkeit eine horizontale Navigation einzusetzen. Die Fly Out-Funktion des Menüs zeigt sich darin, dass ein Teil der Navigation aus dem unsichtbaren Bereich des Bildschirmrandes einfliegt, wenn der Nutzer das Menü verwendet.
Darstellung eines Mega Menüs mit Drop Down.
Hier zu sehen ist ein Mega Menü als eine Möglichkeit eine horizontale Navigation einzusetzen. Die Drop Down-Funktion des Menüs zeigt sich darin, dass ein Teil der Navigation aus dem unsichtbaren Bereich "unterhalb" des vertikalen Menüs herunterfährt, wenn der Nutzer das Menü verwendet.

Button bzw. Tap Icon Menü

Mithilfe von Buttons oder Icons gestaltest Du diese Art der horizontalen Navigation. Die einzelnen Felder sind dabei die Ober- bzw. Hauptkategorien, ähnlich wie im Mega Menü. Klickst Du den Button, öffnet sich die Kategorieseite.

Zu sehen ist ein Button bzw. Tap Icon Menü, das zu den horizontalen Menüs gehört. Es zeichnet sich dadurch aus, dass sich das Menü für genau das Icon vergrößert, das der Nutzer anklickt.

Beachte: Bei dieser Art von Menü ist es wichtig, dass die Begriffe, die Du als Button oder Icon darstellst, eindeutig zuzuordnen sind. Sie sollten für den Website-Besucher einleuchtend sein und nicht zu Verwirrung führen. Schreibe im Zweifelsfall lieber darunter, welche Inhalte ihn erwarten. Sonst findet er eventuell nicht das, was er erwartet und springt ab.

Vertikale Navigationsarten

Aufgrund von Smartphones und dem daraus folgendem geänderten Seitenverhältnis sollte auch die Navigation angepasst werden. Eine horizontale Navigation ist für neue Bildschirmformate deshalb nicht immer die perfekte Lösung. Deshalb entstanden vertikale Navigationsarten, die eine Alternative zum bisherigen Standard bieten.

Klassisches Burger Menü

Das Burger oder auch Hamburger Menü ist mittlerweile die Navigationsart, die Du auf den meisten Websites findest. Du erkennst es an den drei übereinander gestapelten Balken, die an die Form eines Burgers erinnern – deshalb auch die Namensgebung. Klickst Du dieses Navigationselement an, erscheint das Menü. Gerade auf modernen Seiten findet diese minimalistische Menü-Art Anklang.

Hier findest Du eine schematische Darstellung des klassischen Burger Menüs. Zu erkennen ist dieses an den drei übereinander gestapelten Balken. Klickt ein Nutzer auf dieses Symbol öffnet sich das Menü in Form einer vertikalen Navigation.

Burger Full Screen Menü

Das Burger Full Screen Menü ist die nächste Stufe bzw. die Weiterentwicklung des ursprünglichen Hamburger Menüs. Dabei wird die Menüleiste nach einem Klick auf das Burger Menü-Symbol in Vollbild-Ansicht ausgespielt. Das hilft Dir, einzelnen Menüpunkten noch mehr Ausdruck zu verleihen und lenkt die volle Aufmerksamkeit auf die Navigation, da außer ihr nichts mehr anderes zu sehen ist.

Zu sehen ist das Burger Full Screen Menü, welches sich nach dem Anklicken des Burger-Symbols (zu erkennen an den drei übereinandergestapelten Balken) über den kompletten Bildschirm ausbreitet.

Off Canvas- bzw. Drop Down-Menü

Diese zwei Varianten gibt es ebenfalls als Navigationsart für Desktop und Mobil. Es handelt sich dabei um Menüs, die durch einen Klick auf den entsprechenden Pfeil oder Button sichtbar werden. Sie erscheinen dabei von links nach rechts (Off Canvas) oder von oben nach unten (Drop Down) aus dem unsichtbaren Bereich der Website. Es ist somit eine responsive Navigation, die an Slider einer Website erinnert.

Bonus: Der große Vorteil dieser beiden Arten ist, dass sie innovativ, intuitiv und interaktiv sind. Sie eigenen sich also perfekt für moderne Websites.

Zu sehen sind die beiden Möglichkeiten, mit denen Du ein vertikales Menü durch Ziehen oder Wischen über den Display aus dem unsichtbaren Bereich erscheinen lassen kannst.
Links siehst Du ein Off Canvas Menü, welches durch Wischen, Ziehen oder einen Klick auf ein entsprechendes Symbol am Rand Deiner Website erscheint.
Rechts siehst Du ein Drop Down Menü. Dieses ist eine sehr bekannte Version der vertikalen Navigation. Durch Wischen, Ziehen oder einen Klick auf ein entsprechendes Symbol  erscheint das Menü aus dem oberen unsichtbaren Bereich der Website.

Multi Level-Menü

Die Multi Level-Navigation ist eine Mischform. Es handelt sich dabei um eine vertikale Navigationsleiste, die die Oberkategorien enthält. Über ein Drop Down-Menü gelangst Du dann zu den Unterkategorien. Klickst Du hier eine an, wird diese in einem weiteren Menü geöffnet. In der mobilen Version werden dabei die Produkte einfach unter der dazugehörigen Kategorie ausgeklappt. Die Navigation besteht somit aus verschiedenen Ebenen und sorgt, anders als das Mega Menü, für mehr Übersichtlichkeit, da immer nur das ausgeklappt oder angezeigt wird, was Du sehen möchtest.

Darstellung eines Multi Level Menüs. Hierbei handelt es sich um eine Mischform aus horizontaler Navigationsleiste und vertikalem Drop Down-Menü. Die Navigation besteht somit aus verschiedenen Ebenen. Ein Beispiel hierfür sind Onlineshops für Bekleidung. Die Oberkategorie im horizontalen Menü könnte hier "Damen" sein. Die Unterkategorie des ersten Drop Down-Menüs wäre dann wiederum "Kleidung" und die darauf folgende weitere Kategorie könnte "Röcke", "Jeans", "Pullover", etc. sein.
Darstellung eines Multi Level Menüs

Ein Beispiel hierfür sind Onlineshops für Bekleidung. Die Oberkategorien im horizontalen Menü könnte hier „Damen“, „Herren“, „Kinder“ sein. Klickt man auf „Damen“ ist die Unterkategorie des ersten Drop Down-Menüs dann wiederum „Kleidung“, „Schuhe“, „Accessoires“ und das darauf folgende weitere ausgeklappte Menü, wenn man „Kleidung“ klickt, könnte die Kategorien „Röcke“, „Jeans“, „Pullover“, etc. enthalten.

Zusammengefasst: Horizontale vs. vertikale Navigationen

HORIZONTALE NAVIGATIONVERTIKALE NAVIGATION
VORTEILE– Seit Jahren etabliert und dadurch beim Nutzer bekannt
– Alle Menüpunkte sind im sichtbaren Bereich
– Nimmt nur geringen Platz des Bildschirms ein
– Uneingeschränkte Anzahl an Menü- und Unterpunkten
– Sortierung der Menü-Links nach Wichtigkeit
– Content der Website kann direkt oben am Bildschirmrand beginnen
NACHTEILE– Bildschirme, die höher sind als breit (Smartphones, Tablets, …) haben Darstellungsprobleme
– Eher unscheinbar
– Anzahl der Menüpunkte ist durch die Breite des Bildschirms begrenzt
– Anzahl der möglichen Unterkategorien ist eingeschränkt
– Bei zu vielen Menüpunkten muss gescrollt werden
→ Sichtbarer Bereich ist eingeschränkt
– Optischer Übergang zwischen Content und Navigation kann zu Verwirrungen führen

Der Kreativität sind im Hinblick auf Navigationen beinahe keine Grenzen gesetzt. Lässt Du Deinen Blick aufmerksam durchs Netz schweifen, wirst Du feststellen, dass es sich selten um ein Entweder-Oder handelt. Oftmals nutzen moderne Websites eine Kombination aus vertikaler und horizontaler Navigation und verschiedenen Menü-Arten, ähnlich wie auf unserer Website.

Was bringt Dir die Website Navigation für SEO?

Interne Verlinkungen sind ein starkes Rankingkriterium. Aus diesem Grund solltest Du darauf achten, dass der Navigationspunkt nach Möglichkeit auch nach dem Hauptkeyword der Seite benannt ist. Außerdem werden über die interne Verlinkungsstruktur Signale an den Googlebot gesendet, die ihm mitteilen, wie wichtig diese Seite ist. Landingpages, die mit weniger Klicks erreichbar sind, sind dabei immer relevanter als andere. Das Ziel ist es, ca. 70-80% aller Webseiten mit nur drei Klicks erreichbar zu machen. Die flache Struktur spielt dabei nicht nur für die Suchmaschinenoptimierung eine große Rolle, sondern ebenfalls im Hinblick auf die Usability für den Nutzer.

Worauf solltest Du bei der Erstellung von Navigationen besonders achten?

Es gibt zwei Empfehlungen, die sich seit Jahren etabliert haben, wenn es um die Erstellung von Websites und deren Navigationen geht: Die Drei Klick-Regel und die Sieben plus/minus-Regel – wobei es sich bei beiden eher um Empfehlungen als Regeln handelt.

Drei Klick-Regel

Die Drei Klick-Regel ist bei Web-Experten längst Standard. Dabei handelt es sich um eine Empfehlung, die besagt, dass alle Inhalte einer Website über drei Klicks erreichbar sein sollten. So erhöhst Du die Usability, erleichterst Deinen Nutzern den Besuch und vermeidest Verwirrungen.

Das Bild zeigt schematisch die Drei Klick-Regel. Diese beschreibt, dass eine Ziel-Website über drei Klicks in der Navigation erreichbar sein sollte. So ist im Beispiel der Grafik der erste Klick "Kontakt", der zweite Klick in der Navigation wäre "Übersicht Standorte" und über den dritten Klick würde der Nutzer eine Übersicht aller Standorte sehen können.
Die Drei Klick-Regel

Sieben plus/minus Regel

Der amerikanische Psychologe George Armitage Miller hat im Jahr 1956 das Kurzzeitgedächtnis von Menschen untersucht. Dabei kam er zu der Erkenntnis, dass das menschliche Gehirn in der Regel nur ca. sieben Einheiten gleichzeitig erfassen kann. Je nach Person schwankt dies um plus/minus zwei Einheiten. Diese sieben Einheiten werden aus diesem Grund „Millersche Zahl“ genannt.

Das Kurzzeitgedächtnis und die Aufmerksamkeitsspanne von Menschen ist gerade im Zusammenhang mit digitalen Medien sehr wichtig. Deshalb ist die Sieben plus/minus Regel heute noch relevant, wenn es um den Aufbau von Websites, deren Navigationen und des Contents hergenommen. Die kognitive Belastung sollte deshalb so klein gehalten wie nur möglich, vor allem, weil hinzukommt, dass heutzutage zusätzliche Ablenkungen wesentlich höher sind. Die Sieben plus/minus Regel hilft Dir also Deine Navigation so aufzubauen, dass sie Deine Nutzer nicht überfordert.Beschränke Dich also bei Deinen Navigationselementen oder Rubriken auf sieben plus/minus Punkte.

Wie passt Du die Navigation der Website an verschiedene Endgeräte an?

Heutzutage ist es wichtig, dass Deine Website nicht nur auf Desktops angepasst ist, sondern auf allen Endgeräten problemlos angezeigt werden kann. Mobile Versionen der Seite oder ein responsives Design sind deshalb ein klares Muss – vor allem im Hinblick auf das immer wichtiger werdende Mobile First-Prinzip. Eine responsive Navigation ist also das Schlagwort, das Du in diesem Zusammenhang brauchst. Dadurch garantierst Du, dass alle Navigationselemente auf mobilen Endgeräten trotz Platzmangel gut sicht- und klickbar sind. Außerdem solltest Du bedenken, dass Smartphone, Tablet und Co. im Normalfall mit Touchscreens ausgestattet sind. Achte darauf, dass Elemente so platziert sind, dass sie nicht ausversehen geklickt werden. Das bietet nur unnötiges Frustrationspotenzial.

Die Website Navigation und deren Strukturierung

Um eine sinnvolle Struktur zu erstellen, solltest Du Dir im ersten Schritt den Aufbau Deiner Website genau anschauen. Werfe hierfür einen Blick auf Deine Sitemap. Welche Seite ist auf der obersten Ebene und welche kommen darunter? Identifiziere diese und strukturiere Deine Navigation dementsprechend.

So kannst Du Deinen Besuchern über das Menü zeigen, was Deine Website alles zu bieten hat. Die Übersicht aller Seiten hilft, sie auf weitere Seiten zu führen und ihnen dort zusätzlichen spannenden Content zu bieten. Zusätzlich kannst Du diese Liste nach Wichtigkeit sortieren. So sehen Nutzer direkt zu Beginn des Lesens, was am bedeutendsten ist.

Fazit: Warum eine gute Navigation(sstruktur) so wichtig ist

Es ist wichtig eine gut strukturierte und intuitive Navigation zu führen, weil Du darüber verschiedene Impulse an die Besucher geben kannst. So kannst Du Deinen Besuchern beispielsweise Orientierung auf der Seite bieten und ihnen zeigen, wo sie sich gerade befinden. Außerdem können sie über ein Menü leichter an ihr Ziel gelangen. Dafür sollte die Navigation natürlich auch zielführend aufgebaut sein, andernfalls wird der Besucher die Seite schnell wieder verlassen. Eine gute Struktur ist somit die Basis gelungener Benutzerfreundlichkeit.

Exkurs: Eine Breadcrumb und/oder Footer Navigation können ebenfalls hilfreich sein. Ersteres hinterlegst Du auf den einzelnen Landingpages selbst. So sieht der Nutzer den Pfad, den er bereits durchgeklickt hat, bis er auf der Seite angekommen ist, auf der er sich aktuell befindet. Der Footer hingegen umfasst nochmal alle für den Internetnutzer wichtigen Links wie Impressum, Kontakt, etc. und ist somit eine weitere Möglichkeit der Navigation. Eine Footer Navigation ist längst Standard auf den meisten Websites. So wissen Nutzer, dass sie einfach nur zum Ende der Seite scrollen müssen, um die relevantesten Links und Seiten zu finden.

FAQs

Navigationsstruktur – Warum ist eine gute Navigation wichtig?

Ist Deine Navigationsstruktur nicht gut und intuitiv aufgebaut, werden Deine Website-Nutzer nicht das finden, wonach sie suchen. Das sorgt dafür, dass diese unzufrieden sind, abspringen und im schlimmsten Fall nie wieder Deine Seite besuchen. Im Härtefall profitiert also Deine Konkurrenz von einer schlechten Navigation auf Deiner Website.

Was bringt Dir die Website Navigation für SEO?

Eine schlechte Navigation sorgt dafür, dass Deine Nutzer unzufrieden sind und Deine Seite verlassen. Dadruch erhöht sich Deine Absprungrate. Diese und weitere negative Signale werden dann an die Suchmaschine übermittelt, wodurch sich Deine Rankings verschlechtern können. Zusätzlich sind interne Verlinkungen ein großes Rankingkriterium. Arbeitest Du hier also mit einer guten Navigation, hat das einen positiven Effekt auf Deine Platzierung in Suchmaschinen.

Welche Arten der Website Navigation gibt es?

Grob unterschieden gibt es vertikale und horizontale Navigationen. Beide werden nochmals in verschiedene Darstellungen unterteilt. Außerdem gibt es mittlerweile auch eine Mischung aus horizontaler und vertikaler Navigation. Hierbei gibt es häufig eine horizontale Navigationsleiste kombiniert mit einem vertikalen Drop Down-Menü.

Kontakt
Melde Dich

  +49 9381 5829000