Beispiele und Tipps für eine intuitive Website-Navigation
In diesem Artikel erfährst du mehr über die Grundlagen einer Navigation und praktische Tipps für eine angenehme User-Experience.
In diesem Artikel erfährst du mehr über die Grundlagen einer Navigation und praktische Tipps für eine angenehme User-Experience.
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.
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.
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ü:
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.
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.
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.
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.
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.
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.