Foto: Was du bei der Website Navigation beachten musst
22. Dezember 2022Die Website Navigation ist ähnlich wichtig wie das Navigationssystem im Auto. Navigiert sich jemand ins Abseits, bewusst oder unbewusst, hat das Konsequenzen. Setze daher bei der Website Navigation nicht nur auf Design, sondern auf Funktion, klare Benennungen und auf Marktstandards.
Warum brauche ich eine Website Navigation für meine Seite?
Wer auf seiner Website möchte, dass sich Nutzerinnen und Nutzer schnellstmöglich und bestmöglich zurechtfinden, der braucht zwingend eine klare Website Navigation. Die Website Navigationsleiste ist mittlerweile ein seit Jahrzehnten vertrautes Mittel, um Menschen auf Übersichtsseiten deiner Website zu leiten und auch wieder zurück zum Ausgangsort zu bringen. Hier kann Kreativität beim Design wichtig sein, doch zu viele Abweichungen vom Standard können genau zum Gegenteil führen: Verwirrung. Und wer verwirrt ist, manövriert sich gerne in die Sackgasse. Das ist bei einer Homepage nicht anders als bei einem Navigationssystem im Auto.
Beispiele für die Website Navigation
Website-Navigations-Design ist von vielen Menschen bereits in unterschiedlichen optischen Möglichkeiten gelernt und eine Orientierungshilfe, die zentrales Element einer Homepage ist:
- Burger-Menü (drei Streifen, die die Navigation darstellen und beim Klick darauf das Menü freigeben, vor allem bei mobilen Websites beliebt)
- Dropdown-Menü (Menü, das sich nach unten ausklappt, sobald darauf geklickt wird)
- Horizontales Menü (Menüleiste, meist unter dem Seitenkopf)
- Sidebar (Vertikales Menü an der Seite einer Website, klassische Form, lange etabliert)
- Breadcrump-Navigation (sie zeigt den Verlauf einer Navigation, die ein Nutzer geleistet hat. Beispiel: Home > Karriere > Servicekraft)
- Fußzeilen-Navigation (wird oft bei grafisch opulenten Seiten verwendet)
Die Beispiele für die Website Navigation sind allesamt beliebt und je nach Anwendungszweck mit unterschiedlichen Vorteilen wie auch Nachteilen behaftet. Für viele Seiten kann die Fußzeilen-Navigation ausgeschlossen werden, da sie häufig eher für kunstvolle Projekte verwendet wird, bei denen ein großes Foto oder eine große Grafik auf der Startseite gezeigt wird. Hamburger-Menüs / Burger-Menüs sind ein Marktstandard, der sich meist für Webseiten eignet, die responsiv sind. Diese Seiten passen sich einerseits an den PC an, andererseits auch an sämtliche Endgeräte.
Nach wie vor häufig im Einsatz sind Sidebars, also Menüs, die statisch an einer Seite der Homepage ausgespielt werden. Dieser Klassiker, der schon vor zwanzig Jahren im Einsatz war, ist gelernt, kollidiert aber auf mobilen Websites häufig mit dem dargestellten Inhalt aufgrund des wenigen Platzes, der zur Verfügung steht.
Website-Navigations-Design: Wie die Navigationsleiste optisch aussehen sollte
Um zu bestimmen, wie das Website-Navigations-Design in der Praxis umgesetzt wird, musst du dich für die Anzahl der Menüpunkte, deren Benennung und Hierarchie entscheiden. Dementsprechend kannst du auch entscheiden, wie umfangreich das Menü ist und ob es Menüpunkte geben soll, die beispielsweise ausgeklappt werden müssen, damit das Menü weiterhin übersichtlich wirkt.
Folgende Regeln gibt es zu beachten:
- Das Menü sollte klein gehalten werden, nicht mehr als sechs Kategorien sind Standard
- Klare Benennung der Menüpunkte, verwende etablierte Begriffe wie „Karriere“ oder „Shop“, um direkt Orientierung im Wording zu ermöglichen
- Sticky-Menüs gewährleisten, dass das Menü immer gefunden wird, egal an welchem Punkt der Website Besucher unterwegs sind
- Das Seitenlogo sollte immer mit der Weiterleitung / URL auf die Startseite verlinkt sein
- Umfangreiche Menüs werden durch Submenüs erweitert
- Verzichte auf den Menüpunkt „Startseite“, das ist veraltet
Egal für welche Form des Menüs du dich entscheidest, beziehe diese Punkte ein, um Nutzerinnen und Nutzern klare Leitplanken für deine Website zu geben. Denn bei einer Website Navigation und dem dazugehörigen Design zählt häufig das Gegenteil wie beim Inhalt: Weniger Abweichung von gelernten Standards ist bei der Gestaltung der Navigationsleiste häufig mehr.