12 Jul 5 Tipps für eine gelungene Website-Navigation

Kennst du den (verwirrten) Moment, wenn du einen unbekannten Supermarkt betrittst? Du weißt zwar genau, was du hier bekommst, hast aber keine Ahnung in welchem Regal du suchen sollst. Genauso geht es Nutzern, die sich zum ersten Mal auf deiner Website wiederfinden. Erreichen diese nicht sofort das was sie suchen, verlassen sie in kürzester Zeit deine Website und die Konkurrenz freut sich schon bald über einen neuen Kunden. Das lässt sich verhindern! 

Wie du eine gelungene Navigation umsetzen kannst? 5 Tipps, die deine Navigation nutzerfreundlich machen: 

1.    Hauptmenü for President!

Das Hauptmenü ist das wichtigste Element der Website-Navigation und sollte daher nicht fehlen. Es spiegelt die Inhalte der Website auf einen Blick grob wider und sorgt mit einer überschaubaren Anzahl an Kategorien (damit sind die einzelnen Punkte des Hauptmenüs gemeint) dafür, dass der Nutzer sich „ohne zu denken“ auf der Website zurechtfindet – frei nach Steve Krugs „Don’t make me think“. 

Laut Millerscher Zahl oder auch 7+/-2-Regel kann der Mensch nur 5–9 Elemente gleichzeitig wahrnehmen. Deshalb sollte das Hauptmenü maximal aus sieben Kategorien bestehen, welche entsprechend ihrer Wichtigkeit geordnet werden sollten (z.B. „Startseite“ an erster und „Kontakt“ an letzter Stelle in der Menüleiste).

Auch bei den Navigationsebenen gilt es einiges zu beachten: Je weniger Navigationsebenen ein Hauptmenü besitzt, desto übersichtlicher wird die Website-Navigation. Die primäre Navigationsebene im Hauptmenü gibt beim Klick die sekundäre Navigationsebene und somit die Unterpunkte frei. Die sekundäre Ebene gibt die tertiäre frei usw.

Mehr als zwei Navigationsebenen führen jedoch sehr schnell zur Unübersichtlichkeit! Sollten sich mehrere Navigationsebenen nicht vermeiden lassen, hilft ein Drop-Down-Menü um Platz zu sparen. Hier gilt es zu beachten, dass die aufklappenden Punkte das Hauptmenü zu keiner Zeit verdecken sollten. Reicht das primäre Menü aus, um alle Inhalte der Website abzudecken, so muss keine sekundäre Ebene erstellt werden.

Das Hauptmenü sollte zudem nicht nur auf der Startseite, sondern auch auf allen Unterseiten sichtbar sein – im Header der Seite horizontal sichtbar oder links als vertikales Menü. Ein „Sticky Menü“ verhilft hier zu mehr Übersicht. Diese Art von Menü bleibt bei sehr umfangreichen Websites bzw. deren Unterseiten dauerhaft sichtbar, auch wenn der User auf der Seite nach unten scrollt. So hat dieser jederzeit alle Kategorien im Auge und kann auf weitere Unterseiten navigieren. 

2.    Das Untermenü

Das Untermenü sorgt für (noch) mehr Struktur auf einer Website. Es führt den User, so wie es im besten Fall auch das Hauptmenü tun sollte, Schritt für Schritt durch die Website.

Ein Beispiel für ein hilfreiches Untermenü als Teil einer Website-Navigation ist die Breadcrumb-Navigation. Die Brotkrumen-Navigation (wortwörtlich übersetzt) lässt sich am besten mit dem Märchen „Hänsel und Gretel“ beschreiben. Die beiden Kinder streuen Brotkrumen im Wald, um den Weg zurück nach Hause wieder zu finden. Genauso sollte auch der User durch seine „gestreuten Brotkrümel“ stets wieder zurück zur Startseite navigieren können.

Die Footer-Navigation ist ein sehr gängiges Untermenü und für viele User bereits selbstverständlich. Im Footer der Website, also ganz unten, werden Kategorien gezeigt, die nicht in das primäre Geschäft (und somit nicht in das Hauptmenü) passen. Diese Art von Website-Navigation besteht lediglich aus Links zu Unterseiten und wie zum Beispiel zum Impressum oder zu den Kontaktdaten.

Bei großen Websites oder Webshops sind Filterfunktionen oder Suchleisten von großer Wichtigkeit. Sie schränken die große Bandbreite an Produkten ein und führen den User so schnell zur gesuchten Unterseite bzw. zum gesuchten Produkt. 

Ein Ankermenü verhilft bei langen Webseiten mit viel Text oder bei Onepagern zur gewünschten Übersicht. Durch die kann der User schnell zu verschiedenen Bereichen der Webseite oder des Textes springen, ohne lange scrollen zu müssen.

Klar gibt es noch viele weitere Arten, wie man mittels Untermenüs Übersicht schafft. Wichtig ist nur, dass sich der Nutzer auf der Website zurechtfindet und mit wenigen Klicks das gewünschte Produkt oder die gesuchte Info findet. 

3.    Hier geht’s weiter …

Interne Verlinkungen sind vor allem in SEO-Kreisen sehr beliebt, da ein ausgeklügeltes Linkprofil auch bei den Suchmaschinen beliebt ist. Weist eine Website ein gut verknüpftes Linkprofil vor, kann dies unter anderem zu einem besseren Google-Ranking führen.

Mit Bedacht gesetzte Verlinkungen erleichtern dem Nutzer die Website-Navigation: Verlinkungen zu relevanten Unterseiten sollten im Text, in Aufzählungspunkten oder auf bestimmte Icons gesetzt werden und den User zur gewünschten Unterseite navigieren. 

Tag Clouds (zu Deutsch: „Schlagwortwolken“) sind Ansammlungen von Verlinkungen, die jeweils zu unterschiedlichen Unterseiten führen. Beim Klick auf ein Schlagwort, also auf einen Tag in der Wolke, wird der Nutzer auf die verlinkte Unterseite navigiert. 

4.    Das richtige Wording macht’s

Ein wichtiger Punkt, der jedoch bei Website-Navigationen oft vernachlässigt wird, ist die Benennung der Kategorien in den Haupt- und Untermenüs. Auf Wort-Experimente sollte hier verzichtet werden – der Nutzer sollte sofort wissen, wohin ihn der Klick auf eine bestimmte Kategorie führt. Ein Beispiel: Über die Website einer Putzfirma kann man Reinigungsdienste buchen. Der Nutzer sucht nach dem Angebot der Putzfirma. Klickt dieser nun eher auf die Kategorie „Alles sauber!“ oder auf jene, die mit „Angebot“ benannt ist? Kategorien einer Website-Navigation müssen verständlich benannt werden – wenn möglich mit lediglich einem Wort.

5.    Icons, Bilder und Farben

Bringe, wenn möglich, Farbe in dein Menü – zumindest ein wenig davon. Denn die farbliche Einteilung der verschiedenen Kategorien und Ebenen erleichtert dem User die Nutzung deiner Website-Navigation. Verwende unterschiedliche Farben für unterschiedliche Kategorien oder Ebenen und ziehe dieses Farbkonzept konsequent durch. Ausgewählte Menüpunkte sollten zudem farblich hervorgehoben werden. 

Auch Bilder und Icons können die Website-Navigation erleichtern. Hier ist jedoch Vorsicht geboten: Die Kategorien innerhalb der Menüs sollten niemals lediglich aus Bildern bestehen. Ausreichende Abstände zwischen den Elementen und Fettdruck können ebenfalls zur Gestaltung eines übersichtlichen Menüs beitragen. 

Noch Fragen zur Navigation? Wir stehen dir gerne zur Verfügung!