Von Buttons zu Breadcrumbs wie die Navigationsleiste deine Website zum Erlebnis macht!
11. October 2024Du hast bestimmt auch schon mal in einem Laden, den du noch nicht kennst, genervt gesucht wo was zu finden ist und aufgegeben. Bei Websites ist das nicht anders. Sind diese nicht klar durch eine Navigationsleiste und Menü strukturiert, verlaufen sich deine Besucher/-innen und schließen frustriert den Browser Tab, da sie nicht finden wonach sie suchen. Wie du das mit einer guten Website Navigation vermeiden kannst, verraten wir in diesem Beitrag.
Was ist die Navigationsleiste einer Webseite?
Die Webseitennavigation einer Webseite beschreibt, wie verschiedene Seiten auf deiner Webseite organisiert und miteinander verbunden sind. Sie ist wie ein Inhaltsverzeichnis deiner Website.
Warum ist Webseitennavigation auf einer Webseite wichtig?
Eine Website ohne Navigationsleiste und das dazugehörige Menü von Unterseiten, ist wie, als wenn du durch ein Lidl ohne Gänge gehst. Du würdest die Bananen zufällig neben der Parkside Schleifmaschine finden und die Mayo bei der Colgate Zahncreme im Zweierpack.
Auch wenn das Verhalten der Konsumenten/Konsumentinnen unterschiedlich ist, einige es vorziehen erstmal die Startseite zu scrollen, und andere sich lieber sofort einen Überblick von den Hauptseiten beschaffen, navigiert ein Menü die Besucher/-innen durch die Seiten und Inhalte deiner Website.
Hierbei ist es egal, ob es versteckt als Hamburger Menü erscheint, klassisch horizontal angeordnet oder atypisch diagonal über den Bildschirm verläuft. Ein Navigationsmenü:
- Strukturiert die Webinhalte
- Ordnet Inhalte in Kategorien ein
- Macht die Bedienung der Website intuitiver
- Priorisiert Inhalte durch die Hierarchie der Unterseiten
- Lenkt Nutzer bewusst zu bestimmten Inhalten
- Macht das Web-Erlebnis übersichtlicher und somit einfacher verständlich
- Ermöglicht es bestimmte Seiteninhalte zu verstecken bzw. nur für Mitglieder zugänglich zu machen
- Fungiert als “Werbebanner” dass deine Hauptinhalte immer präsentiert
- Ermöglicht es, durch das Design (Hintergrund, Schrifttyp und Farben) deine Marke hervorzugeben
Sidebar oder Hamburger Button? – Welche Arten von Website Navigation sind besser?
Es gibt im Webdesign grundsätzlich drei Typen von Navigationsleisten: horizontal, vertikal oder versteckt durch einen Button. Alle haben verschiedene Zwecke und Funktionen.
Horizontale Navigation
Die horizontale Navigation beherbergt das klassische von Anfang des Webs existierende Menü.
Zweck:
Es zeigt dem Nutzer übersichtlich auf einem Blick, welche Unterseiten vorhanden sind, entweder mittig, seitlich oder über die ganze Bildschirmbreite orientiert. Je nach Website Layout kann dieses einen merklichen Platz des Bildschirms (Querformat) einnehmen und somit die Möglichkeit geben Hintergründe auf das Branding einer Firmenwebsite anzupassen.
Funktion:
Für Querformate geeignet, den bei schmalen Bildschirmen wird dieses automatisch zum Drop-Down Menü, sofern der Website-Builder, wie bei Webnode, responsiv ist und sich an alle Bildschirme anpasst.
Klassisches horizontales Menü einer Webnode E-Shop Vorlage
Drop-down – Hamburgerbutton -Tab-Icon
Das Hamburger Menü ist besonders für mobile Geräte geeignet und bei Minimalisten beliebt.
Zweck:
Fokussiert den/ die Betrachter/-in auf das wesentliche der Website, wie etwa das Heldenbild der Startseite. Motiviert den Nutzer zu scrollen und auf Schaltflächen der einzelnen Seiten zu klicken.
Funktion:
Anstelle des Hamburgers kann ebenfalls ein beliebiges Icon per Klick das vorhandene Unterseitenmenü öffnen. In beiden Fällen spricht man von einem Drop Down Menü, da sich auf durch den Klick auf eine Schaltfläche, Tab oder Symbol ein Menü auftut.
Dezenter Hamburger Button oben rechts
Sticky-Navigationsleiste
Eine Sticky-Navigationsleiste ist fixiert. Sie macht für horizontale Navigationsleisten Sinn, da sie immer oben auf der Website angezeigt bleibt, auch wenn du weiter runter scrollst.
Zweck:
Erleichtert beim enlosen Scrollen die Orientierung und behält den Fokus auf die wichtigen Unterseiten.
Funktion:
Bei kleineren Bildschirmen wird die Sticky-Navigation als Symbol mit einem Dropdown-Menü in der oberen rechten oder linken Ecke des Bildschirms erscheinen.
Im Webnode Editor kannst du unter der erweiterten Seitennavigation die Sticky Navigationsleiste einstellen, indem du das fixierte Menü aktivierst.
Vertikales Menü
Beispiel einer vertikalen Navigation anhand der Optiker Vorlage von Webnode
Zweck:
Ein Seitenmenü bringt gegenüber dem horizontalen Menü den Vorteil, dass du dort uneingeschränkt Menüunterpunkten auflisten kannst. Aber, weniger ist immer mehr, wenn es um Webdesign und eine klare Struktur geht. Zu viel angezeigte Unterseiten auf einmal können Verwirrung schaffen.
Funktion:
Motiviert den/ die Betrachter/-in sich links zu orientieren und ein wenig umzudenken, denn normalerweise schweift unser Blick immer von oben links nach unten rechts. Neueste Trends zeigen ein vertikales Menü auf der rechten Seite und / oder anstelle des Drop-Downs ein Fly Out dass Unterseiten von links nach rechts öffnet, wie bei C2 Montréal.
Was neu oder ungewohnt ist lenkt erstmal ab. Wenn das Neue nicht zu abwegig oder schockierend ist, macht es die Dinge spannender und unterhaltsamer.
Multi-Level-Navigation
Diese beschreibt das Erscheinen weiter untergeordneter Tabs durch ein Drop-Down Menüs.
Beispiel eines Multi-Level-Menüs (E-Shop Vorlage Webnode)
Zweck:
Solche komplexeren Menüführungen eignen sich für Kategorien eines Online -Shops, oder Blogbeiträge zu verschiedenen Themen.
Umfangreiche Websites profitieren von einem solchen Navigationsmenüs, da
- die Tabs mit unterschiedlichen Themen nicht nebeneinander in eine Navigationsleiste passen
- Seiten zu verstecken und nur miteinander zu verlinken die Nutzer wie in einem Irrgarten verwirren würden.
Funktion:
Jedes Level des Menüs wird in Form einer Liste hierarchisch angeordnet oder klappt beim Klick auf.
Welches Navigationsleiste du für deine Website, E-Shop oder Blog wählst, hängt also von dem Zweck und dessen Funktion ab, den du erfüllt sehen willst. Natürlich spielt Geschmack ebenfalls eine Rolle. Wir raten in bei der Auswahl der Vorlage diejenige zu nehemen, die du für deine Branche am passensten findest und die dir gefällt. Teste die Menüführung selbst, du kannst sie später immer noch verändern!
Breadcrumbs
Doppeltgemoppelt, die Übersicht zum Menü bieten sogenannte Breadcrumbs. Richtig, die Brotkrümel haben auch Hänsel und Gretel im Wald verstreut, um nachhause zurückzufinden.
Zweck:
Die richtungsweisenden Breadcrumbs zeigen also an, wo du dich gerade befindest. Du wirst dies im Check Out beim Online-Shopping finden.
Breadcrumbs Beispiel im Checkout des mit Webnode erstellten E-Shops: der/die Käufer/-in befindet sich im Warenkorb
Funktion:
Der Pfad durch den sich der/die Websitebesucher/-in klickt wird automatisch oben im Header der Seite angezeigt. Suchmaschinen durchsuchen diese Breadcrumbs und erfassen die erweiterte Struktur der Website und platzieren die Website besser in den Suchergebnissen. Mehr Menschen werden auf deine Seiten aufmerksam.
Suchleiste
Hypothetisch ersetzt diese die ganze Seitennavigation, da sie dich dir direkt Ergebnisse liefert, dies mit nur einem Klick. Doch, ist dies praktisch? Nicht unbedingt, da es nicht zwingend direkte Ergebnisse liefert. Bei mehr al seiner Suchantwort könnte die Geduld der Suchenden zu gespannt sein.
Eine Suchleiste sollte nur ergänzend zu einer Navigationsleiste eingebettet werden, wenn der Seitenaufbau so komplex ist, dass Seiten im Menü versteckt werden müssen, bei umfangreichen Themen oder E-Shops.
Keine Navigationsleiste-der One-Pager oder Landing Page
Und was ist mit Landing Pages? Diese bestehen nur aus einer Seite und brauchen deshalb kein Navigationsmenü. Die einzelne Seite leitet die Besucher/-innen von oben links nach unten rechts über den Fold zu den unteren Bereichen der Seite durch Button und verlinkte Texte.
One Pager sind sinnvoll, um dich und deine Tätigkeiten kurz vorzustellen. Gerade wenn du bereits eine dominante Firmenpräsenz auf Plattformen wie LinkedIn, Facebook oder Instagram hast, ergänzt die LP deine Webpräsenz.
Wie du mit deiner Navigationsleiste Menschen durch deine Website führst
Bereits als Standard erwartet, sind die Über uns/ Über mich und Kontakt Seite. Je weniger sich im Hauptmenü befindet, desto klarer ist der erste Eindruck. Doch wie kannst du über den Standard hinaus beeindrucken und deine Navigationsleiste so optimieren, damit deine Nutzer schneller zum Ziel finden und du am Ende mehr Conversions bekommst?
No-no’s des Navigationsmenüs
Beginnen wir mit dem Einfachen, mit dem das nichts in der Navigationsleiste zu suchen hat:
- Rechtliches, wie Datenschutzerklärung oder Impressum (die gehören in den Footer).
- Hinweise auf Copyright (ebenso bitte in den Footer).
- Adressen und Anfahrtswege.
- Kundenrezessionen (diese machen sich besser direkt neben dem Produkt/Service oder verlinkt auf einer einzelnen untergeordneten Seite).
- Social Media Icons, Öffnungszeiten und der E-Mail-Kontakt gehören in den Header über der Navigationsleiste und/oder direkt auf die Kontakt Seite und den Footer.
Modernes Web-Design geht dahin Websites so zu gestalten, dass mehr gescrollt, als geklickt wird und alles auf einer langen Seite ist, oder weniger Seiten.-> Ladeproblem!
Folgendes hat im Hauptmenü der Navline deiner Website, E-Shop oder Blog nichts zu suchen:
UX-Regeln beachten
Keine Seiten verstecken, sondern im Dropdown Menü anzeigen lassen. Es gibt Ausnahmen!
Gute Lesbarkeit bedeutet eine Schriftgröße von 16pt oder mehr.
Sieben plus/minus-Regel
Diese Regel besagt, dass das Kurzzeitgedächtnis von Menschen maximal 7 Einheiten gleichzeitig erfassen kann (Miller et al. 1956). In der Zeit wo unsere Aufmerksamkeitsspanne mit 8 Sekunden geringer ist als die vom Clownfisch Nemo, ist es im Zusammenhang mit den digitalen Medien essenziell deine User kognitiv nicht zu belasten. Beschränke also deine Menüpunkte auf maximal 7 auf den jeweiligen Ebenen. Das bedeutet 5-7 Tabs im horizontalen und vertikalen Menü und 7 sich weiter öffnende Unterseiten für jeden Hauptmenüpunkt. Beim Hamburger Menü wären das 7 Unterpunkte.
Im Beispiel des Skate-E-Shops hat die Unterseite Kleidung jeweils nur 2 weitere Unterseiten.
Solltest du an dieser Stelle entsetzt argumentieren, dass deine Website doch so viel “valuable Content” hat, der niemals mit der 7 Regel abgedeckt werden kann, überdenke deine Inhalte.
Was willst du dein Publikum tun lassen? Sollen sich deine Dienste bestellen, deine neue Kollektion im Online-Shop kaufen oder sich zu deinem Newsletter einschreiben. Notiere diese Schritte und baue deine Navigation darauf auf.
Wenn es tatsächlich umfangreiche Inhalte gibt, wie in Wissensdatenbanken, oder bildende Website wie die von Schulen oder Universitäten, dann verlinke verschiedene Blog-Themen oder Unterseiten auf den Seiten im Text des Hauptmenüs und lasse diese nicht in der Navigation auftauchen.
Je flacher die Seitenhierarchie, desto besser ist dies für die Übersichtlichkeit deiner Website, Blog oder E-Shop. Darüber hinaus beeinflusst dies die SEO positiv.
CTA im Header oder dem Hauptmenü
Zurück zu dem, was du deine Zielgruppe tun lassen willst. Verlinke einen Call -to-Action Button direkt im Header oder der Navigationsleiste. Dienstleister wie beispielsweise Zahnärzte/ Zahnärztinnen oder Berater/-innenkönnen mit einem CTA -Link auf einen Buchungskalender verweisen.
Icons nutzen
Icons wie Home, den Warenkorb oder Favoriten sind uns durch die Nutzung von Apps bekannt.
Die Meisten Menschen wissen, dass sie ein Klick auf das Firmenlogo zurück zur Startseite bringt. Auch diese Menüführung ist bereits Standard.
Auszuwählende Icons im Webnode Editor
SEO-Vorteile
Deine Websitenavigation bringt dir sogar bessere Positionen auf der Suchergebnisseite (SERP).
Interne Verlinkungen und Schlüsselwörter
Interne Verlinkungen sind ein starkes Rankingkriterium. Aus diesem Grund sollten alle deine Unterseiten miteinander verlinkt sein. Jeder deiner Menüpunkte bzw. Unterseiten, die sich hierzu öffnen ein sollten ein themenbezogenes Schlüsselwort enthalten.
Standardseiten persönlicher machen
Macht demnach die Standard Über Uns Seite noch Sinn? Ja, doch sie wird besser ankommen, wenn du sie entsprechend deiner Branche und Marke umbenennst. Angenommen wir haben es mit einer Website eines Friseurs zu tun; dann könnte die Über Uns Seite “Migels Stylisten Geschichte” oder “Migel Haare” heißen.
Denke daran Seitennamen im Menü an deine Marke, an dich und dass was dich auszeichnet anzupassen.
Drei Klick-Regel
Seiten, die mit weniger Klicks erreichbar sind, sind relevanter als andere. Das bedeutet, dass alles auf deiner Website oder E-Shop ist mit maximal 3 Klicks aufgerufen wird.
Eine strukturierte Website gleicht besseres Crawlen
Eine gut strukturierte Website-Navigation hilft den „Crawlern“ der Suchmaschinen deine Webinhalte besser zu erfassen. Dadurch werden diese besser eingeordnet und in den Suchergebnissen zielgerichtet angezeigt.
Positive User Experience bedeutet Mehrwert
Indirekt führt eine übersichtliche Navigationsleiste dazu, dass deine Websitebesucher/-innen gerne Zeit auf deinen Seiten verbringen, da sie sich zurechtfinden und die Antworten und Informationen finden wonach sie suchen. Suchmaschinen erkennen wie häufig Nutzer auf deine Seiten zurückkehren und ob sich länger dort aufhalten. Dies wird durch die Algorithmen von Google und Co mit einem besseren Ranking belohnt.
Bei der Festlegung der Navigationsleiste geht Benutzerfreundlich geht über Kreativität. Wenn deine Websitebesucher/-innen finden wonach sie suchen, werden sie dich und deine Dienste oder Produkte weiterempfehlen. Tobe deine Fantasie bei deinen Fotos, Videos oder Texten aus. Wenn du mehr darüber erfahren willst, was gutes Webdesign ist, folge den Trends.
Nutze die glatte Menüstruktur der Vorlagen und erstelle deine Website mit Webnode!