So erstellen Sie eine effektive Navigation für Ihren Online-Shop

Ein gutes Navigationssystem hilft Kunden, schnell und effizient zu finden, wonach sie suchen, und verbessert den Gesamterfolg Ihres Geschäfts. Tatsächlich hat Ihre Website nur wenige Sekunden, um die Aufmerksamkeit eines Website-Besuchers zu erregen, sodass Sie ihn besser sofort zu den Informationen führen, die er benötigt!

Selbst kleine Unterschiede in Ihrer primären Navigation können die Fähigkeit Ihrer Kunden, Produkte zu finden, die ihren Bedürfnissen entsprechen, erheblich beeinträchtigen. Wenn sie nicht wissen, was sie tun oder wohin sie gehen sollen, wenn sie auf Ihre Website gelangen, verlassen sie sie schnell und kaufen woanders ein.

Aber wie können Sie eine effektive Navigation für Ihren Online-Shop erstellen, die den Umsatz steigert und die Absprungrate senkt?

Best Practices für das Navigationsmenü

1. Verwenden Sie eine klare und aussagekräftige Sprache

Wenn es um Ihr primäres Navigationsmenü geht, das sich normalerweise in der Kopfzeile Ihrer Website befindet, stellen Sie sicher, dass Ihre Beschriftungen klar und aussagekräftig sind. Ein Website-Besucher sollte genau wissen, welche Produkte in einer Kategorie sind oder welche Informationen er findet, wenn er auf ein Dropdown-Menü klickt, indem er einfach das Etikett liest. Es mag verlockend erscheinen, mit Ihren Formulierungen kreativ zu werden, aber das könnte Ihre Kunden nur verwirren, anstatt sie zum Klicken zu verleiten.

Zum Beispiel ist das primäre Navigationsmenü auf fixjeiphone.nl sowohl klar als auch aussagekräftig. Sie erhalten eine fantastische Vorstellung davon, welche Inhalte oder Produkte auf jeder Seite enthalten sein werden, bevor Sie auf ein bestimmtes Element klicken.

Die Punkte im Navigationsmenü beziehen sich auch direkt auf die Bedürfnisse der Kunden von FixjeiPhone. Sie wissen, dass Menschen ihre Website besuchen, um Teile oder Zubehör zu kaufen, Handbücher für Telefone zu lesen oder ein generalüberholtes Gerät zu kaufen. Jeder Menüpunkt basiert auf diesen spezifischen Anforderungen, sodass Website-Besucher sofort wissen, wo sie klicken müssen.

2. Machen Sie Elemente der obersten Ebene anklickbar

Einige Websites haben Navigationselemente auf oberster Ebene, die nur ein Dropdown-Menü auslösen, anstatt auch auf eine neue Seite zu verlinken. Dies kann jedoch für Website-Besucher verwirrend sein, insbesondere wenn sie aus irgendeinem Grund Probleme haben, das Dropdown-Menü zu öffnen.

Wenn Sie Produktkategorien in Ihrem Menü auflisten, sollten Sie erwägen, das Element der obersten Ebene mit Ihrer primären Kategorieseite zu verknüpfen und Unterkategorien in Dropdown-Menüs aufzunehmen. Dies gibt Benutzern auch mehr Möglichkeiten, genau das zu finden, wonach sie suchen, oder ganze Kategorien zu durchsuchen.

Absoluteantibody.com erledigt dies effektiv. Wenn Sie im Hauptnavigationsmenü auf „Antibody Resource“ klicken, gelangen Sie zu allen Informationen über Antikörper. Oder Sie können auf spezifischere Ressourcen klicken, die in der Dropdown-Liste hervorgehoben sind.

3. Fügen Sie Dropdown-Indikatoren hinzu

Absolutelyantibody.com und fixjeiphone.nl implementieren auch Dropdown-Indikatoren in ihren Navigationsmenüs.

In der Regel fügen Dropdown-Indikatoren neben jeder Navigationsbezeichnung einen Pfeil hinzu, um anzuzeigen, dass das Menüelement erweitert wird. Sie helfen Website-Besuchern zu verstehen, dass es mehr Optionen gibt, ohne dass sie mit der Maus über jedes einzelne Element fahren müssen.

Dies ist oft eine Option in Ihren Designeinstellungen, aber Sie können auch ein Plugin wie Menüsymbole verwenden oder Ihren Website-Code bearbeiten.

4. Halten Sie sich an Standardstandorte

Wenn Sie mit Ihrem Website-Design kreativ werden, können Sie sich von der Masse abheben. Aber wenn Kreativität Verwirrung stiftet, könnten Sie sowohl Kunden als auch Verkäufe verlieren.

Es ist eine gute Idee, Ihr Navigationsgerät an einem Ort zu platzieren, an dem die Leute es erwarten. Eye-Tracking-Studien zeigen, dass Website-Besucher zuerst nach oben links auf eine Seite schauen. Behalten Sie also Ihre Hauptnavigation in Ihrer Kopfzeile bei und platzieren Sie die wichtigsten Elemente, wie die Startseite, auf der linken Seite.

Benutzer schauen auch auf die Fußzeile und die Seitenleiste für die Navigation. Erwägen Sie, in Ihrer Fußzeile auf wichtige Seiten zu verlinken, zusammen mit Ihren Rückgaberichtlinien und -bedingungen. Auf Ihren Produkt- und Kategorieseiten möchten Sie möglicherweise eine Seitenleiste mit Links zu verwandten Produkten, zusätzlichen Kategorien und häufig gestellten Fragen einfügen.

Während „Hamburger“-Menüs (die erweitert werden, wenn Kunden auf ein dreizeiliges Symbol klicken) hervorragend zur Vereinfachung mobiler Menüs geeignet sind, könnten sie auf Desktop-Computern verwirrend sein.

Da das Symbol so klein ist und normalerweise in der Ecke versteckt ist, kann es leicht verloren gehen oder von Website-Besuchern übersehen werden. Es zeigt auch nicht Ihre wichtigsten Menüpunkte und erfordert, dass Besucher einen weiteren Schritt machen, bevor sie finden, wonach sie suchen.

Wie man Breadcrumbs verwendet und warum Sie sollten

Breadcrumbs sind sekundäre Navigationssysteme, die den Standort eines Benutzers auf einer Website anzeigen. Der Name stammt von der Geschichte von Hänsel und Gretel, die Brotkrümel fallen lassen, um den Weg zurück durch den Wald zu finden. Diese Navigationsmethode ist besonders hilfreich, wenn Sie viele Seiten oder Produkte haben.

Ein Breadcrumb-Menü wird normalerweise unter Ihrer primären Navigation direkt über dem Inhalt Ihrer Website angezeigt. Dies macht es Ihren Website-Besuchern leicht, sie zu verwenden, ohne scrollen zu müssen.

Die Craft Can Directory-Website verwendet Breadcrumbs, um ihren Kunden die Seite zu zeigen, auf der sie sich befinden, und wie sie zu ihrem Ausgangspunkt zurückkehren können. Auf diese Weise können sie nur eine Seite zurückgehen oder sogar mehrere Seiten überspringen, ohne mehrmals auf die Schaltfläche „Zurück“ des Browsers klicken zu müssen.

Dies ist auch nützlich, wenn ein Käufer Produkte durchsucht oder Artikel vergleicht. Wenn sie eine Kiste Bier kaufen möchten, aber die Optionen in der angezeigten Kategorie nicht mögen, können sie einfach zurück zur Kategorie „Gemischte Kisten“ klicken, um andere Optionen anzuzeigen.

Warum Semmelbrösel wichtig sind

Breadcrumbs verhindern, dass Ihre Kunden auf Ihrer Website verloren gehen. Ohne sie ist es für jemanden viel schwieriger, zu vorherigen Seiten oder Kategorien zurückzunavigieren. Stattdessen müsste sich ein Kunde erneut durch Ihr Hauptmenü klicken, nach einer Seite suchen oder den „Zurück“-Button verwenden.

Google liebt Breadcrumbs auch, weil sie helfen, die Struktur und Hierarchie Ihrer Website zu skizzieren. Breadcrumbs können sogar in die Suchmaschinenergebnisse aufgenommen werden, was die Wahrscheinlichkeit erhöht, dass potenzielle Kunden die Seiten Ihrer Website finden und darauf klicken.

So fügen Sie Breadcrumbs zu Ihrer Website hinzu:

In vielen Fällen können Breadcrumbs in Ihren Designeinstellungen aktiviert werden. Zum Beispiel hat das kostenlose WooCommerce Storefront-Design diese Funktionalität für Seiten, Produkte, Kategorien und mehr integriert.

Wenn Ihr Design keine Breadcrumbs enthält oder Sie sie weiter anpassen möchten, gibt es zwei Möglichkeiten, sie zu Ihrer Website hinzuzufügen:

1. Verwenden Sie ein Plugin:

Es gibt mehrere Plugins, mit denen Sie Breadcrumbs mit einem Klick auf eine Schaltfläche aktivieren können. Mit Jetpack können Sie beispielsweise Breadcrumbs auf Website-Seiten verwenden, jedoch nicht auf Produkt- oder Kategorieseiten.

Jedes Plugin ermöglicht unterschiedliche Anpassungsstufen und die Einrichtung ist unterschiedlich. Eine vollständige Liste der Optionen finden Sie im WordPress-Plugin-Repository.

2. Fügen Sie Breadcrumbs mit benutzerdefiniertem Code hinzu

Um WooCommerce-Breadcrumbs anzuzeigen, können Sie das <?php woocommerce_breadcrumb(); ?> Snippet, um zu steuern, wo Ihre Breadcrumbs ausgegeben werden.

Sie können auch Filter und Argumente verwenden, um Dinge wie den Breadcrumb-Trenner und den Startseitentext und -link zu steuern.

Dieses benutzerdefinierte Argument ändert das Breadcrumb-Trennzeichen sowie den HTML-Code, der vor den Breadcrumbs angezeigt wird:

 /* Change breadcrumbs separator */ <?php $args = array( 'delimiter' => '/', 'before' => '<span class="breadcrumb-title">' . __( 'This is where you are:', 'woothemes' ) . '</span>' ); ?> <?php woocommerce_breadcrumb( $args ); ?>

Dieser Filter ändert den standardmäßigen Starttext in das, was Sie angeben:

 /* Change Home Text in Breadcrumbs */ add_filter( 'woocommerce_breadcrumb_defaults', 'mm_change_breadcrumb_home_text',20); function mm_change_breadcrumb_home_text( $defaults ) { $defaults['home'] = 'Store'; return $defaults; }

Dieser Filter ändert den Home-URL-Link:

 /* Replace the home link URL */ add_filter( 'woocommerce_breadcrumb_home_url', 'woo_custom_breadrumb_home_url' ); function woo_custom_breadrumb_home_url() { return 'http://woocommerce.com'; }

Sehen Sie sich alle benutzerdefinierten Code-Snippets in den WooCommerce-Dokumenten an, um noch mehr Anpassungen vorzunehmen.

Was ist mit Mega-Menüs?

Mega-Menüs sind eine beliebte Option für Online-Shops. Sie ermöglichen es Ihnen, Ihren Kunden viele Auswahlmöglichkeiten in Ihrem Hauptmenü zu bieten und sogar Fotos oder Videos hinzuzufügen.

Aber die Art und Weise, wie Sie Ihre Inhalte und Produkte kategorisieren, ist äußerst wichtig. Sie sollten übergeordnete Kategorien, Unterkategorien und Hierarchien so verwenden, dass relevante Produkte gruppiert werden. Potenzielle Kunden finden so leichter, wonach sie suchen, und sehen verschiedene Produktsegmente und Optionen auf einen Blick.

Zum Beispiel leistet The Craft Can Directory gute Arbeit, indem es ein Mega-Menü so einsetzt, dass Anpasser zu den Produkten geführt werden, die sie anzeigen möchten.

Wenn Sie im Hauptmenü den Mauszeiger über „Craft Beer Shop“ bewegen, sehen Sie, dass übergeordnete Kategorien in Fettschrift hervorgehoben werden, während Unterkategorien in einer Hauptschrift unter jeder übergeordneten Kategorie angezeigt werden.

Wenn Kategorien nicht auf diese Weise gruppiert würden, könnte das Mega-Menü für Kunden noch verwirrender sein als ein Standard-Navigationsmenü.

Für Benutzer des Storefront-Themes bietet WooCommerce eine Mega-Menüerweiterung, um den Vorgang zu vereinfachen.

Footer-Navigation effektiv nutzen

Ihre Fußzeile sollte ein Teil Ihrer Website-Strategie sein, kein nachträglicher Einfall. Da es auf jeder einzelnen Seite und jedem Produkt Ihrer Website angezeigt wird, ist es ein wertvoller Ort, um Ihre wichtigsten Seiten zu präsentieren.

Sie sollten keine riesige, überwältigende Fußzeile erstellen, die Dutzende von Links enthält, aber es ist wichtig, den verfügbaren Platz optimal zu nutzen. Stellen Sie sich Ihre Fußzeile als Sammelbegriff vor. Wenn ein Website-Besucher den gesamten Inhalt einer Seite liest und nach unten scrollt, welche Informationen finden sie am hilfreichsten?

In einigen Fällen könnte es den Links in Ihrem Primärmenü ähneln. Wenn Sie diese Optionen zu Ihrer Fußzeile hinzufügen, können Nutzer finden, wonach sie suchen, ohne nach oben scrollen zu müssen.

Vergessen Sie jedoch nicht die Seiten und Inhalte, die Website-Benutzer in der Fußzeile eines Online-Shops erwarten. Zum Beispiel:

• Versandinformationen
• Rückgabe- und Rückerstattungsrichtlinien
• Eine Datenschutzerklärung
• Geschäftsbedingungen
• Kundendienstdetails
• Häufig gestellte Fragen
• Kontaktinformationen
• Eine Suchleiste
• Social-Media-Links

Yubico.com ist ein großartiges Beispiel für eine effektive Fußzeile. Ähnlich wie bei ihrem primären Navigationsmenü organisiert Yubico wichtige Links und Inhalte in Kategorien, um es den Besuchern ihrer Website zu erleichtern, Informationen zu finden.

Abhängig von der Größe Ihres Online-Shops benötigen Sie möglicherweise nur einige dieser Optionen. Es geht nicht um die Anzahl der Links; es geht um die Strategie dahinter.

Vergessen Sie nicht Ihre Navigation

Die Website-Navigation ist einer der am häufigsten übersehenen Aspekte eines Online-Shops und wird oft als selbstverständlich angesehen. Der erste Schritt bei der Erstellung einer effektiven Navigation besteht darin, herauszufinden, welche Elemente für Ihre Kunden am wichtigsten sind.

Wie können Sie es ihnen leicht machen, Ihre Inhalte, Produkte und Angebote zu durchsuchen? Welche Informationen wären für sie am hilfreichsten? Wenn Sie einen großen Produktkatalog haben, wäre ein Mega-Menü sinnvoll?

Denken Sie daran, wenn ein potenzieller Kunde nicht schnell findet, wonach er sucht, verlieren Sie ihn möglicherweise an einen Konkurrenten.

Möchten Sie verschiedene Versionen Ihres Menüs testen? Erfahren Sie, wie Sie Ihre Navigation A/B-testen.