07121 203 76 08 info@50millisekunden.de

5 Zauberformeln für eine gute Hauptnavigation

von | 14. September 2020

Warum ist die Hauptnavigation so wichtig?

Sie bietet Orientierung und macht den Weg frei

Stellen Sie sich vor, Sie suchen einen bestimmten Raum und steigen in einen Aufzug, der verspricht, Sie an die richtige Stelle zu bringen. Die Fahrstuhltüren gehen auf und Sie stehen irgendwo in den Räumen eines Unternehmens. Was sind die ersten Fragen, die Sie sich dieser Stelle stellen?

Vermutlich sind es die Fragen:

  • Wo bin ich hier?
  • Was kann ich hier tun?
  • Wo kriege ich hier jetzt das, was ich haben will?

Genauso ist es auch, wenn Sie das erste Mal auf eine Webseite kommen. Und es ist egal, ob das eine Startseite oder eine Unterseite zu einem bestimmten Thema ist.

Das erste was Sie brauchen ist: Orientierung (die Antworten auf die Fragen oben). Am einfachsten geht das mit gut verständlichen Wegweisern, damit sie das richtige Ziel ansteuern können.

Das zweite ist die Möglichkeit, dorthin zu gelangen: der Klick auf die Navigation, der Sie weiterbringt. Das ist leicht erledigt, denn eine Navigation besteht nun mal aus Links, sonst ist es keine Navigation.

Also zurück zur Orientierung. Eine Seite (egal ob Startseite oder Unterseite/Landingpage) kann (und sollte!) verschiedene Mittel nutzen, um Orientierung zu bieten und die Fragen oben zu beantworten. Eines der wichtigsten ist die Navigation – weil sie auf einen Blick nicht zwar nicht unbedingt zeigt, was es auf dieser einzelnen Seite gibt (das erledigen andere Elemente), sondern weil sie einen Überblick gibt, was die gesamte Website thematisch zu bieten hat. Und zwar auch dann, wenn ich auf der hintersten Detailseite gelandet bin, die nur mit einem einzigen der vielen Themen auf der Website beschäftigt.

Sie ist das Inhaltsverzeichnis der Website und gibt damit einen Überblick, was hier sonst noch so zu bekommen ist – egal wo ich gerade bin. So etwas würde ich mir in so mancher Behörde wünschen!

Damit ist eigentlich schon klar, warum die Navigation so wichtig für jede Webseite ist. Ohne sie würden sich die Besucher über kurz oder lang verirren/verlaufen, den Überblick verlieren und womöglich als einzigen Ausweg das Verlassen der Website wählen.

Deshalb muss sie gut gemacht sein: gut sichtbar, gut lesbar, übersichtlich und gut verständlich für die Zielgruppe Ihrer Website. Interaktiv und klickbar ist ja sowieso.

Fazit für ganz Eilige:

Damit ist eigentlich alles gesagt und Sie können jetzt aufhören zu lesen und Ihre Navigation einfach entsprechend umsetzen.

Für etwas weniger Eilige:

Hier geht’s nach unten zur Checkliste mit meinen 5 praktischen Tipps, mit denen eine gute Navigation ganz einfach wird.

Für Neugierige

erkläre ich ein noch bisschen genauer, wie man eine gute Navigation hinbekommt:

Die 5 Zauberformeln:

1: Gut sichtbar

Um ihren Zweck für Überblick und Orientierung zu erfüllen muss sie beim Öffnen der Seite auf den ersten Blick oben sichtbar sein. Ohne extra Scrollen oder Klicken. Deshalb darf sie – solange der Platz es noch irgendwie zulässt – auch nicht in einem „Hamburger-Menü“ versteckt werden.

Das sogenannte „Hamburger Menu“ sind die drei waagerechten Striche, hinter denen in mobilen Versionen von Webseiten oder in Apps Menü- oder Navigations-Funktionen versteckt werden:

Vom Hamburger zur Menü-Navigation

Das Symbol ist gut etabliert, die allermeisten Nutzer kennen es und wissen, dass sich dahinter weitere Navigationsmöglichkeiten verbergen. Es spricht also nichts gegen die Verwendung des Symbols, außer eben, dass ich Informationen verstecke, die für den Besucher so nützlich sind, dass er sie auf den ersten Blick bekommen sollte.

Die gelernte Position einer Navigation ist oben, waagerecht über dem ersten Inhalts-Element einer Seite. Sie ist auf allen Seiten gleich positioniert und sieht auf allen Seiten gleicht aus (der Punkt, an dem man sich befindet, ist optisch hervorgehoben – s.u. 5: Interaktiv).

Besonders benutzerfreundlich ist es, wenn die Navigation auch beim Scrollen oben stehen bleibt, um den Besuchern auch dann noch Übersicht zu bieten, wenn sie schon weit nach unten gescrollt haben. Abhilfe schafft hier notfalls aber auch der kleine „schwebende“ Button mit Pfeil, der zurück „nach oben“ führt.

Beispiel für einen "Nach-Oben-Button"

2: Gut lesbar

Gut sichtbar bedeutet auch: gut lesbar. D.h. die Schriftgröße wird so gewählt, dass sie gut erkennbar ist (> 18 pt). Und die Schriftart sollte eine sein, die gut zu lesen ist.

Beispiel für zu kleine Schrift in der Navigation
Die Schrift ist mit 13pt zu klein für eine Hauptnavigation. Zum Vergleich: Die Headline hat die Schriftgröße 30pt.

Außerdem sollten die Farben von Schriftart und Hintergrund so gewählt sein, dass ein ausreichender Kontrast besteht.

Extratipp:
Um zu testen, ob die gewählten Farben ein gutes Kontrastverhältnis bieten, gibt es ein prima Tool, das sogar unterscheidet, ob der Text normal oder groß ist:

https://www.leserlich.info/werkzeuge/kontrastrechner/

3: Übersichtlich

Auch die Anzahl der Navigationspunkte spielt bei Lesbarkeit und Verständlichkeit eine große Rolle: Das menschliche Gehirn kann nämlich nur bis sieben zählen – richtig gut zählt es sogar nur bis fünf. 

Bei 3 Elementen denkt das Hirn:
„Mega übersichtlich! Toll, da muss ich mir überhaupt keine Mühe machen.“

Bei 5 Elementen denkt das Hirn:
„Ok, das ist übersichtlich, ich muss mich nicht anstrengen.“

Bei 7 Elementen:
„Boah, das geht grad noch, ist aber schon ein bisschen mühsam.“

Sind es 8 Elemente oder mehr:
„Ächz, das sind viele! Das geht nicht so schnell. Da muss ich mich anstrengen und drüber nachdenken.“

Abgesehen davon, dass es in der Horizontalen ohnehin nicht so viel Platz gibt, tun Sie also gut daran, es Ihren Besucher mit maximal 5 Navigationspunkten so übersichtlich und wie möglich zu machen – damit ihre Hirne keine Mühe haben und sich offen und entspannt darauf konzentrieren, was wohl als nächstes kommt.

Die ganze Navigation aus Platzgründen zweizeilig werden zu lassen, ist leider auch keine gute Idee, die Übersichtlichkeit geht damit sofort verloren, auch wenn es weniger als 7 Punkte sind. Dem Gehirn fällt es schwer, die umgebrochenen Punkte in der zweiten Zeile noch als hierarchisch gleichwertig mit den oberen einzusortieren und versucht, einen hierarchischen Zusammenhang mit dem darüber liegenden Punkt herzustellen – was natürlich nicht funktioniert – also wird es schon wieder anstrengend, die Navigation zu verstehen, was wir ja unbedingt vermeiden wollen. Wechseln Sie im Zweifel dann doch lieber früher zum „Hamburger“ – oder vielleicht gibt es auch kürzere Wörter, die trotzdem gut funktionieren?

4: Gut verständlich

Verständlich muss die Navigation nämlich auch noch sein. Der Besucher muss beim Lesen der Navigationspunkten genau vorstellen können, was er unter diesem Navigationspunkt findet. Idealerweise findet der Besucher genau das Wort, das er als „Suchwort“ im Kopf (d.h. die Lösung für sein Problem) direkt in der Navigation wieder. Wenn dann auch noch die Inhalte stimmen, werden Sie einen sehr glücklichen Besucher haben.

Ein Beispiel aus meinem Online-Einkaufs-Alltag:

Als Geschenk für meine Tante wollte ich einen Liegestuhl kaufen. Ich gehe in den Shop meines Vertrauens und schaue nach „Liegestuhl“, zunächst unter „Gartenmöbel“ und finde nichts. Dann unter „Outdoor“ – wieder nichts. Was eigentlich nicht sein kann, weil ich weiß, dass hier alle möglichen Gartenmöbel angeboten werden. Also nutze ich die Suche und finde: Mehrere „Sonnenliegen“. Die stehen so auch in der Navigation, gleich hinter den „Gartentischen“. Nur habe ich sie dort übersehen, weil ich „Liegestuhl“ im Kopf hatte, nicht „Sonnenliege“.

Also muss man drauf achten, (Stich-)Worte zu verwenden, die mit den Wörtern im Kopf der Mehrzahl der Besucher übereinstimmt, wenn sie etwas suchen, was Sie anbieten.

Hier kommen dann auch Navigation und SEO zusammen: Bei der Benennung der Navigationspunkte tut man gut daran, mal zu prüfen, nach was denn die Menschen dazu bei Google suchen. Nicht nur, weil Google dann Ihre Navigation und Ihre Seite besser rankt, sondern weil die Besucher Ihre Angebote einfacher finden und verstehen können, wenn Sie die richtigen Worte benutzen.

„Sonstiges“, „Extras“ oder „Service“ sind deshalb meist keine guten Navigationspunkte, da selbst in einem konkreten Zusammenhang oft schwer zu erraten ist, was sich darunter verbergen könnte. Ist die Benennung nicht gut, bleiben die Leistungen oder Angebote hinter diesem Navigationspunkt leider oft ungeklickt. Oder sie enden in einer Enttäuschung, wenn sich dahinter nicht das verbirgt, was der Besucher erwartet. Enttäuschung gehört zu den Gefühlen, die der Besucher nicht mit Ihrer Website und Ihrem Unternehmen in Verbindung bringen soll.

5: Interaktiv

Zur Funktion als Wegweiser und Orientierung gehört auch, dass der Besucher anhand der einer optischen Hervorhebung in der Navigation erkennen kann, wo er gerade ist.

Beispiel für optimale Hervorhebungen in der Hauptnavigation

Die Hervorhebung ist sehr gut gelöst: Der Besucher sieht sofort, wo er sich befindet – die “Breadcrumb” unterstützt hier noch zusätzlich. Der Kontrast von roter Schrift auf schwarzem Grund ist dagegen nicht so optimal.

Wenn es für einige Navigationspunkt Unterpunkte gibt, für andere aber nicht, sollte der Besucher diesen Unterschied ebenfalls das an einem optischen Hinweis erkennen können – z.B. einem kleinen Pfeil. 

Beispiel für eine Navigation mit versteckten Unterpunkten
Beispiel für die ausgeklappte 2. Ebene

Keine externen Links: Die Navigation ist das Inhaltsverzeichnis Ihrer Seite. Deshalb leiten Punkt in der Hauptnavigation niemals auf eine andere (externe) Seite!
Es mag Ausnahmen geben, wo eine externe Verlinkung unumgänglich ist, z.B. wenn der zum Unternehmen gehörige Shop in einem anderen System umgesetzt ist, als die Website selbst, er aber trotzdem in der Hauptnavigation aufgeführt werden soll – weil (Orientierung!) auf einen Blick vermittelt werden soll, dass es einen Shop gibt und der Kunde Produkte direkt bestellen kann. Dann muss für die „externe“ Zielseite ein sehr gutes Konzept und eine einheitliche Gestaltung dafür sorgen, dass der Kunde von diesem nicht irritiert wird oder ihn im besten Fall sogar nicht einmal bemerkt.

Checkliste für eine gute Navigation:

Worauf muss man also achten bei der Konzeption und Erstellung einer guten Navigation?

1. Sichtbarkeit

  • Positionierung oben quer (horizontal)
  • Nicht im „Hamburger“ versteckt, solange der Platz noch reicht
  • Sichtbarkeit auch beim Scrollen erhalten, evtl. mit „nach oben“-Button

2. Lesbarkeit

  • Schrift > 16 pt
  • Gut lesbare Schriftart
  • Farbe / Kontrast sind passend gewählt

3. Übersichtlichkeit

  • Eindeutige und verständliche Benennung
  • Nicht mehr als 7 Punkte (besser sind: 5) in der ersten Ebene
  • Niemals zweizeilig

4. Verständlichkeit

  • Erwartungskonform: Wo „Produkte“ drübersteht sind auch „Produkte“ drin
  • Geläufige Begriffe verwenden (Suchworte)
  • Eindeutige Begriffe verwenden

5. Interaktivität

  • Der aktive Punkt sieht anders aus, als die anderen
  • Es ist unterscheidbar, ob ein Hauptpunkt klickbar ist, oder nicht
  • Es gibt eine optische Unterscheidung, wenn es Punkte mit und ohne weitere Unterpunkte gibt
Barbara Gölz, UX-Spezialistin

Ich bin Barbara Gölz.

Kämpferin für konsequente Kundenorientierung, Verfechterin bestmöglicher UX, SEO-Missionarin, E-Commerce-Agitatorin und Projektabwicklerin.

Bild des Downloads: 10 ärgerliche Fehler beim Aufbau der Startseite

NEU

Kostenlose Checkliste

10 ärgerliche Fehler auf der Startseite – und wie Sie sie vermeiden.

Ich unterstütze Sie gerne

Mit lösungsorientierter Beratung

für alle Projektschritte für die Umsetzung von benutzerfreundlichen Webseiten und Online-Shops

Mit einem Coaching oder Workshop

für den Einstieg in eine erfolgreiche Planung und Umsetzung Ihres Online-Auftritts, den Sie in Eigenregie umsetzen wollen

Mit Gehirn-freundlichen Konzepten

damit Ihre Kunden gerne und immer wieder bei Ihnen kaufen

Mit Projekt-Management

zur erfolgreichen Umsetzung Ihres Online-Projektes

Barbara Gölz, Gründerin von 50 Millisekunden

Ich bin Barbara Gölz.

Seit über 20 Jahren verhelfe ich Unternehmen zu verkaufsstarken Shops und professionellen Webseiten, die von ihren Nutzern genauso geliebt werden, wie von ihren Betreibern.

Kontakt:

Telefon: 07121 203 76 08
E-Mail: info@50millisekunden.de

Do NOT follow this link or you will be banned from the site!

Öfter mal was Neues lesen?

Jetzt für meinen praktischen Newsletter anmelden und Tipps & Tricks für nutzerfreundliche Webseiten und Shops erhalten.
(Datenschutz)
ANMELDEN
close-link
Neugierig? Klick mich!