Navigationsstruktur einer Website

Wie ihr alle Website-Besucher:innen an ihr Ziel führen könnt

Die Website-Navigation ist das Herzstück einer jeden Website. Sie soll allen Website-Besucher:innen, egal ob Neu- oder Stammkundinnen und -kunden, die nötige Orientierung bieten, um ihre gewünschten Seiten schnellstmöglich aufrufen zu können. Bei der Bewertung der Benutzerfreundlichkeit spielt das Navigationsmenü eine bedeutende Rolle, da heutzutage niemand lange nach bestimmten Informationen über ein Unternehmen sowie seine Produkte und/oder Dienstleistungen suchen möchte.

Es ist für sämtliche Website-Betreiber:innen unabdingbar, die Navigationsstruktur der eigenen Website genauestens zu entwerfen beziehungsweise die bisherige Navigation kontinuierlich zu optimieren. Wenn im Verlauf eurer Online-Präsenz der Umfang der Website zunimmt und wichtige, neue Inhalte hinzukommen, dürft ihr nicht vergessen, eure Navigation dementsprechend anzupassen. Darüber hinaus habt ihr durch die Art der Menügestaltung die Möglichkeit, maßgeblichen Einfluss darauf zu nehmen, wie sich eure (potenziellen) Kundinnen und Kunden sowie Kooperationspartner:innen auf der Website verhalten werden – Stichwort Conversion Optimierung. Den idealen Navigationsaufbau könnt ihr euch dabei wie einen Stadtplan vorstellen, auf dem bereits nützliche, häufig verwendete Besucherrouten eingezeichnet wurden.

Im Folgenden erörtern wir nun die präzise Planung von Navigationsstrukturen und teilen wertvolle Tipps für die Navigationsgestaltung mit euch. Anschließend resümieren wir die bedeutsamsten Erkenntnisse.

Die Planung der Navigationsstruktur

Der Zeigefinger einer Hand zeigt auf eine Informationsgrafik mit kleinen Boxen die miteinander verbunden sind

Während der Konzeptionsphase einer neuen Website arbeitet unser Team immer eng mit euch, den Auftraggeber:innen, zusammen. Um die Navigationsstruktur optimal gestalten zu können, muss zuerst festgelegt werden, welche Unterseiten es geben wird, welche Hauptziele die Website erfüllen muss und wer die Zielgruppen sind. Häufig verwendete Menüpunkte sind beispielsweise „Produkte“, „Über uns“ und „Kontakt“.

Im nächsten Schritt wird die Art der Informationsarchitektur ausgewählt, wobei euch unsere Web-Developer:innen und -Designer:innen diesbezüglich selbstverständlich beraten. Gemäß unserer Erfahrung eignet sich die sogenannte hierarchische Informationsstruktur am besten für Firmenwebsites. Durch diese Informationsstruktur, die auch als Baumstruktur bezeichnet wird, werden die Unterseiten einer Website übersichtlich geordnet, wobei sich je nach Unterseiten-Ebene der Detailgrad der Inhalte erhöht.

Lange Zeit achteten Webdeveloper:innen strikt darauf, die sogenannte 3-Klick-Regel einzuhalten. Diese besagte, dass User:innen nicht mehr als drei Klicks bis zum Erreichen ihres „Surfziels“ benötigen dürfen, damit sie nicht aufgeben und die Website verlassen. Dieser Grundsatz kann heute als veraltet angesehen werden, da er aus einer Zeit stammt, in der die Ladegeschwindigkeit von Webseiten noch deutlich langsamer war. Hinzu kommt, dass der Umfang von Websites ebenfalls stark zugenommen hat, wodurch das stetige Einhalten dieser Regel zu überfüllten Seiten führen würde, die die User Experience stark trüben. Deshalb empfehlen wir, die Website-Inhalte sinnvoll zu kategorisieren und die Informationsarchitektur möglichst einfach zu gestalten. Wenn die Besucher:innen wissen, wo sie sich befinden und rasch verstehen, wie sie ihr Surfziel auf einfache Weise erreichen können, stellt eine höhere Klickzahl kein Problem mehr dar.

Außerdem beeinflusst euer Unternehmensgegenstand die Entscheidung, ob eine globale, eine hierarchische oder eine lokale Website-Navigation gewählt werden sollte. In den meisten unserer Anwendungsfälle kommt die erstere Variante zum Einsatz. Bei dieser wird auf allen Webseiten dasselbe Navigationsmenü angezeigt. Fällt die Entscheidung auf eine globale Website-Navigation, wird im Sinne der Einheitlichkeit vorwiegend dasselbe Prinzip beim Fußzeilenmenü angewandt. Im Vergleich dazu ändern sich bei der hierarchischen Website-Navigation die Menüinhalte je nach dem Inhalt der Seiten. Diese Menü-Unterschiede sind zum Beispiel bei Nachrichten-Websites hilfreich, da die Websites normalerweise sehr umfangreich sind und in verschiedene Kategorien (Chronik, Sport, Feuilleton, …) unterteilt werden müssen. Unter lokaler Navigation versteht man das Einbinden von internen Links in den Webseiten-Content. Auf diese Weise könnt ihr eure Website-Besucher:innen problemlos auf relevante, verwandte Seiten weiterleiten. Diese Vorgehensweise ist ebenfalls in der Medienbranche üblich, aber mindestens genauso bedeutsam für E-Commerce-Unternehmer:innen, da diese durch die Verlinkung von ähnlichen Produkten oder Zubehör ihre Umsätze maßgeblich erhöhen können.

Wenn die Art der Navigation feststeht, muss entschieden werden, wo das Menü platziert werden soll. Die Mehrheit der Website-Betreiber:innen entscheidet sich für eine horizontale Navigationsleiste, die sich in der Kopfzeile jeder Webseite befindet. Dies liegt schlicht und einfach daran, dass viele Internet-User:innen sie genau an dieser Stelle erwarten. Entscheidet ihr euch dafür, die Navigation an einer anderen Stelle zu platzieren (zum Beispiel vertikal am linken Website-Rand), kann sich eure Website optisch von jenen der Konkurrenz abheben. Allerdings müsst ihr dabei beachten, dass dadurch auf jeder Webseite ausreichend Platz für das Menü eingeplant werden muss und weniger Content platziert werden kann. Dies kann zur Folge haben, dass für die mobile Version eine komplett andere Navigationsstruktur gewählt werden muss, da die kleine Bildschirmgröße keine korrekte und übersichtliche Darstellung des Menüs ermöglicht. Gleiches gilt für umfangreiche Drop-Down-Navigationen, deren Bedienung am Smartphone oder Tablet eine Herausforderung darstellen kann.

Um die für euch optimale Navigationsstruktur optisch darzustellen, erstellen wir mit professionellen Designtools (zum Beispiel Adobe XD) User-Flow-Diagramme und listen alle Menü-Bestandteile Ebene für Ebene auf. Wenn ihr die Grafik betrachtet, könnt ihr präzise nachverfolgen, welche Klicks im Menü wohin führen. Ebenso besprechen wir mit euch, wie der geplante Navigationsaufbau eure User Flows nachhaltig verbessern kann. Dabei ist eines klar: Den Website-Besucher:innen sollen stets einfache und schnelle Navigationsrouten zur Verfügung stellen!

Unsere Tipps für eure Website-Navigation

Bei jeder Art von Website-Navigation gibt es bestimmte Aspekte, die ihr unbedingt beachten solltet. Folgende sind gemäß unserer Erfahrung die bedeutsamsten:

  • Übersichtlichkeit: Logischerweise möchtet ihr euren Website-Besucher:innen in der Navigation möglichst viele interessante und für euch erfolgversprechende Pfade anbieten. Am Ende muss aber die Übersichtlichkeit eure oberste Priorität bleiben, weil die Nutzung zu vieler Navigationsebenen mitunter vermeidbare Verwirrung auslösen kann.
  • Responsive Design: Wie bereits erwähnt, muss eure Website-Navigation auch auf Geräten mit kleinen Bildschirmgrößen optimal funktionieren. Wenn ihr ein sehr umfangreiches Menü habt, ist es meist sinnvoll, extra eine minimierte Version für die mobile Ansicht zu entwerfen. Generell gilt: Alle Teile der Navigation müssen auch beim Surfen mit dem Smartphone und/oder dem Tablet gut auffind- und klickbar sein.
  • Auswahl relevanter Schlagwörter: Nicht nur (potenzielle) Kundinnen und Kunden werden euer Menü und die darin enthaltenen Wörter genau analysieren, auch Suchmaschinen-Crawler lesen die im Menü enthaltenen Begriffe aus. Somit hilft euch eine ausführliche Keyword-Analyse nicht nur bei der Content Creation, sondern auch bei der Benennung der Haupt- und Unterpunkte der Website-Navigation. Legt hierbei den Fokus aber nicht auf Long-Tail-Keywords, da das Menü nur die wichtigsten Keywords enthalten soll, die von den Betrachter:innen schnell aufgenommen werden können.
  • Navigationsdesign: Das Navigationsdesign und das Design der anderen Website-Abschnitte müssen aufeinander abgestimmt werden. Damit das Menü auf den ersten Blick zu erkennen ist, könnt ihr durchaus andere Farben und/oder Rahmen verwenden, aber die Optik sollte weiterhin eurem Corporate Design entsprechen, sodass sich die Navigation optimal in das Layout der einzelnen Seiten eingliedern kann.
  • Testen: Bevor eine neue Website-Navigation veröffentlicht wird, solltet ihr sie von möglichst vielen unternehmensinternen sowie -externen Personen testen lassen. Deren Erfahrungsberichte liefern euch wichtige Hinweise darauf, ob ihnen der Aufbau des Menüs logisch erscheint und bei welchen Teilen möglicherweise noch Verbesserungspotenzial besteht. Ziel ist es, dass sich auch Website-Besucher:innen, die nicht sehr internetaffin sind, leicht zurechtfinden können.
  • Funktionstüchtigkeit der Links: Website-Navigationsmenüs bestehen aus sehr vielen Verlinkungen, die regelmäßig überprüft werden sollten. Hierfür werden im Internet zahlreiche Link-Check-Tools angeboten. Wenn ihr bei eurem Menü neue Links hinzufügt, solltet ihr sofort danach sicherstellen, dass die Verlinkungen im Frontend funktionieren. Kurz gesagt: Alle in der Navigation verlinkten Seiten sollten stets problemlos aufrufbar sein, weil Fehlermeldungen das Benutzererlebnis immens trüben!

Fazit

Laptop Icon

Die Navigationsstruktur stellt eine der wichtigsten Erfolgssäulen eurer Website dar, denn nur Besucher:innen, die sich schnell und leicht orientieren können, verweilen auf eurer Site und führen die Call-to-Actions aus. Aufgrund dessen empfehlen wir, den Entwurf und die Umsetzung der Web-Navigation in professionelle Hände zu legen.

Wir können zusammenfassen, dass auch beim Umfang der Navigation der Faustregel „Weniger ist mehr“ gefolgt werden sollte. Heutzutage kommen die umfangreichsten Menüs bei der Programmierung von Onlineshops und News-Websites zum Einsatz, da deren Besucher:innen oft nach gewissen Unterkategorien suchen. Bei einem Modeshop sind das zum Beispiel die unterschiedlichen Kleidungsstücke (Jacken, Hosen, Schals, …), die für Männer, Frauen und Kinder angeboten werden.

Bei der Konzeption der Navigation kann deren Aufbau bestens durch User-Flow-Diagramme dargestellt werden, die allen Personen, die am Website-Projekt beteiligt sind, die nötige Übersicht bietet. Auch zu späteren Zeitpunkten kann immer wieder das User-Flow-Diagramm zur Hand genommen werden, um gemeinsam mit den Besucherzahlen der Seiten zu analysieren, welche Navigationsrouten am häufigsten eingeschlagen werden.

Die Navigation wird nicht ohne Grund als das Website-Herzstück bezeichnet, denn neben der Suchmaschinenoptimierung ist sie mitverantwortlich dafür, ob eure Zielgruppen die Webseiten, die speziell gemäß ihrer Wünsche und Bedürfnisse designt und mit Content befüllt worden sind, auch tatsächlich finden. Wir konnten schon bei vielen unserer Webprojekte beobachten, dass eine Neugestaltung der Navigationsstruktur das User-Feedback sowie die Conversion Rates langfristig positiv beeinflusst hat. Diese Möglichkeit solltet ihr ebenfalls nutzen!