Die Navigation und ihre Elemente
In einer idealen Welt würde jeder Nutzer und jede Nutzerin auf der Startseite beginnen und die geplante Route zur Conversion folgen.
Jedoch sieht die Realität etwas anders aus, denn Nutzer/innen 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 Onlineshop 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 Onlineshop. Deshalb ist es notwendig, die Verbindung zwischen der Navigation und ihren Elementen mit dem Nutzererlebnis zu verstehen.
Effiziente Navigationselemente sollten:
- sichtbar sein,
- die derzeitige Position des Nutzers bzw. der Nutzerin auf der Webseite kommunizieren,
- den Nutzer bzw. die Nutzerin leiten können,
- benutzerfreundlich sein.
Grundlegende Navigationselemente
Navigationsmenü
Nutzer stellen sich die Hauptnavigation auf einer Webseite oder in einem Onlineshop 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/innen 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ü Erweiterungsitems enthält, ist es besser, die Items des Erweiterungsmenüs (Mega-Menü) durch "Hovern" zu aktivieren als über einen Klick auf das Item. Jedoch müssen Sie auch über die möglichen Mausbewegungen nachdenken. Oft erweitern Nutzer/innen unabsichtlich Items, die sie sich gar nicht ansehen wollten.
“Klebende” Kopfzeile
Eine klebende Kopfzeile wird meist verwendet, um die Aufmerksamkeit der Nutzer/innen auf die Kopfzeile (Hauptbereiche mit Navigationselementen) zu lenken. Diese Kopfzeile befindet sich immer an der gleichen Stelle und ist auch beim Scrollen auf der Seite sichtbar. So können Besucher/innen schnell auf die Navigation und die Suchelemente zugreifen, ohne zu scrollen. Dies steigert die Wahrscheinlichkeit, dass Nutzer/innen 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 bzw. die Nutzerin zu scrollen beginnt. Sie bietet mehr Raum, um sich Inhalte anzusehen (besonders auf mobilen Geräten) und zeigt die richtigen Tools an, wenn Nutzer/innen sie brauchen.
Startseite und Logo
Eines der wenigen Dinge, auf die sich Nutzer/innen verlassen können, ist, dass jede Webseite eine Startseite hat, die als Startpunkt angesehen wird und Informationen, sowie eine Einleitung anbietet, was der Nutzer/die Nutzerin auf der Seite finden kann. Diese Informationen sind besonders für Besucher/innen 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 Shop 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.
Webseiten und Onlineshops sind jedoch für ein breiteres Publikum gedacht. Haben alle Besucher/inne das gleiche technologische Verständnis? Wenn Sie einen zusätzlichen Punkt mit dem Namen "Start" einfügen, werden es viele Nutzer/innen 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 bzw. die Nutzerin zu der Kategorie auf dem höchsten Niveau geht, sieht er/sie in der Seitenleiste all seine Unterkategorien.
Die Navigationselemente in der Seitenleiste sind eine gute Lösung für Onlineshops 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 Onlineshop (z.B. indem Mausbewegungen getrackt werden), fällt Ihnen wahrscheinlich auf, dass Nutzer/innen im Browser meist den Zurück-Pfeil nutzen, anstatt einfach zu der Eltern-Kategorie zurückzugehen. Wenn Sie das wissen, können Sie Ihren eigenen Zurückpfeil in der Seitenleiste mit Unterkategorien platzieren, um das Browsing auf Ihrer Seite einfacher zu machen.
Fußzeile
Den untersten Bereich jeder Webseite und jedes Onlineshops 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/innen 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/eine Nutzerin das Ende der Seite erreicht, ist er wahrscheinlich an Ihren Inhalten interessiert.
Beispielsweise besuchen Nutzer/innen 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 Nutzer/innen relevant sind. 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 Onlineshops. Sie ist eines der wenigen Navigationselemente, die die derzeitige Position des Nutzers/der Nutzerin auf der Webseite anzeigt.
Brotkrümel sind ein wichtiges Navigationselement für alle Nutzer/innen. Wenn wir diese Gruppe jedoch weiter einschränken, würden wir uns hauptsächlich auf Nutzer/innen konzentrieren, die nicht über die Startseite auf die Webseite gekommen sind (Organische Suche, Werbungen, geteilte Links) oder die Suchfunktion des Onlineshops 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 das Nutzererlebnis verbessern möchten, müssen Sie es dem Nutzer bzw. der Nutzerin ermöglichen, sich andere Kategorien auf dem gleichen Hierarchie-Niveau anzusehen. Dadurch erhält er/sie mehr Möglichkeiten, neue Inhalte zu entdecken.
Schaltflächen und Links
Schaltflächen und Hyperlinks sind gängige Navigationselemente, auf die Nutzer/innen ü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 bzw. die Nutzerin auf der Webseite leiten oder ihm/ihr den Weg zu einem bestimmten Ziel zeigen (Conversion).
Das können wir vereinfachen und sagen, dass Schaltflächen Handlungen definieren, die sich auf irgendeine Weise auf die Webseite oder den Onlineshop 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 das Nutzererlebnis 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 das Nutzerererlebnis. 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/eine Nutzerin verwirren, da er/sie 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/innen die Suche anstelle des Navigationsmenüs?”
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.de/forschung-und-berichte herunterladen.
Suche und Nutzer/innen
Wenn wir uns nur auf die Startseite konzentrieren, sehen wir, dass bis zu 40 % der Nutzer/innen des gesamten Traffics die Suche dem Navigationsmenü vorziehen.
Ob ein Nutzer bzw. eine Nutzern, der/die auf die Startseite kommt, sich entscheidet, zu suchen oder sich das Navigationsmenü anzusehen, hängt von der Art von Nutzer (Verbraucher) ab.
Jeder Nutzer bzw. jede Nutzerin, der/die den Onlineshop besucht, verhält sich anders und hat andere Motivationen. Diese Nutzer/innen können wir in 3 Hauptarten unterteilen und sie verallgemeinern.
- Besucher/innen, deren Ziel es 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.
- Forschende Besucher/innen. Diese Kund/innen 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.
- “Stöbernde” Besucher/innen. Sie besuchen oft ihre liebsten Onlineshops, 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/innen nutzen die Suche oft als schnellen Weg zu einer bestimmten Kategorie, anstatt eine komplexe, mehrstufige Navigation zu nutzen.
Jedoch kennen Nutzer/innen 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 mindestens 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 Autovervollstä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 Autovervollstä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/innen 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/innen 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:
- 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.
- Nicht alle Klicks sind gleich, manche haben beispielsweise längere Wartezeiten (wenn eine neue Seite geladen wird) und andere laden vielleicht sofort.
- Die Anzahl der Klicks wirkt sich nicht auf das Nutzerverhalten aus. In der echten Welt müssen Nutzer/innen 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/innen 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 Onlineshop 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/innen 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/innen 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/innen die Navigation überhaupt nicht nutzen. Wir müssen beachten, dass Nutzer/innen 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/innen sie erwarten.
Nutzer/innen nehmen oft an, dass sich die Navigation an einem bestimmten Platz befindet. Machen Sie das Browsing-Erlebnis 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 bzw. der Nutzerin 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 diesem Prozess sind semantische Regeln sehr wichtig, da sie garantieren, dass die Namen verschiedener Items ihren Zweck und Standort genau widerspiegelt, sodass Nutzer/innen eine intuitive Navigation erhalten. 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 Onlineshop nennen, der Kleidung verkauft: Schuhe, Schuhwerk oder Fußbekleidung? Der Google-Schlüsselwortplanner und Google Trends helfen Ihnen bei der Entscheidung. 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: - Onlineshops 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 bzw. die Nutzerin auch verwirren, wenn er/sie von einem anderen Ort als der Startseite zu einer der Kategorien gelangt, z.B. von der Google-Suche oder Werbungen.
Obwohl den Kund/innen 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/innen 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/innen das Navigationsinterface besser. Je mehr Navigationsitems Sie haben, desto schwieriger fällt es Nutzer/innen, 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/innen 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 und jede Nutzerin, die Startseite zu erreichen, wenn er/sie 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/innen 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/innen bedeutender.
Vergessen Sie die Suche nicht
Die Suche ist eine der wichtigsten Navigationselemente. Nutzer/innen 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/innen verwenden die Suche auf der Startseite und diese Nutzer/innen 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 das Nutzererlebnis (mehr Platz für Produkte, eine klare Struktur und Hierarchie).
Analysieren Sie, wie Nutzer/innen sich Menüpunkte ansehen
Der Entwicklungsprozess der Navigation endet nicht mit der Implementierung. Es ist wichtig, zu überprüfen, ob Nutzer/innen 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 Nutzer/innen 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/innen 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 Onlineshop dar. Die verbleibenden 70 % des Traffics kommen von anderen Seiten, die Nutzer/innen 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/innen 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 sollten mindestens 9 Quadratillimeter breit sein. Größere Bereiche sind für die meisten Nutzer/innen 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, das Nutzererlebnis 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.
Ein typisches mobiles Navigationselement, das gut zu dem Hamburger-Menü passt, ist die Navigationsleiste unten.
Diese Leiste erscheint unten auf dem Bildschirm und enthält wichtige Navigationsitems oder Schaltflächen. In Onlineshops könnte das der Warenkorb, beliebte Produkte und mehr sein.
Auf Webseiten oder Apps sind das die Punkte für häufige und wiederholte Handlungen (wie Kontobewegungen oder Senden von Geld in Bank-Apps).
Fazit
Die Navigation sollte vor allem nützlich sein. An zweiter Stelle kann sie auch kreativ sein. Versuchen Sie die oben beschriebenen Richtlinien zu befolgen und Ihre Kund/innen werden immer das finden, wonach sie suchen. Die Nutzbarkeit und Klarheit sind jetzt und zukünftig Prioritäten.
Verwandte Seiten und Beiträge
Sie möchten noch tiefer einsteigen? Entdecken Sie hier weitere Inhalte rund um E-Commerce und Luigi’s Box.
3.02 Produktauflistung – Facettenanpassung
Schneiden Sie die Kategoriefilter auf Ihren Shop zu, passen Sie die Anordnung und die angezeigten Werte an, um für Ihre Kund/innen ein reibungsloses Kauferlebnis zu kreieren.
Die Kraft der effektiven Suche und Navigation auf Webseiten
Finden Sie heraus, wie die Webseitensuche und Navigation funktionieren und wieso die beiden eine großartige Nutzererfahrung ermöglichen können.
Hierarchische Facetten
Lukáš ist ein leitender UX-Designer bei Luigi's Box und hat über ein Jahrzehnt lange Erfahrung in Web-Anwendungen, eCommerce-Lösungen und Marketingkommunikation. Er ist Mitglied der Slowakischen Nutzererfahrungsvereinigung (SUXA) und nimmt an der Initiative "Humans of UX" und der Organisation des Slowakischen Weltnutzungstages teil.
Mehr Blogbeiträge von diesem Autor