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 Menu╠ł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 Menu╠ł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 Menu╠ł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 Menu╠ł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
bei uns

  +49 9381 5829000