| 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
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.
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.
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 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ü.
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.
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.
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.
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.
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.
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.
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.
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.
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.
| HORIZONTALE NAVIGATION | VERTIKALE 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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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ü.
Was ist eine Sitemap und wozu brauchst Du es? Es gibt ganz unterschiedliche Arten von Sitemaps, doch jede verfolgt einen anderen Zweck! Um zu wissen, was Du wann benötigst, geben wir Dir hier Infos. Klick Dich doch mal rein. ... Weiterlesen
| 15 min |
Google Updates gibt es viele. Doch welche waren die wirklich relevanten der vergangenen Jahre? Klick Dich rein, um zu erfahren, wie sie aufeinander aufbauen und welche Auswirkungen sie hatten. ... Weiterlesen
| 16 min |
Wie kann ich meine Website in den Google Suchergebnissen höher platzieren? Sicherlich hast Du Dir diese Frage schon einmal gestellt. Mit einer gut ausgearbeiteten SEO-Strategie ist das jedoch gar nicht so schwer und langfristig effektiv. Wir möchten Dir zeigen, wie Du Deine eigene SEO-Strategie in nur 8 Schritten konzeptionieren kannst, welche für Dein Unternehmen und Deine individuellen Ziele geeignet ist. ... Weiterlesen
| 17 min |
Du möchtest wissen, was Dir für Dein Suchmaschinenranking noch hilft?
Du siehst gerade einen Platzhalterinhalt von HubSpot. Um auf den eigentlichen Inhalt zuzugreifen, klicke auf die Schaltfläche unten. Bitte beachte, dass dabei Daten an Drittanbieter weitergegeben werden.