Beim Drop-Down-Menü handelt es sich um ein Navigationsmenü, welches auf Websites implementiert wird und den Nutzern der Seite dabei behilflich ist, eine Unterseite oder eine Kategorie schneller zu finden. Dazu klickt der Nutzer auf einen Begriff in dem Menü, woraufhin sich eine weitere Liste ausklappt. Drop-Down-Menüs lassen sich auch im Zuge der mobilen Optimierung einsetzen. Das sich aufklappende Nutzermenü findet auch in Office-Programmen und bei Software Anwendung.
Das Drop-Down-Menü lässt sich auf unterschiedliche Weise umsetzen. Handelt es sich um die Desktop-Version einer Website, ist es in der Regel ausreichend, wenn das Element gehovert wird. Das bedeutet, dass der Nutzer mit der Maus darüberfährt, um auf die nächste Menü-Ebene zu gelangen. Soll das Menü auf dem Smartphone zum Einsatz kommen, ist es erforderlich, dass der Nutzer aktiv eine festgelegte Fläche berührt. Nur so lässt sich das Menü weiter unten öffnen.
Menüs sind einer von vielen wichtigen Bausteinen einer Website. Möchten Sie mehr über andere Bausteine einer Website erfahren, dann lesen Sie unseren Artikel zu den 6 Grundbausteinen.
Was ist bei einem Drop-Down-Menü zu beachten?
Wie jedes andere Navigationsmenü, hat auch das Drop-Down-Menü die Aufgabe, alle Nutzer ans Ziel zu bringen. Und zwar so schnell wie möglich. Wenn ein solches Menü konzipiert werden soll, müssen einige Aspekte beachtet werden. Diese werden nachfolgend vorgestellt.
Kategoriebezeichnungen
Es ist wichtig, dass nicht nur Nutzer, sondern auch Suchmaschinen eine gute Orientierung über den Seiteninhalt bekommen. Deshalb sollten die Bezeichnungen für die Unterpunkte des Menüs sinnvoll gewählt werden. Das bedeutet, dass das im Drop-Down-Menü verankerte Keyword auch dem Hauptkeyword, beziehungsweise den Kategoriebezeichnungen entspricht.
Responsivität
Damit sich das Drop-Down-Menü auch über ein Smartphone aufrufen und nutzen lässt, darf es nicht mit JavaScript entwickelt werden. Stattdessen muss es responsiv per CSS entwickelt werden. Die sogenannten Mega-Drop-Down-Menüs sind für Mobilgeräte weniger geeignet. Diese müssen speziell an das mobile Design angepasst werden.
Länge des Menüs
Wird das Menü zu lang gestaltet, muss der Nutzer scrollen, um alle Menüpunkte sichtbar zu machen. Dies kann zulasten der Usability gehen und bei den Besuchern der Website für ordentlich Frust sorgen.
Design des Menüs
Klare Farb-Schemata sind wichtig, um die Navigation innerhalb der Navigation zu vereinfachen. Das lässt sich zum Beispiel umsetzen, indem inaktive Felder dunkler sind und erst beim Mouseover, also beim hovern heller werden. Auch sollte im Menü der Punkt, an dem sich der Nutzer gerade befindet eine andere Farbe haben, al die anderen Menüpunkte.
Mega-Drop-Down-Menü
Man spricht von einem Mega-Drop-Down-Menü, wenn das Menü mehr als zwei Ebenen aufweist. Damit lassen sich komplexe Kategoriestrukturen und große Produktpaletten übersichtlich darstellen und somit schnell anwählen. Allerdings bringt das Mega-Menü auch seine Nachteile mit sich: Es eignet sich nicht für die mobile Darstellung und verdeckt Teile des Seiten-Inhalts. Das Mega-Menü ist auch nicht immer suchmaschinenfreundlich und es schließt sich beim Klicken auf die Unterkategorien. Für den Nutzer bedeutet das: Er muss immer wieder neu aufrufen.
Das Mega-Drop-Down-Menü lässt sich als vertikales oder horizontales Menü für Websites oder Onlineshops realisieren. Es stellt sozusagen die Weiterentwicklung eines regulären Drop-Down-Menüs dar. Es wird auf Websites eingesetzt, die sehr viele Seiten und eine verschachtelte Struktur haben. Diese Struktur mit den verschiedenen Kategorien und Unterkategorien der Website lässt sich mit dem Mega-Drop-Down-Menü übersichtlich und nutzerfreundlich darstellen.
Das Mega-Drop-Down-Menü ermöglicht zweidimensionale Navigationselemente, welche gruppierte Optionen aufweisen. Alle Elemente des Mega-Drop-Down-Menüs lassen sich durch folgende Attribute strukturieren:
- Layout
- Typographie
- Illustrationen
Dies führt im Ergebnis dazu, dass für den Kunden des Onlineshops oder den Besucher der Website alles auf einen Blick ersichtlich ist. Das sonst übliche Scrollen ist beim Mega-Drop-Down-Menü nicht erforderlich.
Das Mega-Drop-Down-Menü besticht durch seine Übersichtlichkeit und unterstützt die Customer Journey auf optimale Weise. Allerdings nur unter der Prämisse, dass es perfekt umgesetzt wurde. Der elementare Vorteil des Mega-Drop-Down-Menüs besteht darin, dass sich textuelle und grafische Elemente optimal verbinden lassen. Das ermöglicht Nutzern sich innerhalb von Sekunden einen Gesamtüberblick zu verschaffen und dabei zu erfassen, welche Inhalte zur Verfügung stehen. Das Mega-Drop-Down-Menü kann somit auch dafür sorgen, dass die Conversion-Rate positiv beeinflusst wird und optimiert die Usability der Website oder des Onlineshops.
Arten von Drop-Down-Menüs
Grundsätzlich gibt es zwei Arten. Das Menü kann sowohl vertikal, als auch horizontal angelegt werden. Das horizontal angelegte Menü wird als Pull-Down-Menü bezeichnet und im oberen Seiten-Bereich von links nach rechts platziert. Das Platzangebot ist überschaubar, weshalb nur kurze Bezeichnungen möglich sind. Und dann gibt es da noch die vertikale Version, welche als Seitenbaum oder Fly-Out bezeichnet wird. Es wird meist im linken Randbereich der Website von oben nach unten platziert. Hier gibt es deutlich mehr Platz, weshalb längere Bezeichnungen möglich sind.
Des Weiteren gibt es das sogenannte responsive Drop-Down-Menü, welches am häufigsten im E-Commerce anzutreffen ist. Bei dieser Variante setzt sich das Hauptmenü aus den Hauptkategorien zusammen. Fährt man mit der Maus darüber (Mouseover) oder klickt man die Punkte an, werden weitere Unterkategorien ausgeklappt. Es ist möglich, diese Verschachtelung beliebig zu erweitern.
Grundsätzlich werden aber nur zwei Drop-Down-Stufen als empfehlenswert eingestuft. Wer beispielsweise in einem Onlineshop umfangreiche Produktpaletten anzubieten hat und mehr als zwei Drop-Down-Stufen umsetzen muss, nutzt ein Mega-Drop-Down-Menü. Für welche Variante man sich auch entscheidet, es ist wichtig dass vor dem Anlegen umfangreiche Überlegungen hinsichtlich der Struktur angestellt werden, damit der Content übersichtlich dargestellt wird.
Fly-Out-Menü oder Pull-Down-Menü?
Für welche Art des Drop-Down-Menüs soll man sich nun entscheiden? Dies hängt vor allem davon ab, wieviele Menüpunkte es in der Navigation gibt und wie verschachtelt das Menü ist.
Wenn die Website nur wenige Kategorien hat und für das Menü höchsten zwei Ebenen benötigt werden bietet sich das Pull-Down-Menü an. Es wirkt aufgeräumter und übersichtlicher als das Fly-Out-Menü. Dennoch ist es auch bei kleinen Menüs möglich ein Fly-Out-Menü einzusetzen. In manchen Fällen passt es besser zum Design der Website, als ein Pull-Down-Menü, und nicht zuletzt ist es eine Frage des persönlichen Geschmacks, welche Art von Menü man einsetzt.
Wenn das Menü hingegen umfangreicher ist und mehr als zwei Ebenen hat, biete sich das Fly-Out-Menü an. Es bietet einen besseren Überblick bei verschachtelten Website-Strukturen. Ein umfangreiches Fly-Out-Menü hat den Nachteil, dass man, insbesondere auf Smartphones-scrollen muss, um das ganze Menü zu sehen. Das lässt sich aber in manchen Fällen nicht vermeiden.
Fallstricke von Drop-Down-Menüs
Es gibt typische Fehlerquellen, welche mit Drop-Down-Menüs einhergehen. Sie optimieren die Nutzerfreundlichkeit nicht, sondern verschlechtern diese im schlimmsten Fall. Das kann passieren, wenn folgende Fehler gemacht werden:
- Fehlende Responsivität
- Fehlerhafte Umsetzung der Mouseover-Funktion
- Unpassende Kategorie-Bezeichnungen
- Verdecken wichtiger Website-Inhalte
- Überlange Menüs
- Unübersichtliches Design
Um diese Fallstricke zu vermeiden, folgen Tipps für eine gelungene Umsetzung des Drop-Down-Menüs.
Tipps für die Umsetzung eines Drop-Down-Menüs
- Wichtig ist, dass die Gestaltung genau geplant wird. Die Begriffe sollten kurz und knapp sein, sich voneinander unterscheiden und dem User suggerieren, was ihn dahinter erwartet.
- Der Aufbau des Menüs sollte nach Relevanz gestaltet werden, weshalb die wichtigsten Informationen an den Anfang gestellt werden.
- Icons, Farben und Schriftgrößen sorgen dafür, dass sich die Kategorie-Ebenen voneinander abheben.
- Zwischen den einzelnen Begriffen sollte ausreichend Platz bleiben und insbesondere in der mobilen Version sollten die Menüpunkte ausreichend groß sein, um Fehlklicks zu vermeiden und Übersichtlichkeit zu gewährleisten.
- Nur die wichtigsten Ebenen gehören in das Menü. Das bedeutet, dass die Newsletter-Anmeldung, die Suche oder andere Extra-Funktionen nichts darin zu suchen haben.
- Soll die Mouseover-Funktion umgesetzt werden, ist es wichtig Flacker-Effekte zu vermeiden. Für die mobile Version sollte der Mouseover-Effekt deaktiviert werden.
- Wichtig ist auch, dass die Klickwege kurzgehalten werden. Wenige Klicks müssen ausreichend sein, um relevante Inhalte anzusteuern.
- Bei der Erstellung gilt darauf zu achten, dass nichts Wichtiges auf der Website verdeckt wird, wenn das Menü ausgeklappt ist.
Fazit
Das Drop-Down-Menü eignet sich hervorragend, um dem Nutzer die Navigation auf der Website zu erleichtern und ihm einen besseren Überblick zu verschaffen. Die Website wirkt dadurch aufgeräumt und die Absprungrate lässt sich minimieren.
Diese Vorteile lassen sich aber nur dann erzielen, wenn das Drop-Down-Menü richtig genutzt und vor allem korrekt erstellt wird. Kleinste Fehler können dazu beitragen, dass das Gegenteil der Fall ist und sich bei den Nutzern der Frust breitmacht. Wer sich im Zuge der Webseitengestaltung bereits Gedanken darüber gemacht hat, ob es ein Drop-Down- oder ein Fly-Out-Menü, beziehungsweise ein Mega-Menü werden soll, sollte ausreichend Zeit und Geduld in die Planung investieren, bevor es an die Umsetzung geht. Das Menü kann seinen Zweck nur dann erfüllen, wenn es gut durchdacht und entsprechend umgesetzt wurde.
