Drop-down-Menüs: Mit welcher Navigation verbessern Onlineshops ihre Conversion Rate?

Drop-down-Menüs sind im E-Commerce weit verbreitet. Doch nicht immer ist dieser Aufbau der Website-Navigation nutzerfreundlich gestaltet. Im Folgenden stellen wir Ihnen verschiedene Möglichkeiten für die Menüführung im Onlineshop sowohl für die Desktop- als auch die Mobile-Version vor. Unsere acht Tipps zeigen Ihnen, wie Sie das Drop-down-Menü Ihres Onlineshops optimieren und so gleichzeitig Ihre Website nutzerfreundlicher gestalten können.

Was ist die Website-Navigation?

Die Navigationsleiste auf einer Website dient Kunden zur besseren Orientierung. Sie besteht aus Links, die User zu den wichtigsten Hauptkategorien führen. Deswegen wird sie auch responsives Menü genannt.

Es gibt mehrere Navigationselemente auf einer Website. Die gängigsten sind die folgenden:

• Das Hauptmenü führt die Inhalte der Website in hierarchisch angeordneten Kategorien auf.
• Utility navigation consists of links to secondary actions such as “shopping cart” and “login”.
• Auch Filter, mit denen sich die Suchergebnisse auf Kategorieseiten eingrenzen lassen, gehören zur Website-Navigation.
• Die Breadcrumbs zeigen Kunden an, auf welcher Seite innerhalb der Navigationsstruktur sie sich gerade befinden.
• In der Footer-Navigation befinden sich meist hilfreiche Links zu Content-Seiten, z. B. „Über uns“, sowie zum obligatorischen Impressum.

Wieso ist eine gute Website-Navigation wichtig für die Conversion Rate im E-Commerce?

Nicht nur beim physischen Einkaufserlebnis, auch im Onlinehandel gilt es, Kunden eine positive User Experience (UX) zu bieten. Dazu gehört u. a., dass sie sich schnell auf einer Website zurechtfinden. Sie erkennen auf den ersten Blick die wichtigsten Inhalte und entdecken zügig genau das, wonach sie suchen. Dafür ist eine praktische und einfache Menüführung im Onlineshop wichtig. Die Wahrscheinlichkeit für einen Kauf steigt, wenn Kunden alle Inhalte und Funktionen intuitiv finden.

Wirkt die Seite auf potenzielle Käufer dagegen unübersichtlich oder gelangen sie nicht schnell genug zum Gesuchten, springen sie ab und verlassen die Seite. Die Folge: eine hohe Absprungrate (Bounce Rate) – sowie eine niedrige Conversion Rate. In unserem Artikel zeigen wir Ihnen, wie Sie eine bessere UX durch Drop-down-Menüs und andere Navigationen schaffen und gleichzeitig die Conversion Rate Ihres Onlineshops optimieren.

Unterschiedliche Arten von Hauptmenüs: Welche Menüführungen gibt es?

Wenn E-Commerce-Unternehmen einen Onlineshop aufbauen, gilt es zunächst zu entscheiden, ob das Hauptmenü der Website vertikal oder horizontal angelegt werden soll:

• Ein vertikales Menü verläuft am linken Rand der Website von oben nach unten.
• Ein horizontales Menü verläuft im oberen Bereich der Website von links nach rechts.

Für die horizontale Navigationsleiste ist der Platz aufgrund der Bildschirmbreite begrenzt. Daher beinhaltet sie oft nur kurze Schlagwörter. Die vertikale Navigation lässt sich dagegen beliebig erweitern. Hier gilt allerding: Weniger Hauptkategorien gestalten das Menü viel übersichtlicher für die Kunden.

Im Folgenden finden Sie typische Menüführungen. Die meisten lassen sich sowohl vertikal als auch horizontal im Onlineshop darstellen.

Statische Navigation

Bei der statischen Navigation – auch Fixed Header oder Sticky Menu genannt – wird das Hauptmenü fixiert. Besucher können so durch die Seite scrollen, während die Menüpunkte stets als Navigationshilfe zu sehen bleiben. Das hat den Vorteil, dass User nicht erst wieder nach oben scrollen müssen, wenn sie den Menüpunkt wechseln möchten. Website-Betreiber sollten allerdings darauf achten, dass der Fixed Header nicht zu viel Platz einnimmt und möglicherweise wertvollen Content verdeckt.

Interaktive Navigation

Die interaktive Navigation ist für Onlineshops weniger geeignet. Hier gibt es keine typische Website-Navigation mit Links, die User von A nach B führen. Vielmehr ist das Navigieren durch die Website Teil des Erlebnisses. Besucher gelangen durch interaktive Elemente zum nächsten Abschnitt oder auf die nächste Unterseite und navigieren sich so spielerisch durch den gesamten Content.

Hamburger-Menü

Das Hamburger- oder Burger-Menü ist auch unter den Bezeichnungen Toggle Menu oder Off-Canvas-Menü bekannt. Diese Art der Menüführung entwickelte sich vor allem durch die steigende Nutzung von Smartphones. Ein Burger-Menü erkennt man an den drei horizontalen parallelen Linien, die oben links oder rechts in der Ecke angezeigt werden. Daher kommt im Übrigen auch der Name, denn die drei Linien erinnern an einen minimalistisch dargestellten Burger.

Bei der Nutzung eines Burger-Menüs sehen User zunächst ausschließlich den Content der Webseite sowie das Hamburger-Icon. Mit Klick auf das Symbol öffnet sich das Hauptmenü auf dem gesamten Display, sodass sich Kunden durch die Seite navigieren können.

Das Website-Navigations-Design mit dem Hamburger-Menü ist inzwischen auch in der Desktop-Version zu finden. Um den Käufern den zusätzlichen Klick zu ersparen, ist es jedoch vorwiegend für die mobile Variante zu empfehlen.

Drop-down-Menü

Das responsive Drop-down-Menü findet man im E-Commerce am häufigsten. Das Hauptmenü besteht hier zunächst aus den Hauptkategorien. Beim Mouseover oder Anklicken der Menüpunkte klappen sich weitere Unterkategorien aus. Diese Verschachtelung lässt sich beliebig erweitern. Grundsätzlich sind jedoch maximal zwei Drop-down-Stufen empfohlen. Macht eine besonders umfangreiche Produktpalette mehr als zwei Drop-down-Stufen erforderlich, spricht man von einem Mega-Menü.

Ein horizontales Drop-down-Menü wird auch als Pull-down-Menü bezeichnet. Das vertikale Drop-down-Menü wird auch Fly-out oder Seitenbaum genannt. Beide Formen der ausklappbaren Menüführung bieten Besuchern meist eine hohe Usability. Wer sich für ein Drop-down-Menü entscheidet, sollte sich vorher die Struktur des Contents überlegen. Ansonsten kann das Pull-down-Menü schnell unübersichtlich werden.

Mega-Drop-down: Vor- und Nachteile

Ein Mega-Menü bietet viele Vorteile für die User Experience. Es hat jedoch auch gewisse Schwachpunkte. Auch hier ist eine stringente Struktur wichtig, denn ein Mega-Menü ist nur sinnvoll, wenn die Elemente der Website-Navigationsleiste von Anfang an klar sind. Erst danach gilt es zu entscheiden, ob ein Mega-Menü diese übersichtlich darstellen kann. Die folgende Tabelle zeigt die wichtigsten Vor- und Nachteile von Mega-Menüs auf:

Vorteile von Mega-Drop-downs	Nachteile von Mega-Drop-downs
Das Angebot an Inhalten und Produkten lässt sich schnell erfassen.	Sie eignen sich nicht für die Darstellung auf Smartphones .
Es sind mehrere Ebenen von Unterkategorien abbildbar.	Das aufgeklappte Menü verdeckt oft Teile des eigentlichen Inhalts .
Eine genaue Strukturierung der Inhalte sorgt für eine bessere Übersicht.	Je nach Umfang des Mega-Menüs können Probleme bezüglich der Suchmaschinenfreundlichkeit auftreten.
Alle Menüelemente lassen sich durch Layout, Typographie und Illustrationen visuell strukturieren.	Das Menü schließt sich nach dem Klick auf den letzten Menüpunkt. Wollen User von dort die Seite wechseln, müssen sie sich jedes Mal neu bis zum gewünschten Unterpunkt durchklicken.
Auch beim Ausklappen weiterer Kategorien bleiben die zuvor geklickten Menüpunkte stehen. So müssen sich Kunden nicht an die Auswahlmöglichkeiten erinnern. Sie können sich leichter durch die Optionen klicken, bis sie das Gesuchte in der jeweiligen Kategorie finden.

Website gestalten: 8 Tipps für ein benutzerfreundliches Drop-down-Menü

Nachfolgend geben wir Ihnen Tipps, wie Sie eine gute Website-Navigation erstellen, um Ihre Conversion Rate zu verbessern. In unseren Usability-Tipps erfahren Sie zudem, wie Sie neben dem Hauptmenü für mehr Nutzerfreundlichkeit im gesamten Onlineshop sorgen.

Tipp 1: Navigation der Homepage vorab planen

Vor dem Anlegen der Menüpunkte ist es wichtig, jede Funktion und jeden Inhalt der geplanten Website genau zu kennen. Diese lassen sich meist in Haupt- und Unterkategorien einteilen. Die Kategoriebezeichnungen sollten dabei eindeutig und knapp formuliert sein. Die Begrifflichkeiten müssen sich klar voneinander unterscheiden und schnell zu erfassen sein, da Kunden die Navigationspunkte meist nur überfliegen.

Tipp 2: Nach User-Relevanz anordnen

Zu Beginn eines jeden Hauptmenüs sollten Onlineshop-Betreiber stets die Menüpunkte aufführen, die User am meisten interessieren. Für SaaS-Anbieter bietet es sich z. B. an, mit den ersten Menüpunkten zu versuchen, die Besucher von ihrem Dienst zu überzeugen, etwa in Form dieser Menüpunkte:

• Warum wir?
• Über uns
• Preise

Bei einem Onlineshop eines Fashion-Labels sollten dagegen die Produkte im Menü im Vordergrund stehen. Verlinkungen zu Ratgebern oder Blogartikeln tauchen erst weiter unten bzw. hinten auf. Generell empfiehlt es sich, die Conversion Rate Ihres E-Commerce-Unternehmens branchenspezifisch zu optimieren.

Tipp 3: Visuell strukturieren

Ein reguläres Menü kann nur einfach formatierten Text darstellen. Bei Mega-Drop-down-Menüs haben Sie die Möglichkeit, einzelne Menüpunkte hervorzuheben. Nutzen Sie z. B. unterschiedliche …

• Schriftgrößen
• Schriftfarben
• Schriftarten
• Icons

So lassen sich die Inhalte im Drop-down besser strukturieren. Nicht alle Elemente müssen eine Verlinkung zu einer Seite haben. Manche Wörter können als nicht klickbare Überschrift für die zugehörigen klickbaren Themen fungieren.

Tipp 4: Zusatzfunktionen vermeiden

Komplexe Interaktionen in der ausklappbaren Navigation, wie Newsletter-Anmeldungen oder Auswahl- und Suchfelder, verschrecken Besucher oftmals. Denn sie sorgen im Hauptmenü für ein unübersichtliches Design. Außerdem wiederholen sich Elemente meist häufiger auf einer Website und entfalten auf den entsprechenden Themenseiten eine bessere Wirkung.

Ein Call-To-Action-Button (CTA-Button), also ein Button mit einer klaren Handlungsaufforderung, kann in der Navigationsleiste durchaus sinnvoll sein, damit Kunden direkt mit einem Klick eine Buchung, einen Kauf o. Ä. vornehmen können. Effektiver funktioniert der CTA-Button jedoch neben den Hauptmenüpunkten, statt im Drop-down-Menü.

Tipp 5: Zwischen Mouseover und Klick abwägen

Viele Onlineshops entscheiden sich für ein Drop-down-Menü, das sich bereits beim Mouseover aufklappt, also sobald Kunden mit der Maus über die Navigationspunkte fahren. Dies nennt sich auch Hovern. Hierbei sind einige Aspekte zu beachten:

• Alles auf einen Blick: Ein Mega-Menü sollte sich immer als Ganzes öffnen und nicht nach und nach die Inhalte laden.
• Das richtige Timing: Das Menü sollte keinesfalls zu schnell auf den Hover des auszulösenden Navigationselementes reagieren, um einen „Flacker-Effekt“ zu vermeiden. Ebenso wenig darf die Pause zwischen Nutzerinteraktion und Aufklappen zu lange ausfallen. Empfehlenswert ist hier ein Wert von 0,1 bis 0,5 Sekunden. Auch beim Ausblenden ist eine leichte Zeitverzögerung sinnvoll, um versehentliche Mausbewegungen auszugleichen. Ansonsten könnte es potenzielle Käufer frustrieren, wenn das Menü zu schnell aufflackert bzw. verschwindet und sie verlassen die Seite vorzeitig.
• Mouse-out-Programmierung: Beim aktivierten Drop-down bewegen Kunden die Maus von der Navigationsleiste in das Menü hinein. Bei einer fehlerhaften Programmierung wird dieses Verlassen der Navigationsleiste als Mouse-out-Event gewertet und das Menü klappt sich wieder ein. Daher ist bei den Menüeinstellungen darauf zu achten, dass das Drop-down erst ausgeblendet wird, wenn die Maus die Navigationsleiste und das Drop-down selbst verlässt.
• Mobile-Version: Auf Smartphones und Tablets ist kein Hovern möglich. Wer sich für ein Drop-down-Menü mit Mouseover entscheidet, sollte daran denken, gesonderte Einstellungen für die mobile Version vorzunehmen.

Tipp 6: Drei-Klick-Regel beachten

Für die Navigation auf einer Website gilt die sogenannte Drei-Klick-Regel. Demnach sollen Besucher alle Informationen, die die Website beinhaltet, innerhalb von maximal drei Klicks erreichen. Dies ist jedoch nur eine allgemeine Empfehlung. In umfangreichen, aber gut strukturierten Webauftritten ist die Anzahl der Klicks weniger von Bedeutung – solange Kunden das Gefühl haben, auf dem richtigen Weg zu sein.

Tipp 7: Mehrere Menüs nutzen

Bei einer umfangreichen Website kann es sinnvoll sein, mehrere Menüs zu integrieren. Während Sie sich in Ihrem Hauptmenü möglicherweise für ein Drop-down Ihrer Produktauswahl entscheiden, bietet sich für sekundäre Kategorien ein gesondertes Menü im Footer an. Sonst wird die Hauptnavigation zu unübersichtlich. Wie das aussehen könnte, sehen Sie in der Tabelle unten.

Mögliche Hauptkategorien für den Footer	Über uns	Kontakt	Unsere Vorteile	Unsere Tipps
Zugehörige Unterkategorien	Das Team	E-Mail und Telefon	Vielfältige Zahlungsmöglichkeiten	Unser Blog
Zugehörige Unterkategorien	Karriere	Standorte	Kostenloser Versand	Kundenberatung
Zugehörige Unterkategorien	Partner	Presse	Schnelle Lieferung	Rabattaktionen
Zugehörige Unterkategorien	AGB	customer service	100 Tage Rückgaberecht	FAQ
Zugehörige Unterkategorien	Datenschutz
Zugehörige Unterkategorien	Impressum

Tipp 8: Auf die Optik achten

Ein ansprechendes Web-Menü-Design weist idealerweise immer dieselbe Größe auf – auch wenn die Hauptmenüpunkte aus unterschiedlich vielen Unterkategorien bestehen. Zudem ist darauf zu achten, dass die Suchfunktion, sofern vorhanden, nicht durch ein aufgeklapptes Drop-down-Menü verdeckt wird.

Weiterhin sollten diejenigen Menüpunkte, die beim Klick oder Mouseover ein Drop-down-Menü öffnen, in der Navigationsleiste visuell gekennzeichnet sein. Hierfür bietet sich etwa ein kleiner Pfeil neben dem Wort an – beim Pull-down zeigt dieser nach unten, beim Fly-out nach rechts. Dadurch wissen Käufer intuitiv, dass sie hier mehr erwartet.

Mobile Commerce: Onlineshop-Navigation für Smartphones sinnvoll gestalten

Kunden tätigen ihre Onlinekäufe immer häufiger über das Smartphone. Daher müssen sich Webshop-Betreiber bei der Wahl der Menüführung ebenso Gedanken über die Website-Navigation machen. Heute ist es übrigens nicht mehr ratsam, bestimmte Navigationspunkte auszublenden. Denn warum sollte ein Mobile-User nicht auf die gleichen Inhalte wie ein Desktop-Nutzer zugreifen wollen? Wir stellen Ihnen verschiedene Möglichkeiten vor, wie Sie Ihre mobile Navigation nutzerfreundlich gestalten.

“Do nothing”

Bei dem einfachsten Konzept der mobilen Homepage-Navigation bleibt das Design nahezu unverändert. Es sind nur geringfügige Anpassungen notwendig, damit User auch auf dem kleinen Touch-Display das gewünschte Feld mit den Fingern anklicken können, z. B.:

• Erhöhen Sie den Abstand zwischen den einzelnen Navigationspunkten
• Wählen Sie eine geeignete Schriftgröße.

Dennoch eignet sich diese Variante eher für Websites, die nur über kleine Menüstrukturen und kurze Navigationspunkte verfügen. Sobald diese umfangreicher sind, ermöglicht eine mehrstufige mobile Navigation höhere Nutzerfreundlichkeit.

Drop-down-Menü

Drop-down-Menüs lassen sich äquivalent zur Desktop-Version in mobile Onlineshops integrieren. Die Navigation klappt sich durch einen Klick auf den jeweiligen Menüpunkt aus und legt sich über den Inhalt. Daher ist in der Mobile-Version auch von Overlay-Menüs die Rede.

Slide-down-Menü

Praktischer für mobile Menüführungen als das Drop-down- ist das Slide-down-Menü. Hier legt sich die Navigation nicht über den Inhalt, sondern schiebt diesen nach unten. So können Kunden auch beim aufgeklappten Menü bei Bedarf noch mal runterscrollen, um den Content zu sehen. In der Programmierung ist diese Form der Menüführung etwas aufwendiger, bei Usern ist sie jedoch sehr beliebt.

Off-Canvas-Navigation

Hier ist das Menü nicht in das Layout integriert und nimmt dadurch keinen Platz im Sichtfenster ein. Erst beim Klick auf ein Menü-Icon öffnet sich die gesamte Navigation und verdrängt das restliche Layout. Kunden sehen jetzt ausschließlich die Navigationsstruktur der Website. Dieses Konzept eignet sich vor allem für große Navigationshierarchien.

Fazit: Was eine gute Onlineshop-Navigation ausmacht

Es gibt verschiedene Möglichkeiten, ein nutzerfreundliches Menü im Onlineshop aufzubauen. Je nach gewähltem Shopsystem stehen Ihnen unterschiedlich viele Navigationsdesigns zur Auswahl. In jedem Fall gilt es, bereits im Vorfeld eine sinnvolle Strukturierung der Inhalte vorzunehmen. Bei einer großen Produktauswahl eignen sich das Drop-down-Menü für die Desktop-Website und das Slide-down-Menü in der Mobile-Variante am besten. Mit dieser Checkliste überprüfen Sie, ob Sie bei der Gestaltung ihrer Website-Navigation alle Tipps berücksichtigt haben.

	Checkliste für ein nutzerfreundliches Drop-down-Menü	Check
1.	Die Kategorien sind kurz und eindeutig benannt.
2.	Die Hauptkategorien sind nach der Relevanz für den User angeordnet.
3.	Ausklappbare Menüpunkte sind entsprechend gekennzeichnet, etwa durch einen kleinen Pfeil neben dem Wort.
4.	Das Drop-down-Menü öffnet sich beim Mouseover in der Navigationsleiste erst nach 0,1 bis 0,5 Sekunden.
5.	Das Drop-down-Menü öffnet sich von Anfang an vollständig. Kunden müssen sich nicht durch alle Kategorien bis zur letzten Hierarchie durchklicken.
6.	Im ausgeklappten Drop-down sorgen visuelle Anpassungen, wie Icons und farblich abgesetzte Überschriften, für mehr Übersichtlichkeit.
7.	The menu doesn’t close when visitors move their mouse from the navigation bar to the expanded dropdown.
8.	Das Drop-down hat unabhängig von der Anzahl der angezeigten Unterkategorien immer dieselbe Größe.
9.	Es enthält keine interaktiven Funktionen, wie Newsletter-Anmeldungen.
10	Das ausgeklappte Drop-down verdeckt nicht das Suchfeld oder andere wichtige Content-Elemente.
11.	Sekundäre Funktionen sind in gesonderten Menüs untergebracht, z. B. im Footer.