Drop-down-Menüs: So steigern Shops Conversion

Drop-down-Menüs: So steigern Shops Conversion

Drop-down-Menüs: So steigern Shops Conversion

Drop-down-Menüs: So steigern Shops Conversion

In diesem Artikel geben wir Ihnen 8 Tipps, um die Drop-Down-Menüs Ihres Webshops zu optimieren und Ihre Seite noch benutzerfreundlicher zu gestalten.

In diesem Artikel geben wir Ihnen 8 Tipps, um die Drop-Down-Menüs Ihres Webshops zu optimieren und Ihre Seite noch benutzerfreundlicher zu gestalten.

E-Commerce-Tipps

28.04.2021

Nick Knuppe

Head of product marketing

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.

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.

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.

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.

  • Die Utility-Navigation besteht aus Links zu sekundären Handlungen wie „Warenkorb“ und „Anmelden“.

  • 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.

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.

  • Die Utility-Navigation besteht aus Links zu sekundären Handlungen wie „Warenkorb“ und „Anmelden“.

  • 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.

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.

  • Die Utility-Navigation besteht aus Links zu sekundären Handlungen wie „Warenkorb“ und „Anmelden“.

  • 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.

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.

  • Die Utility-Navigation besteht aus Links zu sekundären Handlungen wie „Warenkorb“ und „Anmelden“.

  • 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?

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.

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.

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.

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

Unterschiedliche Arten von Hauptmenüs - 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ü

Unterschiedliche Arten von Hauptmenüs - 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ü

Unterschiedliche Arten von Hauptmenüs - 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.

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

Unterschiedliche Arten von Hauptmenüs - 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ü

Unterschiedliche Arten von Hauptmenüs - 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ü

Unterschiedliche Arten von Hauptmenüs - 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.

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

Unterschiedliche Arten von Hauptmenüs - 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ü

Unterschiedliche Arten von Hauptmenüs - 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ü

Unterschiedliche Arten von Hauptmenüs - 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.

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

Unterschiedliche Arten von Hauptmenüs - 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ü

Unterschiedliche Arten von Hauptmenüs - 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ü

Unterschiedliche Arten von Hauptmenüs - 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:

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:

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:

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:

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

Below are some tips about website navigation options you can use to improve your conversion rate. Our usability tips will help make your main menu—and your entire webshop—more user friendly.

Tip #1: Map out your homepage navigation in advance

Before you start choosing menu items, it’s important to plan out each function and piece of content on your website. You can usually divide functions and content into main categories and subcategories. Make sure you give clear, concise names to each category. Users generally only briefly skim over the menu items, so it’s important that they can easily tell them apart and immediately understand what they are.

Tip #2: Put the most relevant items first

The menu items that are most interesting to your users should always appear at the beginning of your main menu. If you are a SaaS provider, for example, then it’s a good idea to start your menu with items that convince visitors that your solution is right for them. Try using menu items like these:

  • Why us?

  • About us

  • Prices

If you are operating a webshop for a fashion label, your menu should focus on your products. Links to other content, like product advice or blog posts, should appear towards the end of the menu. In general, the best ways to optimise conversion for your online business depend on which industry you’re in.

Tip #3: Use a visual structure

Web design: 8 tips for making drop-down menus user-friendly - use a visual structure

A regular menu can only display text in a simple format. Mega drop-down menus, on the other hand, give you the option of highlighting specific menu items. For example, you can use different:

  • Text sizes

  • Text colours

  • Fonts

  • Icons

This allows you to add more structure to the contents of your drop-down menu. Not all items have to be linked to an actual page; some words can simply serve as non-clickable headings for the various clickable subcategories.

Tip #4: Avoid including additional functions

Don’t include complex interactions in your drop-down menus, such as newsletter registration or selection and search fields, as these can often be off-putting for users. The last thing you want is for your main menu to have a cluttered design. Besides, elements like these often appear in multiple locations on a website. They have a greater impact if you put them on the pages where they fit best.

However, it can be very effective to include a call-to-action (CTA) button in the navigation bar. For example, add a button that lets your customers make a reservation or a purchase with a single click. Just remember that the CTA should be placed beside the main menu and not in the drop-down menu itself.

Tip #5: Choose between hovering or clicking

Many websites use drop-down menus that open as soon as the user hovers over the menu item with their mouse. If you’re thinking of using this option, there are a few points to consider:

  • Everything at a glance: A mega menu should open all at once rather than gradually opening, one subcategory level at a time.

  • Perfect timing: The menu should not be overly sensitive. You want to prevent it from ‘flickering’ when the user hovers over it too quickly. At the same time, it shouldn’t react too slowly. We recommend a reaction time of 0.1 to 0.5 seconds for optimal usability. It’s also a good idea to allow a brief pause before hiding the menu, in case the user hovers away from the menu by accident. A menu that is too sensitive or erratic will frustrate your users and cause some of them to give up and leave your site altogether.

  • MouseOut programming: When the drop-down menu is activated, customers move their cursor from the navigation bar into the menu. Unless your site is correctly programmed, it will incorrectly log a MouseOut event when the mouse leaves the navigation bar, which will cause the menu to close. That’s why it’s important to set your menu so that the drop-down menu only disappears when the mouse leaves both the navigation bar and the drop-down menu itself.

  • Mobile version: Hovering is not possible on smartphones or tablets. If you want to use a hover-activated drop-down menu on your desktop site, remember to use different settings on the mobile version.

Tip #6: Observe the three-click rule

On most websites, the navigation should follow the ‘three-click rule’. That means that your users should be able to reach any information on your site within no more than three clicks. Of course, this is just a general guideline. If you have a large, highly detailed website, the number of clicks isn’t so important as long as the site is well organised. What matters most is that your customers always feel like it’s easy to find their way.

Tip #7: Use multiple menus

For websites with a lot of information, it can be useful to add more than one menu. You might choose a drop-down menu with your product categories as your main menu, while also using a separate menu in the footer that contains secondary categories. This prevents your main menu from becoming too cluttered. Check out the table below to see how this looks.

Tip #8: Appearance matters

An attractive menu design should stay the same size, even when the main menu items contain different numbers of subcategories. If your website contains a search function, then make sure that the drop-down menus don’t cover it up when they are expanded.

You should also include a small visual cue to indicate whether an item in the navigation bar will expand into a drop-down menu if the user clicks or hovers over it. For example, place a small arrow next to the menu name: for drop-down menus, the arrow should point down; for fly-outs, it should point to the right. This helps your buyers instinctively know that they can expect to find more information.

Below are some tips about website navigation options you can use to improve your conversion rate. Our usability tips will help make your main menu—and your entire webshop—more user friendly.

Tip #1: Map out your homepage navigation in advance

Before you start choosing menu items, it’s important to plan out each function and piece of content on your website. You can usually divide functions and content into main categories and subcategories. Make sure you give clear, concise names to each category. Users generally only briefly skim over the menu items, so it’s important that they can easily tell them apart and immediately understand what they are.

Tip #2: Put the most relevant items first

The menu items that are most interesting to your users should always appear at the beginning of your main menu. If you are a SaaS provider, for example, then it’s a good idea to start your menu with items that convince visitors that your solution is right for them. Try using menu items like these:

  • Why us?

  • About us

  • Prices

If you are operating a webshop for a fashion label, your menu should focus on your products. Links to other content, like product advice or blog posts, should appear towards the end of the menu. In general, the best ways to optimise conversion for your online business depend on which industry you’re in.

Tip #3: Use a visual structure

Web design: 8 tips for making drop-down menus user-friendly - use a visual structure

A regular menu can only display text in a simple format. Mega drop-down menus, on the other hand, give you the option of highlighting specific menu items. For example, you can use different:

  • Text sizes

  • Text colours

  • Fonts

  • Icons

This allows you to add more structure to the contents of your drop-down menu. Not all items have to be linked to an actual page; some words can simply serve as non-clickable headings for the various clickable subcategories.

Tip #4: Avoid including additional functions

Don’t include complex interactions in your drop-down menus, such as newsletter registration or selection and search fields, as these can often be off-putting for users. The last thing you want is for your main menu to have a cluttered design. Besides, elements like these often appear in multiple locations on a website. They have a greater impact if you put them on the pages where they fit best.

However, it can be very effective to include a call-to-action (CTA) button in the navigation bar. For example, add a button that lets your customers make a reservation or a purchase with a single click. Just remember that the CTA should be placed beside the main menu and not in the drop-down menu itself.

Tip #5: Choose between hovering or clicking

Many websites use drop-down menus that open as soon as the user hovers over the menu item with their mouse. If you’re thinking of using this option, there are a few points to consider:

  • Everything at a glance: A mega menu should open all at once rather than gradually opening, one subcategory level at a time.

  • Perfect timing: The menu should not be overly sensitive. You want to prevent it from ‘flickering’ when the user hovers over it too quickly. At the same time, it shouldn’t react too slowly. We recommend a reaction time of 0.1 to 0.5 seconds for optimal usability. It’s also a good idea to allow a brief pause before hiding the menu, in case the user hovers away from the menu by accident. A menu that is too sensitive or erratic will frustrate your users and cause some of them to give up and leave your site altogether.

  • MouseOut programming: When the drop-down menu is activated, customers move their cursor from the navigation bar into the menu. Unless your site is correctly programmed, it will incorrectly log a MouseOut event when the mouse leaves the navigation bar, which will cause the menu to close. That’s why it’s important to set your menu so that the drop-down menu only disappears when the mouse leaves both the navigation bar and the drop-down menu itself.

  • Mobile version: Hovering is not possible on smartphones or tablets. If you want to use a hover-activated drop-down menu on your desktop site, remember to use different settings on the mobile version.

Tip #6: Observe the three-click rule

On most websites, the navigation should follow the ‘three-click rule’. That means that your users should be able to reach any information on your site within no more than three clicks. Of course, this is just a general guideline. If you have a large, highly detailed website, the number of clicks isn’t so important as long as the site is well organised. What matters most is that your customers always feel like it’s easy to find their way.

Tip #7: Use multiple menus

For websites with a lot of information, it can be useful to add more than one menu. You might choose a drop-down menu with your product categories as your main menu, while also using a separate menu in the footer that contains secondary categories. This prevents your main menu from becoming too cluttered. Check out the table below to see how this looks.

Tip #8: Appearance matters

An attractive menu design should stay the same size, even when the main menu items contain different numbers of subcategories. If your website contains a search function, then make sure that the drop-down menus don’t cover it up when they are expanded.

You should also include a small visual cue to indicate whether an item in the navigation bar will expand into a drop-down menu if the user clicks or hovers over it. For example, place a small arrow next to the menu name: for drop-down menus, the arrow should point down; for fly-outs, it should point to the right. This helps your buyers instinctively know that they can expect to find more information.

Below are some tips about website navigation options you can use to improve your conversion rate. Our usability tips will help make your main menu—and your entire webshop—more user friendly.

Tip #1: Map out your homepage navigation in advance

Before you start choosing menu items, it’s important to plan out each function and piece of content on your website. You can usually divide functions and content into main categories and subcategories. Make sure you give clear, concise names to each category. Users generally only briefly skim over the menu items, so it’s important that they can easily tell them apart and immediately understand what they are.

Tip #2: Put the most relevant items first

The menu items that are most interesting to your users should always appear at the beginning of your main menu. If you are a SaaS provider, for example, then it’s a good idea to start your menu with items that convince visitors that your solution is right for them. Try using menu items like these:

  • Why us?

  • About us

  • Prices

If you are operating a webshop for a fashion label, your menu should focus on your products. Links to other content, like product advice or blog posts, should appear towards the end of the menu. In general, the best ways to optimise conversion for your online business depend on which industry you’re in.

Tip #3: Use a visual structure

Web design: 8 tips for making drop-down menus user-friendly - use a visual structure

A regular menu can only display text in a simple format. Mega drop-down menus, on the other hand, give you the option of highlighting specific menu items. For example, you can use different:

  • Text sizes

  • Text colours

  • Fonts

  • Icons

This allows you to add more structure to the contents of your drop-down menu. Not all items have to be linked to an actual page; some words can simply serve as non-clickable headings for the various clickable subcategories.

Tip #4: Avoid including additional functions

Don’t include complex interactions in your drop-down menus, such as newsletter registration or selection and search fields, as these can often be off-putting for users. The last thing you want is for your main menu to have a cluttered design. Besides, elements like these often appear in multiple locations on a website. They have a greater impact if you put them on the pages where they fit best.

However, it can be very effective to include a call-to-action (CTA) button in the navigation bar. For example, add a button that lets your customers make a reservation or a purchase with a single click. Just remember that the CTA should be placed beside the main menu and not in the drop-down menu itself.

Tip #5: Choose between hovering or clicking

Many websites use drop-down menus that open as soon as the user hovers over the menu item with their mouse. If you’re thinking of using this option, there are a few points to consider:

  • Everything at a glance: A mega menu should open all at once rather than gradually opening, one subcategory level at a time.

  • Perfect timing: The menu should not be overly sensitive. You want to prevent it from ‘flickering’ when the user hovers over it too quickly. At the same time, it shouldn’t react too slowly. We recommend a reaction time of 0.1 to 0.5 seconds for optimal usability. It’s also a good idea to allow a brief pause before hiding the menu, in case the user hovers away from the menu by accident. A menu that is too sensitive or erratic will frustrate your users and cause some of them to give up and leave your site altogether.

  • MouseOut programming: When the drop-down menu is activated, customers move their cursor from the navigation bar into the menu. Unless your site is correctly programmed, it will incorrectly log a MouseOut event when the mouse leaves the navigation bar, which will cause the menu to close. That’s why it’s important to set your menu so that the drop-down menu only disappears when the mouse leaves both the navigation bar and the drop-down menu itself.

  • Mobile version: Hovering is not possible on smartphones or tablets. If you want to use a hover-activated drop-down menu on your desktop site, remember to use different settings on the mobile version.

Tip #6: Observe the three-click rule

On most websites, the navigation should follow the ‘three-click rule’. That means that your users should be able to reach any information on your site within no more than three clicks. Of course, this is just a general guideline. If you have a large, highly detailed website, the number of clicks isn’t so important as long as the site is well organised. What matters most is that your customers always feel like it’s easy to find their way.

Tip #7: Use multiple menus

For websites with a lot of information, it can be useful to add more than one menu. You might choose a drop-down menu with your product categories as your main menu, while also using a separate menu in the footer that contains secondary categories. This prevents your main menu from becoming too cluttered. Check out the table below to see how this looks.

Tip #8: Appearance matters

An attractive menu design should stay the same size, even when the main menu items contain different numbers of subcategories. If your website contains a search function, then make sure that the drop-down menus don’t cover it up when they are expanded.

You should also include a small visual cue to indicate whether an item in the navigation bar will expand into a drop-down menu if the user clicks or hovers over it. For example, place a small arrow next to the menu name: for drop-down menus, the arrow should point down; for fly-outs, it should point to the right. This helps your buyers instinctively know that they can expect to find more information.

Below are some tips about website navigation options you can use to improve your conversion rate. Our usability tips will help make your main menu—and your entire webshop—more user friendly.

Tip #1: Map out your homepage navigation in advance

Before you start choosing menu items, it’s important to plan out each function and piece of content on your website. You can usually divide functions and content into main categories and subcategories. Make sure you give clear, concise names to each category. Users generally only briefly skim over the menu items, so it’s important that they can easily tell them apart and immediately understand what they are.

Tip #2: Put the most relevant items first

The menu items that are most interesting to your users should always appear at the beginning of your main menu. If you are a SaaS provider, for example, then it’s a good idea to start your menu with items that convince visitors that your solution is right for them. Try using menu items like these:

  • Why us?

  • About us

  • Prices

If you are operating a webshop for a fashion label, your menu should focus on your products. Links to other content, like product advice or blog posts, should appear towards the end of the menu. In general, the best ways to optimise conversion for your online business depend on which industry you’re in.

Tip #3: Use a visual structure

Web design: 8 tips for making drop-down menus user-friendly - use a visual structure

A regular menu can only display text in a simple format. Mega drop-down menus, on the other hand, give you the option of highlighting specific menu items. For example, you can use different:

  • Text sizes

  • Text colours

  • Fonts

  • Icons

This allows you to add more structure to the contents of your drop-down menu. Not all items have to be linked to an actual page; some words can simply serve as non-clickable headings for the various clickable subcategories.

Tip #4: Avoid including additional functions

Don’t include complex interactions in your drop-down menus, such as newsletter registration or selection and search fields, as these can often be off-putting for users. The last thing you want is for your main menu to have a cluttered design. Besides, elements like these often appear in multiple locations on a website. They have a greater impact if you put them on the pages where they fit best.

However, it can be very effective to include a call-to-action (CTA) button in the navigation bar. For example, add a button that lets your customers make a reservation or a purchase with a single click. Just remember that the CTA should be placed beside the main menu and not in the drop-down menu itself.

Tip #5: Choose between hovering or clicking

Many websites use drop-down menus that open as soon as the user hovers over the menu item with their mouse. If you’re thinking of using this option, there are a few points to consider:

  • Everything at a glance: A mega menu should open all at once rather than gradually opening, one subcategory level at a time.

  • Perfect timing: The menu should not be overly sensitive. You want to prevent it from ‘flickering’ when the user hovers over it too quickly. At the same time, it shouldn’t react too slowly. We recommend a reaction time of 0.1 to 0.5 seconds for optimal usability. It’s also a good idea to allow a brief pause before hiding the menu, in case the user hovers away from the menu by accident. A menu that is too sensitive or erratic will frustrate your users and cause some of them to give up and leave your site altogether.

  • MouseOut programming: When the drop-down menu is activated, customers move their cursor from the navigation bar into the menu. Unless your site is correctly programmed, it will incorrectly log a MouseOut event when the mouse leaves the navigation bar, which will cause the menu to close. That’s why it’s important to set your menu so that the drop-down menu only disappears when the mouse leaves both the navigation bar and the drop-down menu itself.

  • Mobile version: Hovering is not possible on smartphones or tablets. If you want to use a hover-activated drop-down menu on your desktop site, remember to use different settings on the mobile version.

Tip #6: Observe the three-click rule

On most websites, the navigation should follow the ‘three-click rule’. That means that your users should be able to reach any information on your site within no more than three clicks. Of course, this is just a general guideline. If you have a large, highly detailed website, the number of clicks isn’t so important as long as the site is well organised. What matters most is that your customers always feel like it’s easy to find their way.

Tip #7: Use multiple menus

For websites with a lot of information, it can be useful to add more than one menu. You might choose a drop-down menu with your product categories as your main menu, while also using a separate menu in the footer that contains secondary categories. This prevents your main menu from becoming too cluttered. Check out the table below to see how this looks.

Tip #8: Appearance matters

An attractive menu design should stay the same size, even when the main menu items contain different numbers of subcategories. If your website contains a search function, then make sure that the drop-down menus don’t cover it up when they are expanded.

You should also include a small visual cue to indicate whether an item in the navigation bar will expand into a drop-down menu if the user clicks or hovers over it. For example, place a small arrow next to the menu name: for drop-down menus, the arrow should point down; for fly-outs, it should point to the right. This helps your buyers instinctively know that they can expect to find more information.

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.

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.

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.

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.

  1. Kategorienamen sind kurz und leicht verständlich.

  2. Hauptkategorien sind gemäß ihrer Relevanz für den Nutzer angeordnet.

  3. Es gibt ein visuelles Signal (wie einen kleinen Pfeil) neben dem Menünamen, das anzeigt, dass sich das Menü nach unten öffnet.

  4. Das Drop-down-Menü öffnet sich innerhalb von 0,1 bis 0,5 Sekunden, wenn der Nutzer in der Navigationsleiste darüber schwebt.

  5. Das Drop-down-Menü öffnet sich von Anfang an vollständig. Kunden müssen nicht auf eine Kategorie klicken, um ihre Unterkategorien zu sehen.

  6. Visuelle Signale, wie Icons und verschiedene Textfarben, werden verwendet, um das erweiterte Drop-down-Menü einfacher zu navigieren.

  7. Das Menü schließt sich nicht, wenn der Nutzer den Cursor von der Navigationsleiste weg und in das erweiterte Drop-down-Menü bewegt.

  8. Drop-down-Menüs sind alle gleich groß, unabhängig davon, wie viele Unterkategorien sie enthalten.

  9. Es gibt keine interaktiven Funktionen (wie Newsletter-Registrierung) innerhalb der Drop-down-Menüs.

  10. Das erweiterte Drop-down-Menü verdeckt nicht das Suchfeld oder andere wichtige Inhalte.

  11. Nebenfunktionen stehen in separaten Menüs (zum Beispiel im Footer).

Bleiben Sie auf dem Laufenden

Verpassen Sie nie ein Update. Erhalten Sie Produktaktualisierungen, Neuigkeiten und Kundenstories direkt in Ihren Posteingang.

Verbinden Sie jede Zahlung. Verbessern Sie jeden Teil Ihres Geschäfts.

Verpassen Sie nie ein Update. Erhalten Sie Produktaktualisierungen, Neuigkeiten und Kundenstories direkt in Ihren Posteingang.

Form fields
Form fields
Form fields

Table of contents

Table of contents

Weitere Updates

MollieArtikelDrop-down-Menüs: So steigern Shops Conversion
MollieArtikelDrop-down-Menüs: So steigern Shops Conversion