Beispiele und Tipps für eine intuitive Website-Navigation

Es gibt viele Aspekte einer Webseite, die zu einer positiven User-Experience führen können. Angefangen vom visuellen Design, dem Layout bis hin zu verwendeten Texten und Animationen. Eines der wichtigsten Elemente dabei ist die Website-Navigation. Eine gut funktionierende Navigation ermöglicht es den Besuchern, sich auf deiner Webseite zu bewegen und gesuchte Informationen zu finden. Ohne eine intuitive Navigation fühlen sich User schnell verloren und verlassen häufig frustriert & frühzeitig die Webseite.

Bei der Navigation gibt es viele Details, auf die du achten solltest. In dem folgenden Artikel teile ich wertvolle Tipps und anschauliche Beispiele. So kannst du deinen Besuchern eine positive Nutzererfahrung bieten und sie dazu animieren länger auf deiner Webseite zu bleiben. 

‍

Beginne als erstes mit der Planung

Bevor du deine Webseite erstellst, solltest du den Aufbau planen. Die Vorarbeit hilft bei der späteren Umsetzung. Wie viele Seite soll deine Webseite haben? Welche Seiten & Informationen sind für die Besucher am wichtigsten?

Um eine vernünftige Navigation und Hierarchie zu entwickeln, erstellt man häufig eine Sitemap. Eine Sitemap ist eine vereinfachte Darstellung vom Aufbau der Webseite und dient als Grundlage für das Navigationsmenü. So erhältst du einen schnellen Überblick über die Hauptelemente und die Planung fällt dir leichter. Die Sitemap kannst du mit jedem gängigen Grafikprogramm erstellen. Falls du keines zur Hand hast, funktioniert auch eine einfache Zeichnung mit Stift und Papier. 

‍

Wenig Menüpunkte & prägnante Begriffe

Bei deiner Hauptnavigation solltest du nie mehr als 7 Menüpunkte verwenden. Auf diese Weise halten sich die Besucher die Kategorien eher im Gedächtnis. Eine Navigation mit weniger Menüpunkten animiert mehr zum klicken als eine zu komplizierte. Weitere wichtige Tipps zum Menü:

• Bei der Reihenfolge der Menüpunkte sollten die wichtigeren Seiten weiter vorne angeordnet werden.
• Verwende für eine komplexe Navigation mit vielen Menüpunkten Dropdown-Menüs mit Unterkategorien. So wird die Hauptnavigation nicht überladen.
• Verwende für die Beschriftung kurze und prägnante Begriffe. Vermeide aber lange kreative Begriffe & Fachjargon. 

‍

Sticky Navigation für lange Scrollseiten

Was bedeutet Sticky? Eine Sticky Navigation bleibt immer am oberen Browserrand „kleben“, auch wenn der Besucher die Webseite nach unten scrollt. Diese Funktion ist vor allem bei langen Scrollseiten sinnvoll. Wenn der User mitten im scrollen eine andere Seiten besuchen will, kann er zeitsparend navigieren.

Wenn du etwas Platz sparen möchtest, kannst du auch einen Zurück-nach-oben Pfeil oder Button einfügen. Diese Schaltfläche hilft den Besuchern schnell zurück zum Menü und so zu einer anderen Seite zu navigieren. Die optimale Lösung hängt etwas vom Layout der Webseite ab.

‍

Biete Usern Orientierung

Eine weitere Möglichkeit, deinen Besuchern beim navigieren zu helfen, ist, ihnen Orientierung zu geben. Wenn User wissen, auf welcher Seite sie sich befinden, fällt es ihnen leichter, sich innerhalb der Webseite zu bewegen. Um das zu erreichen, gibt es verschiedene visuelle Möglichkeiten. 

• Die Breadcrumb Navigation ist eine häufig gewählte Orientierung bei Webseiten mit vielen Inhalten, beispielsweise Shops. Die Navigation befindet sich in der Regel am oberen Rand einer Seite und ist eine Reihe von horizontalen Links, die oft durch ein (>) Symbol getrennt werden. 
• Bei Webseiten mit weniger Seiten bietet sich an die aktuell besuchte Seite in der Navigation optisch hervorzuheben. Die Hervorhebung könnte ein unterstrichener Textlink sein oder eine Abstufung in der Deckkraft.
• Bei längeren Seiten zum scrollen wie Blogartikel wird häufig eine Statusleiste verwendet, die die Position des Lesers im Artikel anzeigt.

‍

Icons in Unternavigation für eine schnelle Scannbarkeit

Bei Webseiten mit vielen Inhalten und Untermenüs macht es Sinn, zusätzlich Icons zu verwenden. Passende Icons können dabei helfen, den Usern einen schnellen Überblick über die Menüoptionen zu geben, auch ohne die Beschriftung zu lesen. Es sollten aber immer Beschreibungstexte zu den Icons vorhanden sein. Sonst könnten User die Icons missverstehen.

Verlinke auf die Startseite

Eine Möglichkeit, schnell zurück zur Startseite zu gelangen, ist auf das Logo in der Menüleiste zu klicken. Egal, ob sich das Logo links, rechts oder in der Mitte befindet die Verlinkung hat sich als  Webstandard nahezu bei fast allen Webseiten durchgesetzt. Für die meisten User ist es eine sehr intuitive Art, sich zurück zur Startseite zu bewegen. 

Die Startseite sollte als Ausgangspunkt für die Besucher dienen, nachdem sie andere Seiten besucht haben. Mit der Verlinkung des Logos zur Startseite erhalten die User eine intuitive Navigationslösung, ohne viel Nachdenken zu müssen.

Verringere die kognitive Belastung der Besucher

Dieser Punkt klingt kompliziert – ist aber recht simpel. Beim navigieren sollte der Besucher nicht unnötig nachdenken müssen. Die Navigation sollte aus einer möglichst flachen Struktur bestehen, sodass der Besucher mit 2-3 Klicks jeden Teil der Webseite erreichen kann.  

Ebenso sollten ausgefallene Animationseffekte oder schrille Gestaltungselemente vermieden werden. Das könnte die Besucher eher ablenken und vom navigieren abhalten.

‍

Nutze die Footernavigation

Der Footer ist ebenfalls ein Element, welches sehr gut als Navigation genutzt werden kann. Die meisten Leute vergessen das Element, wenn sie von Websitenavigation sprechen. Der Footer ist der perfekte Platz, um alle Links deiner Webseite und Unterkategorien abzubilden. Jedes mal, wenn User am Ende einer Seite ankommen, sehen sie den Footer & können von dort auf andere Unterseiten weitergeleitet werden.