Navigation für Websites

Sie können eine noch so tolle Website haben, wenn Sie den Besucher nicht mit einer sinnvollen Navigation durch Ihre Seiten führen können, ist er schneller wieder weg als er da gewesen ist. Das hat nicht nur schlechte Auswirkungen auf Ihre SEM-Erfolge sondern ist auch schade um Ihre Produkte und Dienstleistungen, die Sie anbieten.

Kennen Sie alle Navigationselemente?

Um über eine gelungene Navigation sprechen zu können, muss zuerst einmal geklärt werden, welche Elemente so eine Navigation überhaupt umfasst. Grundsätzlich dienen alle Elemente der Orientierung des Users: Mithilfe der Navigation sollte er jederzeit wissen, wo er sich befindet und wie er von einer Seite zu der nächsten navigieren kann.

• Hauptmenü: Das Hauptmenü ist wohl das wichtigste Navigationselement. Es ermöglicht dem Nutzer entlang der Baumstruktur einer Website zu navigieren, wobei immer von der Startseite auszugehen ist. 
• Pfadnavigation: Bei der Pfadnavigation – besser bekannt als „Breadcrumb-Navigation“ wird die hierarchische Position der aktiven Seite als Textpfad angezeigt.
• Kontextnavigation: Hierbei ist von Verlinkungen die Rede, welche passend zum aktuellen Seiteninhalt andere Seiten vorschlagen. Die Produktvorschläge am Ende einer Seite kennen Sie bestimmt: „Das könnte Sie auch interessieren“.
• Content-Navigation: Dabei handelt es sich um Links innerhalb des Textes, den Sie auf einer Seite zur Verfügung stellen. Solche internen Links sollten aus SEO-Sicht einen klar verständlichen Ankertext besitzen, der kurz auf den Punkt bringt, was die verlinkte Seite behandelt. Natürlich muss der verwendete Ankertext auch im Zusammenhang mit dem gelesenen Text stehen. Mithilfe von Links innerhalb eines Texts kann eine zusätzliche einfache Navigation geschaffen werden, die es dem Leser ermöglicht, während seines Leseflusses zu thematisch weiterführenden Seiten zu navigieren. 
• Metanavigation: Umfasst alle Links, welche unabhängig vom Content auf jeder Seite verfügbar sind. Dies können zum Beispiel die Suchfunktion und die Sprachauswahl sein, welche meist oben rechts im Header zu finden sind.
• Pagination: Diese Navigation ist gerade für Online-Shops besonders wichtig. Oft werden auf einer Seite zwecks Übersichtlichkeit nur eine bestimmte Anzahl von Produkten angezeigt. Weitere Produkte werden beim Navigieren mit der Pagination sichtbar.   
• Schrittweise Navigation: Auch aus vielen Online-Shops bekannt, ist die Schrittweise Navigation. Diese wird meist für die einzelnen Schritte der Kaufabwicklung eingesetzt.
• Filterfunktion: Mithilfe der Filterfunktion kann die Suche nach z. B. einem Produkt weiter eingegrenzt werden. 
• Tag Cloud: Mit Schlagwörtern wird oft in Blogs gearbeitet. Durch die Tags sieht der Nutzer, zu welchen Themen bereits Artikel existieren. Ein Klick auf den Tag leitet zur passenden Artikelübersicht.
• Sitemap: In der Sitemap werden alle Inhalte einer Website hierarchisch aufgeführt. 
• Footer-Navigation: Im Footer kann das Hauptmenü nochmals aufgeführt werden. Aber auch auf Seiten wie das Impressum, die Datenschutzerklärung oder Social-Media-Kanäle wird hier oft verlinkt. 
• Navigation auf einer Seite/Inhaltsverzeichnis: Ist der Text auf einer Seite sehr umfangreich, bietet sich immer ein Inhaltsverzeichnis an. So weiß der Leser, was ihn im jeweiligen Text erwartet und gelangt durch Sprungmarken direkt zu den einzelnen Überschriften.

Kennen Sie alle Navigationselemente und bieten Sie diese Ihren Besuchern auch an? Ja? – Dann sind Sie bereits auf einem guten Weg. Das allein reicht jedoch nicht: Das Design Ihrer Navigation spielt eine weitere wichtige Rolle.

Das Navigationsdesign

Das Hauptmenü

Arten

Wie bereits erwähnt, ist das Hauptmenü das wichtigste Navigationselement. Auf Websites ist das Hauptmenü in horizontaler und vertikaler Ausrichtung zu finden, aber auch eine Kombination der beiden Varianten – die sogenannte L-Navigation – wird manchmal verwendet. Jedes Menü-Layout hat seine Vor- und Nachteile und ist somit Geschmacksache. Während man bei der L-Navigation im vertikalen Teil die Unterseiten darstellen kann, ist dies bei der normalen horizontalen und vertikalen Variante jeweils nur über eine Dropdown-Navigation möglich. Bei großem Sortiment bietet sich zudem das Mega-Dropdown an. Fährt man mit der Maus über den Hauptmenüpunkt öffnet sich ein großes Feld, welches alle Unterkategorien mit deren Unterkategorien übersichtlich unter- und nebeneinander auflistet. 

Für Tablets und Mobiltelefone sollte auf die oben genannten Navigationslayouts verzichtet werden, da diese mit den Fingern oft nicht sinnvoll zu bedienen sind. Verwenden Sie hier besser das Burger-Menü, welches sich bei Fingertip in geeigneter Größe aufklappt.

Ebenen

Das Hauptmenü sollte zwischen fünf und sieben Hauptkategorien umfassen. Auch bei den Unterkategorien ist Vorsicht geboten: So sollte ein User möglichst mit drei Klicks zur gewünschten Zielseite gelangen.  

Bezeichnungen

Verwenden Sie stets allgemein verständliche Begriffe für die Haupt und Unterkategorien Ihres Menüs. Diese Begriffe sollten zudem kurz und knackig auf den Punkt bringen, was den Nutzer beim Aufrufen der gewählten Kategorie erwartet. Der Navigationspunkt „Startseite“ ist heutzutage übrigens kein Muss mehr. Die meisten Internetnutzer wissen, dass sie bei Klick auf das Logo am linken oberen Rand zur Startseite gelangen, weshalb Sie diese Verlinkung auch unbedingt setzen sollten!

Sticky Navigation

Diese Bezeichnung bedeutet, dass das Hauptmenü quasi an seiner Postion „kleben“ bleibt, während der Inhalt darunter durch gescrollt wird. Dies ist bei sehr großen Inhalten eine feine und auch wichtige Sache.

Farben

Richtig eingesetzt, helfen Farben bei der Orientierung. Die aktive Seite sollte in der Navigation farblich hervorgehoben sein, damit der User zu jeder Zeit weiß, wo er sich befindet. Damit weiterhin schnell zu erkennen ist, was ein Navigationsfeld ist, kann eine gut sichtbare angenehme Farbe gewählt werden, welche gleichermaßen für alle Navigationselemente zum Einsatz kommt.  

Icons

Unter Icons versteht man kleine Bildchen, welche im Idealfall eine Wortbedeutung darstellen. Eines der bekanntesten Icons im Web ist der Einkaufswagen. Diese Verbildlichung dient vor Allem dem Verständnis. Es gibt viele allseits bekannte Symbole, welche daher keiner Begleitung der zugehörenden Bezeichnung bedürfen. So kann beispielsweise das Symbol Einkaufswagen auch ohne den Begriff Warenkorb oder Einkaufswagen stehen, um verstanden zu werden. Gängige Icons sollten dementsprechend nicht ersetzt werden, während weniger etablierte Icons stets zusammen mit dem erklärenden Begriff stehen sollten.

Buttons

Buttons sind Schaltflächen in der Benutzeroberfläche, deren Bedienbarkeit durch das Interaktionsdesign angezeigt werden kann. Je nach Interaktionszustand verändert ein Button demnach sein Aussehen – die Gestalt bleibt jedoch gleich. Man unterscheidet zwischen Grundzustand, Mouseover, Klick und Inaktivität.

Als erfahrene SEO-Agentur stehen wir Ihnen mit Rat und Tat zur Seite, um Ihre Online-Präsenz zu optimieren – zögern Sie nicht, uns zu kontaktieren.