Webseitennavigation – Wie man sie effizient und klar macht

Die Navigation und ihre Elemente

In einer idealen Welt würde jeder Nutzer auf der Startseite beginnen und die geplante Route zur Konversion folgen.

Jedoch sieht die Realität etwas anders aus, denn Nutzer können jede beliebige Seite auf einer Webseite besuchen. Die Startseite ist selten die am häufigsten besuchte Seite. Wenn wir uns die Verteilung des gesamten (100%) Traffics in einem Online-Store ansehen, erkennen wir, dass nur etwa 30% der Besuche auf der Startseite beginnen und dass die verbleibenden 70% der Besuche auf anderen Seiten beginnen (Kategorien, Produkte, Kontakte etc). Eine effizient entwickelte Navigation und all ihre Elemente spielen eine zentrale Rolle in der Nutzerreise auf einer Webseite oder in einem Online-Store. Deshalb ist es notwendig, die Verbindung zwischen der Navigation und ihren Elementen mit der Nutzererfahrung zu verstehen.

Effiziente Navigationselemente sollten:

• sichtbar sein,
• die derzeitige Position des Nutzers auf der Webseite kommunizieren,
• den Nutzer leiten können,
• benutzerfreundlich sein.

Grundlegende Navigationselemente

Navigationsmenü

Nutzer stellen sich die Hauptnavigation auf einer Webseite oder in einem Online-Store meist als ein horizontales Menü oben auf der Seite vor – in der Kopfzeile. Ein wichtiger Vorteil dieser Art der Navigation ist, dass sie dazu passt, wie Nutzer die Webseite durchsuchen – von oben nach unten, von links nach rechts. Das ist eine gute Lösung für ein Navigationsmenü oder die Navigation im Allgemeinen, wie Dienste oder grundlegende Produktkategorien.

💡 Praktischer Hinweis:
Wenn das Hauptmenü ausklappbare Punkte enthält, ist es immer besser, ausklappbare Menüpunkte (Mega-Menü) mithilfe einer Mausbewegung zu aktivieren, anstatt über einen Klick. Jedoch ist es immer wichtig, über mögliche Mausbewegungen nachzudenken. Oft passiert es, dass ein Nutzer aus Versehen andere Punkte ausklappt, als er vorhatte.

Klebende Kopfzeile

Eine klebende Kopfzeile wird meist verwendet, um den Kunden auf die Kopfzeile (Hauptbereiche mit Navigationselementen) aufmerksam zu machen. Diese Kopfzeile befindet sich immer an dem gleichen Platz und ist auch dann sichtbar, wenn man auf der Seite scrollt. Das ermöglicht einen schnellen Zugriff auf die Navigation und Suchelemente, ohne auf der Seite nach oben scrollen zu müssen. Das erhöht die Wahrscheinlichkeit, dass Nutzer diese Elemente nutzen und sich mehr Produkte ansehen.

💡 Praktischer Hinweis:
Eine bessere Version der normalen klebenden Kopfzeile ist die halb-klebende Kopfzeile, die (wieder) oben auf der Seite erscheint, wenn der Nutzer zu scrollen beginnt. Sie bietet mehr Raum, um sich Inhalte anzusehen (besonders auf mobilen Geräten) und zeigt die richtigen Tools an, wenn Nutzer sie brauchen.

Startseite und Logo

Eine der wenigen Dinge, auf die sich Nutzer verlassen können, ist, dass jede Webseite eine Startseite hat, die als Startpunkt angesehen wird und Informationen, sowie eine Einleitung anbietet, was der Nutzer auf der Seite finden kann. Diese Informationen sind besonders für Besucher wichtig, die durch eine natürliche Suche oder eine Werbung auf Ihre Seite kommen und direkt zu anderen Seiten auf einem niedrigeren Niveau wechseln. Dann möchten sie meist die Startseite besuchen, um herauszufinden, was sie auf der Webseite finden können und welche Arten von Seiten es gibt. Wenn Sie das Nutzerverhalten tracken, werden Sie sehen, dass sie oft auf die Startseite zurückkehren, wenn sie sich verirrt haben, sich die Seite fertig angesehen haben oder an mehr Informationen über den Store interessiert sind.

💡 Praktischer Hinweis:
Bei der Entwicklung der Navigation ist es wichtig, sich hauptsächlich auf das Publikum zu konzentrieren und nicht sich selbst. Den meisten Designern ist klar, dass das Logo klickbar sein muss und sie auf der Startseite keinen Textlink einfügen müssen, da das redundant und unnötig ist. Eine Webseite oder ein Online-Store sind jedoch für ein breiteres Publikum gedacht. Haben alle Besucher das gleiche technologische Verständnis? Wenn Sie einen zusätzlichen Punkt mit dem Namen „Start“ einfügen, werden es viele Nutzer einfacher finden, schnell zu finden, was sie suchen.

Seitenleiste

Abhängig von der Art des Hauptinhalts, befindet sie sich auf der linken oder der rechten Seite der Webseite. Die Seitenleiste wird oft verwendet, um die Hauptnavigation zu unterstützen. Wenn der Nutzer zu der Kategorie auf dem höchsten Niveau geht, sieht er in der Seitenleiste all seine Unterkategorien.
Die Navigationselemente in der Seitenleiste sind eine gute Lösung für Online-Stores oder Webseiten mit vielen Informationen, die strukturiert werden müssen. Zusätzlich zu Unterkategorien bietet die Seitenleiste genug Platz für Produktfilter.

💡 Praktischer Hinweis:
Beim Tracking des Nutzerverhaltens in einem Online-Store (z.B. indem Mausbewegungen getrackt werden), fällt Ihnen wahrscheinlich auf, dass Nutzer in dem Browser meist den Zurück-Pfeil nutzen, anstatt einfach zu der Eltern-Kategorie zurückzugehen.

Sie können dieses Wissen nutzen und Ihren eigenen Zurück-Pfeil mit Unterkategorien in der Seitenleiste einfügen, um Nutzern die Navigation auf Ihrer Seite einfacher zu machen.

Fußzeile

Den untersten Bereich jeder Webseite und jedes Online-Stores nennt man Fußzeile. Abhängig von der Art der Inhalte gibt es verschiedene Formen. Dieser nützliche Platz wird jedoch oft schon bei der Planung des Webseitendesigns unterschätzt. Wir nehmen an, dass Nutzer nicht auf den untersten Bereich der Seite achten werden. Die Wahrheit ist jedoch, dass sie das tun. Dieses Element erfüllt deshalb oft nicht sein volles Potenzial. Wenn ein Nutzer das Ende der Seite erreicht, ist er wahrscheinlich an Ihren Inhalten interessiert.

Beispielsweise besuchen Nutzer die Fußzeile der Seite meist, wenn sie mit ihrem Besuch fertig sind (Artikel lesen oder nach Inhalten suchen) oder sie scrollen unabsichtlich zu der Fußzeile, da sie mehr spezifische Informationen erwarten, zum Beispiel Kontaktdetails.

💡 Praktischer Hinweis: 
Eine Fußzeile ist ein universaler Platz für die Mitteilung verschiedener Arten von Inhalten. Sie können sie nutzen, um mehr Unterkategorien anzuzeigen, die für eine bestimmte Gruppe von Nutzern relevant ist. Zum Beispiel Karriereinformationen, Partnerinhalte, Informationen für die Medien etc. Jedoch ist es wichtig, dass diese Inhalte auch relevant sind.

Brotkrümelnavigation

Die Brotkrümelnavigation besteht aus einer Reihe von hierarchisch angeordneten Navigationslinks, die an der obersten Stelle einer Seite erscheinen, meistens direkt unter der Hauptnavigation. Die Brotkrümelnavigation ist ein typisches Navigationselement in Online-Stores. Es ist eines der wenigen Navigationselemente, das die derzeitige Position des Nutzers auf der Webseite anzeigt.

Brotkrümel sind ein wichtiges Navigationselement für alle Nutzer. Wenn wir diese Gruppe jedoch weiter einschränken, würden wir uns hauptsächlich auf Nutzer konzentrieren, die nicht über die Startseite auf die Webseite gekommen sind (Organische Suche, Werbungen, geteilte Links) oder die Suchfunktion des Online-Stores verwendet haben.

💡 Praktischer Hinweis:
Brotkrümel sagen uns genau wo und wie tief wir uns in der Struktur der Webseite befinden. Individuelle Produkte müssen in der Brotkrümelnavigation immer klickbar sein und eine Option haben, über die man der Webseiten-Hierarchie folgen kann. Wenn Sie die Nutzererfahrung verbessern möchten, müssen Sie es dem Nutzer ermöglichen, sich andere Kategorien auf dem gleichen Hierarchie-Niveau anzusehen. Dadurch erhält er mehr Möglichkeiten, neue Inhalte zu entdecken.

Schaltflächen und Links

Schaltflächen und Hyperlinks sind gängige Navigationselemente, auf die Nutzer überall stoßen. Die Frage ist jedoch, ob wir wissen, welche und wann wir sie verwenden sollten. Schaltflächen legen meist klare Handlungen fest, die den Nutzer auf der Webseite leiten oder ihm dem Weg zu einem bestimmten Ziel zeigen (Konversion).

Das können wir vereinfachen und sagen, dass Schaltflächen Handlungen definieren, die sich auf irgendeine Weise auf die Webseite oder den Online-Store auswirken. Zum Beispiel: Erstellung eines Nutzerkontos, Senden einer Bestellung, Bestätigung einer Transaktion etc. Im Gegensatz dazu werden Links für weniger bedeutsame Handlungen genutzt, die das Verhalten der Seite nicht beeinflussen und hauptsächlich eine Navigationsaufgabe erfüllen.

💡 Praktischer Hinweis:
Wie wir Schaltflächen und Links verwenden, wirkt sich fundamental auf die Nutzererfahrung aus. Es ist wichtig, schon bei der Erstellung von Schaltflächen und Links zu beachten, dass wir mit einer bestimmten Hierarchie arbeiten und Grundregeln erfüllt werden sollten:

• Eine Schaltfläche muss immer wie eine Schaltfläche aussehen. Sie muss einen klaren Handlungsaufruf in der Form eines Textes haben, der von einem Rahmen ausreichender Größe umgeben ist. Schaltflächen enthalten auch oft Icons, die die Handlungen widerspiegeln.
• Seien Sie konsistent. Schaltflächen und Links, die die gleichen Aufgaben erfüllen, müssen überall auf der Seite gleich aussehen.
• Verwenden Sie nie gleich aussehende Schaltfläche für unterschiedliche Handlungen. Wenn Sie mehrere Schaltflächen nebeneinander platzieren müssen, können Sie ihre Bedeutung und Hierarchie hervorheben. Beispielsweise hat eine standardmäßige Schaltfläche meist die Funktion einer Primärhandlung, eine Text-Schaltfläche mit einem Rahmen (meist als „Geistschaltfläche“ bezeichnet) stellt meist eine Sekundärhandlung dar und ein Textlink ist meist die dritte Option.
• Die Farbe und der Name der Schaltfläche (Handlung) haben einen bedeutenden Einfluss auf die Nutzererfahrung. Das ist besonders in dem Fall von Ja/Nein-Entscheidungen so. Zum Beispiel:

„Die durchgeführten Änderungen können nicht rückgängig gemacht werden. Möchten Sie fortfahren?” Die Optionen “Abbrechen” oder “Schließen” würden einen Nutzer verwirren, da er nicht weiß, welche Handlung die richtige ist. Wenn Sie jedoch eine rote Schaltfläche mit dem Text “Alle Änderungen verwerfen” und eine grüne Schaltfläche mit dem Text „Mit Änderungen fortfahren” verwenden, ist es, basierend auf den Farben, viel klarer.

• Hyperlinks sind einige der auf natürliche Weise am häufigsten verwendeten Elemente auf Webseiten. Um ihre Nutzbarkeit jedoch aufrechtzuerhalten, müssen mindestens die folgenden beiden Bedingungen erfüllt sein: Links sollten immer klar visuell von anderen Inhalten getrennt sein (zum Beispiel durch Farbe) und sollten immer unterstrichen sein.

Navigationsmenü

Suche vs. Navigationsmenü

Man könnte sagen, dass die Suche neben dem Navigationsmenü das wichtigste Navigationselemente ist und deshalb Aufmerksamkeit verdient. Dennoch stellt sich die Frage:

„Warum und wann bevorzugen Nutzer die Suche anstelle des Navigationsmenüs?“

Allgemein bevorzugen Nutzer eher die Suche als das Navigationsmenü, wenn sie wissen, dass eine Webseite oder ein Online-Store ihre Bedürfnisse mit einem angemessen umfangreichen Angebot erfüllen kann. Einfacher gesagt, wenn sie wissen, dass sie das Produkt oder die Kategorie, an dem/der sie interessiert sind, in dem Store finden können.

Sie erwarten, dass sie bei einer Suchanfrage die Ergebnisse erhalten, die sie ihrem Ziel näher bringen. Die Forschung zeigt, dass etwa 60% der Nutzer eine Webseite oder einen Online-Store verlassen, wenn sie nicht finden, wonach sie suchen.

Wie sehr ein Nutzer die Suche bevorzugt, hängt von verschiedenen Faktoren ab. Jedoch hängt es hauptsächlich von der Art des Nutzers (Besuchers) und dem Webseitensegment ab.

Einfluss der Suche auf verschiedene Segmente

Ein typisches Beispiel der Suchnutzung ist das Segment Bücher und Spiele, wo durchschnittlich nur 20% der Nutzer (von 100% Traffic in dem Online-Store) die Suchfunktion nutzen. Trotzdem macht die Suche in diesem Segment bis zu 45% des Umsatzes aus. Eine weitere Kategorie ist das Segment B2B, in dem bis zu 92% aller Käufe von der Suche stammen.

Wenn Sie an dem Einfluss der Suche auf individuelle Segmente und wie man sie optimieren kann, um Ihre Verkäufe zu erhöhen, interessiert sind, können Sie sich gerne unsere kostenlose Studie Such-Benchmarks & Einblicke unter luigisbox.com/research-and-reports herunterladen.

Suche und Nutzer

Wenn wir uns nur auf die Startseite konzentrieren, sehen wir, dass bis zu 40% der Nutzer des gesamten Traffics die Suche dem Navigationsmenü vorziehen.

Ob ein Nutzer, der auf die Startseite kommt, sich entscheidet, zu suchen oder sich das Navigationsmenü anzusehen, hängt von der Art des Nutzers (Konsumenten) ab.

Jeder Nutzer, der den Online-Store besucht, verhält sich anders und hat andere Motivationen. Diese Nutzer können wir in 3 Hauptarten unterteilen und sie verallgemeinern.

1. Besucher, dessen Ziel ist, Produkte zu kaufen. Sie wissen, welches Produkt sie sich wünschen und welche Eigenschaften und Parameter es haben sollte. Ihr einziges Ziel ist es, das Produkt so schnell wie möglich zu finden und es zu bestellen. Für diese Art von Nutzer sind die effiziente Suche und ein optimierter Kaufvorgang wichtig.
2. Forschende Besucher. Diese Kunden wissen mehr oder weniger, was sie sich wünschen. Ihr Ziel ist es, so viele Informationen wie möglich über die Produkte herauszufinden und entscheiden erst dann, was sie kaufen. Ihr Entscheidungsprozess dauert länger, aber sie ändern oft ihren Fokus beim Kauf und die optimierte Suche kann ihr Verhalten beeinflussen.
3. “Stöbernde” Besucher. Sie besuchen oft ihre liebsten Online-Shops, um herauszufinden, was es Neues gibt, ohne etwas kaufen zu wollen. Sie sind neugierig, sehen sich gerne neue Inhalte an und denken darüber nach, was sie in der Zukunft kaufen möchten.

Interessanter Fakt: Besuchergruppen, die die Suche verwenden, haben meist ein bestimmtes Verhalten. Solche Nutzer nutzen die Suche oft als schnellen Weg zu einer bestimmten Kategorie, anstatt eine komplexe, mehrstufige Navigation zu nutzen.

Jedoch kennen Nutzer meist den genauen Kategorienamen nicht, sie wissen nur, welche Produkte sie enthält. Dann verwenden sie meist die Suche, um mehr Produktdetail zu erhalten (die sich in der gewünschten oder einer ähnlichen Kategorie befinden). Ihr Ziel ist, das gewünschte Produkt anhand von Brotkrümeln zu finden.

💡 Praktischer Hinweis:
Die Suche ist nicht nur ein Designelement, sondern hat einen erheblichen Einfluss auf die Erfüllung der Kundenbedürfnisse. Damit die Suche gleich effizient oder effizienter als das Navigationsmenü ist, muss sie mindestes folgende Bedingungen erfüllen:

• Das Suchfeld muss einfach zugänglich und immer sichtbar sein.
• Sie muss schnell auf jede Änderung in der Anfrage reagieren.
• Die Auto-Vervollständigung sollte schon ab dem ersten eingegebenen Zeichen Ergebnisse anzeigen.
• Die Suche sollte Tippfehler, verschiedene Wortformen und Konjugation erkennen können.
• Produktvarianten sollten schon als Auto-Vervollständigung angezeigt werden.
• Sie sollte Synonyme erkennen und empfehlen, sowie Phrasen vorschlagen.
• Sie sollte alle Webseiteninhalte (Produkte, Kategorien, Markierungen, Textseiten, Artikel etc.) beinhalten.
• Relevante Filter (Facetten) für aktuelle Ergebnisgruppen sollten in den Suchergebnissen verfügbar sein.

Warum die Drei-Klick-Regel keinen Sinn macht

Die Drei-Klick-Regel besagt:

„Der Zugriff auf eine beliebige Seite auf einer Webseite sollte nicht mehr als 3 Klicks erfordern (Taps auf einem Touchscreen). Oder die wichtigsten Informationen sollten innerhalb von 3 Klicks erreichbar sein.“

Diese Regel nimmt an, dass Nutzer frustriert sind und Aufgaben, die mehr Klicks erfordern, nicht abschließen.

Jedoch ist es eine inoffizielle Heuristik, die von keinen Daten gestützt wird. Dennoch wenden Entwickler diese Regel bei der Erstellung der Webseitennavigation, Suche und Formulare etc. oft an.

Das Zählen von Klicks ist aus mehreren Gründen keine bedeutsame Metrik:

1. Die Anzahl der benötigten Klicks hängt nicht nur von dem Design ab, sondern auch von der Komplexität der Aufgabe. Deshalb können wir einen Klick nicht als spezifischen, absoluten Wert definieren.
2. Nicht alle Klicks sind gleich, manche haben beispielsweise längere Wartezeiten (wenn eine neue Seite geladen wird) und andere laden vielleicht sofort.
3. Die Anzahl der Klicks wirkt sich nicht auf das Nutzerverhalten aus. In der echten Welt müssen Nutzer nicht alles verstehen und machen oft Fehler. Deshalb verliert das Zählen von Klicks seine Bedeutung.

💡 Praktischer Hinweis:
Viele Aspekte des Designs tragen zur Nützlichkeit bei und indem komplexe Vorgänge und Aufgaben in mehrere Teile aufgespalten werden, wird die geistige Belastung der Nutzer reduziert und sie erhalten eine viel bessere und vor allem eine weniger frustrierende Erfahrung.

Wie man eine effiziente Hauptnavigation entwirft

Es ist wichtig, zu verstehen, dass Sie nur mit dem Navigationsdesign starten können, nachdem eine klare Informationsarchitektur erstellt wurde. Sie stellt die Basis aller Navigationselemente auf der Webseite oder in dem Online-Store dar. Sie müssen sich nur darauf konzentrieren, sie so nützlich wie möglich zu machen.

Wie man das Navigationsmenü optimiert

Verstecken Sie die Navigation nicht, wenn es nicht sein muss

Bei der Entwicklung der Navigation dürfen Sie nicht vergessen, dass Nutzer immer sehen können, was ihnen am wichtigsten ist. Diese einfache Regel gilt nicht nur für die Navigation, sondern auch für andere Inhalte. Bei der Entwicklung der Navigation möchten Designer oft so viel Platz wie möglich sparen und verwenden oft reaktive und mobile Navigationselemente wie das Hamburger-Menü, selbst wenn das nicht notwendig ist und riskieren, dass Nutzer die Navigation überhaupt nicht nutzen. Wir müssen beachten, dass Nutzer eine Funktion nicht verwenden können, wenn sie sie nicht sehen können. Wenn wir die Navigation verstecken, verlängern wir ihre Reise nur und machen sie komplizierter.

Platzieren Sie die Navigation und Navigationselemente dort, wo Nutzer sie erwarten

Nutzer nehmen oft an, dass sich die Navigation an einem bestimmten Platz befindet. Machen Sie die Browsing-Erfahrung einfacher für sie und platzieren Sie Elemente an der erwarteten Stelle – in der Kopfzeile, der Seitenleiste oder der Fußzeile.

Trennen Sie die Navigation visuell von anderen Inhalten

Die Navigation sollte nicht wie alle anderen Inhalte aussehen, sie sollte getrennt sein und hervorstechen. Verwenden Sie weiße Punkte, spielen Sie mit der Typografie und setzen Sie auf jeden Fall Farben ein. Das Ziel ist, klar zu definieren, wo die Navigation beginnt und endet.

Vermeiden Sie es, anderen Items das gleiche Design wie der Schaltflächen zu geben

Die Schaltflächen haben spezifische Funktionen, die wir bereits besprochen haben. Die Verwendung der Schaltflächen als Navigationspunkte unterbricht die Hierarchie der Navigationselemente auf der Seite und es verschlechtert die allgemeine Lesbarkeit der Navigation.

Verwenden Sie klare und deskriptive Itemnamen

Die Namen der Navigationsitems können den Entscheidungsprozess des Nutzers beeinflussen, während er auf einer Webseite unterwegs ist. Die Namen müssen klar, unmissverständlich und kurz sein. Sie müssen das Ziel genau benennen, wo die Items hinführen und vor allem eine verständliche Sprache verwenden. Bei der Erstellung der Namen für die Informationsarchitektur und der Navigationsitems müssen Sie oft die richtigen Entscheidungen treffen können.

💡 Praktischer Hinweis:
Wie sollten Sie die Hauptproduktkategorien in einem Online-Shop nennen, der Kleidung verkauft: Schuhe, Schuhwerk oder Fußbekleidung? Der Google-Schlüsselwortplanner und Google Trends helfen Ihnen bei der Entscheidungsfindung. Dank dieser Tools werden Sie die richtige Wahl treffen und die Kategorie „Schuhe“ nennen. Diese Tools helfen Ihnen, relevante Namen für Ihr Zielpublikum zu finden.

💡 Praktischer Hinweis:
Online-Stores haben oft Kategorien mit unterschiedlichen Inhalten, aber demselben Namen. Ein gutes Beispiel ist eine Kategorie namens “PlayStation 5”. Diese Kategorie kann in verschiedenen Orten angezeigt werden, zum Beispiel als Unterkategorie für den Konsolen-Bereich, aber auch bei Spielen und Accessoires.
Solche Kategorien haben vielleicht einen negativen Einfluss, wenn Sie keine gut optimierte Suche haben. Beispielsweise wenn die Anfrage „PlayStation 5“ dreimal die gleiche Kategorie mit verschiedenen Inhalten anzeigt. Es könnte den Nutzer auch verwirren, wenn er von einem anderen Ort als der Startseite zu einer der Kategorien gelangt, z.B. von der Google-Suche oder Werbungen.

Obwohl den Kunden die Seite oder Kategorie mit dem richtigen Namen angezeigt wird, sind sie vielleicht nicht mit dem Inhalt zufrieden.

Schränken Sie die Anzahl der Top-Level-Items ein

Beschränken Sie die Anzahl der Top-Level-Navigationsitems auf so wenige wie möglich. Marktstudien erwähnen oft die magische Zahl sieben als ideal (max. neun). Ein weiterer Ansatz ist, dass die Top-Level-Items maximal 50-70% des Platzes auf einer Webseite einnehmen sollten. Der Rest sollte für saisonale Produkte, Promotionen oder neue Produkte vorbehalten werden.

Die Webseitennavigation sollte das Bedürfnis nach Interaktion verringern, beispielsweise die Mühen, die Nutzer aufwenden müssen, um mit der Webseite zu interagieren. Es gibt zwei gute Gründe, die Anzahl der Top-Level-Items in der Navigation einzuschränken:

• Dadurch verstehen Nutzer die Navigationsinterface besser. Je mehr Navigationsitems Sie haben, desto schwieriger fällt es Nutzern, sich an die Informationen zu erinnern und sie zu verarbeiten.
• Eine einfache und klare Navigation mit weniger Items hat einen positiven Einfluss auf die Suchmaschinenoptimierung.

💡 Praktischer Hinweis:
Bei der Entwicklung der Navigation und der Wahl der Top-Level-Items sollten Sie die Gewohnheiten und Bedürfnisse der Webseitennutzer in Betracht ziehen. Ermöglichen Sie es ihnen zum Beispiel, mit einem Klick auf das Logo von jedem Bereich der Webseite auf die Startseite zugreifen zu können.

Wie ich jedoch bereits erwähnt habe, erwartet nicht jeder Nutzer, die Startseite zu erreichen, wenn er auf das Logo klickt. Deshalb ist es empfehlenswert, ein Item namens „Start“ zu der Hauptnavigation hinzuzufügen. Die Kontaktinformationen sind ein weiteres essentielles Navigationsitem und diese Seite ist eine der am häufigsten besuchten.

Besucher verwenden sie meistens, um die Vertrauenswürdigkeit eines Unternehmens zu überprüfen, um herauszufinden, wo sich physische Geschäfte befinden und ob sie zum Beispiel in ihrer Nähe sind.

Die Struktur sollte prägnant sein

Es ist nicht nur die Anzahl der Items in der Navigation wichtig, sondern auch ihre Anordnung. Bei der Entwicklung der Navigation ist es sinnvoll, die Items nach Priorität zu sortieren. Beginnen Sie mit der höchsten und schließen Sie mit der geringsten Priorität. Achten Sie jedoch auch auf den Serien-Positionseffekt, in dem die effizientesten Items am Anfang oder am Ende platziert werden (unser Gehirn kann besser mit diesen Items umgehen, als mit denen in der Mitte der Navigation). Deshalb sind die Items am Anfang und am Ende der Navigation für Nutzer bedeutender.

Vergessen Sie die Suche nicht

Die Suche ist eine der wichtigsten Navigationselemente. Nutzer erwarten, dass sie sich in der Nähe der Hauptnavigation befindet, wo sie als sekundäres Navigationselement dient. Wenn Sie die Suche verstecken oder an einer unguten Stelle platzieren, könnten Sie einen erheblichen Teil der Umsätze verlieren. Bis zu 40% der Besucher verwenden die Suche auf der Startseite und diese Nutzer wissen meist, was sie wollen und haben einen Kaufwunsch.

Verwenden Sie keine Drop-Down-Menüs

Drop-Down-Menüs sind eine unglückliche Lösung für die Anzeige von Unterpunkten auf einer niedrigen Stufe in dem Navigationsmenü. Hauptsächlich da die Anzahl der Items sich meist schnell ändert und anwächst. Dann ist es oft der Fall, dass Items nicht richtig angezeigt werden (sie passen nicht auf den Bildschirm). Ein weiterer Nachteil von Drop-Down-Menüs ist, dass man nicht bequem auf zusätzlichen Unterstufen stöbern kann.

💡 Praktischer Hinweis:
Eine standardmäßige und effektive Lösung ist das Mega-Menü – eine große Navigationsleiste, die erscheint, nachdem man die Maus über das Hauptnavigationsitem bewegt hat.

Das ist eine großartige Designoption, wenn Sie eine große Anzahl an Items in der Struktur der Produktkategorien platzieren oder mehr Unterseiten auf niedrigeren Stufen anzeigen müssen.

Solch ein Layout ermöglicht es Ihnen auch, den Platz effizienter zu verwenden, zum Beispiel um Produkte oder Werbungen anzuzeigen und es verbessert die Nutzererfahrung (mehr Platz für Produkte, eine klare Struktur und Hierarchie).

Analysieren Sie, wie Nutzer sich Menüpunkte ansehen

Der Entwicklungsprozess der Navigation endet nicht mit der Implementierung. Es ist wichtig, zu überprüfen, ob Nutzer die entwickelte Navigation praktisch einsetzen können. Dies können Sie testen, indem Sie verschiedene Tools und Methoden so verwenden, wie es Nutzer tun.

Schon vor der Implementierung können Sie die Funktionalität der entworfenen Navigation mithilfe der Kartensortiermethode oder einem einfachen Baumtest austesten.

Eines der gängigsten Tools ist Google Analytics (Bereich „Verhalten/Verhaltensfluss“).

Die Interaktion zwischen den Nutzern und der Navigation kann effizient mit Tools wie Hotjar, Smartlook oder Clarity evaluiert werden. Diese Tools erlauben es Ihnen, sowohl quantitative (Seitenklicks, Mausbewegungen oder Scrolling) als auch qualitative Daten (Videoaufzeichnungen) zu sammeln. Mit diesen Tools und Vorgehensweisen können Sie helfen, den derzeitigen Status Ihrer Navigation und ihre Struktur weiter zu verbessern. Ändern Sie zum Beispiel die Anordnung der Items in der Hauptstufe, bearbeiten Sie die Namen etc.

Bei jeder Analyse ist es gut, mehr Methoden zu verwenden und sich nicht nur auf Outputs von einer einzigen Quelle zu verlassen. Keine ist so genau wie Sie erwarten und keine sagt Ihnen, warum Nutzer sich auf eine bestimmte Weise verhalten (Sie können die Konsequenzen erfahren, aber nicht den Grund).

Optimieren Sie das Menü nicht nur basierend auf der Startseite

Standardmäßig stellt die Startseite nur etwa 30% der gesamten Besuche auf einer Webseite oder in einem Online-Store dar. Die verbleibenden 70% des Traffics kommen von anderen Seiten, die Nutzer besuchen, zum Beispiel die organische Suche, Werbung, soziale Netzwerke etc. Deshalb ist es wichtig, dass die Navigation auf jeder Unterseite intuitiv ist. Die einfachste Methode, dies zu erreichen, ist, die beliebtesten Unterseiten zu finden, zum Beispiel mithilfe von Google Analytics und die Navigation basierend auf dem Nutzerverhalten auf diesen Seiten zu optimieren.

Ein reaktives mobiles Navigationsmenü

Es gibt bereits bewiesene Muster und Standards für eine reaktive mobile Navigation. Sie können in einem Wort zusammengefasst werden: „Hamburger-Icon“. Das ist ein Icon, das aus drei kurzen horizontalen Linien besteht, die das Hauptmenü darstellen. Standardmäßig erscheint es in der oberen rechten Ecke einer mobilen Webseite. Wenn man darauf klickt, wird das Navigationsmenü angezeigt.

Obwohl das Burger-Icon zu dem dominanten Standard geworden ist, hilft es Nutzern trotzdem, zu navigieren und die Bedeutung einer versteckten Navigation besser zu verstehen, wenn Sie das Wort „Menü“ hinzufügen.

Entwickler verwenden das mobile Menü oft unnötigerweise und versuchen, das Design so reaktiv wie möglich zu machen. Der Schlüssel zum Erfolg ist, die essentiellen Navigationsitems so lange wie möglich anzuzeigen und keine Angst davor zu haben, sie mit dem Burger-Menü zu kombinieren.

Beispielsweise können Sie der Suchbox einen Platz auf dem Bildschirm geben und gleichzeitig eine Schaltfläche mit einem Handlungsaufruf für die wichtigste Handlung anzeigen, während andere Items wie Kontaktinformationen in dem mobilen Menü versteckt bleiben. Stellen Sie sicher, dass die Telefonnummer sich in der mobilen Ansicht in einen klickbaren Text verwandelt.

💡 Praktischer Hinweis:
Stellen Sie sicher, dass die mobile Version Ihrer Webseite:

• Ausreichend große Navigationselemente hat, auf die man leicht klicken kann. Einfach klickbare Items sollte mindestens 9 Quadratillimeter breit sein. Größere Bereiche sind für die meisten Nutzer unangenehm.
• Alle Labels und Texte sollten gut lesbar sein. Eine Textgröße von 16 Pixel sollte in den meisten Fällen ausreichen – das ist die Standardeinstellung. In dem Fall von kleineren Schriftgrößen riskieren Sie es, die Nutzererfahrung zu verschlechtern.

Die Optionen in dem Hamburger-Menü hängen von der Art und Komplexität der Webseite ab. Ein einfaches Menü mit den angezeigten Items reicht auf einer gewöhnlichen Präsentationswebseite aus. Auf Webseiten mit einer Menge Inhalt und Informationen oder in Online-Stores, kann sogar das Hamburger-Menü komplexer sein.

Es ist strukturiert, enthält meist Drop-Down-Items, um niedrigere Stufen anzuzeigen und wird oft in Kombination mit anderen mobilen Navigationselementen verwendet.

A typical mobile navigation element, which complements the hamburger menu, is the bottom navigation bar.

This bar appears at the bottom of the screen and contains key navigation items or buttons. In online stores, it may be a shopping cart, favorite products, and more.

Auf Webseiten oder Apps sind das die Punkte für häufige und wiederholte Handlungen (wie Kontobewegungen oder Senden von Geld in Bank-Apps).

Conclusion

Navigation should be usable in the first place. Just then, creative. Try to follow the guiding principles described above, and your customers will always find what they need. Usability and clarity are priorities that will remain the same in the future.