Drop Down Menü
Ein Drop Down Menü ist ein Navigationsmenü für Websites. Es hilft Nutzern dabei, die gewünschte Kategorie oder Seite schneller zu finden. Wenn ein Nutzer auf einen Begriff des Menüs klickt, öffnet sich entweder eine neue URL oder es klappt eine weitere Liste auf. Drop Down Menüs können auch für die mobile Optimierung eingesetzt werden. Diese Form des aufklappenden Nutzermenüs gibt es auch bei Software oder in Office-Programmen.
Funktionsweise
Drop Down Menüs können auf unterschiedliche Weise umgesetzt werden. In der Desktop-Version einer Website reicht es meist, ein Element zu „hovern“, d.h. mit der Maus darüberzufahren (Mouseover), damit sich die nächste Menüebene öffnet.
Wird ein Drop Down Menü auf dem Smartphone genutzt, muss der Nutzer aktiv eine Fläche berühren, damit sich das Menü weiter öffnet oder die gewünschte URL geladen wird.
Eine besondere Form des Drop Down Menüs ist das sogenannte „Flyout Menü“. Es öffnet weitere Kategorieebenen, wenn der Nutzer mit der Maus über ein Element fährt oder es anklickt bzw. berührt.
Es unterscheidet sich vom Mega-Drop Down Menü. Es öffnet nach dem Klick auf eine Kategorie oder ein Feld sofort viele weitere anklickbare Felder, meist nach unten.
Herausforderungen
Ein Drop Down Menü hat wie jedes andere Navigationsmenü die Aufgabe, Nutzer so schnell wie möglich zum Ziel zu bringen. Folgende Aspekte sind wichtig, wenn ein solches Menü konzipiert wird:
- Kategoriebezeichnungen: Um sowohl Suchmaschinen als auch Nutzern Orientierung über den Seiteninhalt zu geben, müssen die Bezeichnungen für die Menü-Unterpunkte sinnvoll gewählt werden. Sinnvoll bedeutet, dass das Keyword im Menü auch den Kategoriebezeichnungen bzw. dem Hauptkeyword der Zielseite entspricht.
- Responsivität: Damit ein Drop Down Menü auch mit einem Smartphone funktioniert, sollte es responsiv per CSS und nicht mit Hilfe von JavaScript entwickelt werden. Mega-Drop Down Menüs eignen sich weniger für Mobilgeräte. In diesem Fall muss das Menü für Mobile angepasst werden.
- Mega oder Flyout: Mega Drop Downs bieten laut Studien eine deutlich bessere Usability.[1]
- Länge des Menüs[2]: Wird ein Drop Down Menü zu lang, lassen sich die Menüpunkte nur durch Scrollen sichtbar machen. Das kann die Usability der Website deutlich beeinträchtigen und für Frust bei Nutzern sorgen.
- Design des Menüs: Um die Navigation innerhalb des Menüs zu vereinfachen, sollte mit klaren Farbschemata gearbeitet werden, zum Beispiel, indem nicht aktive Felder dunkler und erst beim Mouseover heller werden.
Nutzen für Usability
Drop Down Menüs sind vergleichsweise einfach umzusetzen. Wenn diese Menüs sinnvoll konzipiert werden, können sie Nutzer schnell zum Ziel führen. Insbesondere Mega-Menüs haben belegt, dass sie Nutzern weiterhelfen können.
Einzelnachweise
- ↑ Mega Menus Work Well for Site Navigation nngroup.com Abgerufen am 23.07.2020
- ↑ Drop Down Menus Guidelines nngroup.com Abgerufen am 23.07.2020
Weblinks
- 50 Examples of Drop-Down Navigation Menus in Web Designs
- Dropdown-Menüs: 20 Demos von simpel bis schick – inklusive Download und Tutorials
- Webdesign Inspiration: Kreative Drop-Down Menüs
- How TO - Hoverable Dropdown
- How to Create Drop-Down and Fly-Out Menus That Are Web-Accessible