Was ist zu bei einem Drop-Down-Menü zu beachten? Und wann ist ein Mega-Drop-Down-Menü sinnvoll?
Wir lieben Drop-Down-Menüs! Mit nur einem Klick (oder Mouseover) wird die gesamte Palette an Inhalten einer Website sichtbar. Und das in gut strukturiert und schnell anwählbar – im Idealfall. Das sorgt nicht nur für Nutzerfreundlichkeit, sondern auch für Freude beim Website-Betreiber durch höhere Conversions Rates.
Hier erfährst du alles Wissenswerte rundum Drop-Down-Menüs und wie die Umsetzung des praktischen Aufklappmenüs gelingt.
Inhaltsverzeichnis
Was ist ein Drop-Down-Menü?
Ein Drop-Down-Menü ist ein aufklappbares Menü mit der Möglichkeit, Unterkategorien anzuzeigen. Im Webdesign ist damit meist ein Navigationsmenü gemeint. Hier besteht das Hauptmenü einer Website zunächst aus Oberkategorien. Klickt der User auf eine dieser Kategorie oder fährt mit der Maus darüber,* so klappen weitere Unterkategorien aus. Diese Funktion ist gut für die Usability der Seite. Denn sie hilft dem Nutzer, auch bei größerer Auswahl, die gewünschte Kategorie schnell zu finden. Damit lässt sich auch die Conversion Rate erhöhen. Win-win also!
* Diese Funktion wird Hovern oder Mouseover genannt. Sie ist ausschließlich in der Desktopversion einsetzbar. Navigiert der User mit dem Smartphone, muss er entsprechende Flächen durch Tippen anwählen.
Drop-Down-Menüs werden besonders gerne im eCommerce genutzt, um umfangreiche Angebote abzubilden. Dafür lässt sich die Verschachtelung der Kategorien beliebig fortführen. Bei mehr als zwei aufklappbaren Stufen spricht man von einem Mega-Drop-Down-Menü – dazu später mehr.
Weitere Anwendungsgebiete des Drop-Down-Menüs
Aber nicht nur wir Webdesigner haben die Vorteile dieser aufklappbaren Menü-Funktion erkannt. Auch bei Software-Programmen werden Drop-Down-Menüs bzw. -Listen zum besseren Handling eingesetzt.
Welche Arten von Drop-Down-Menüs gibt es?
Neben dem Navigationsmenü auf Websites gibt es folgende Einsatzbereiche von Aufklappmenüs:
Im Menü einer Software (z.B. Text- oder Grafik-Programme), ermöglicht hier die Auswahl einer Aktion/eines Befehls:
In Formularen werden dem Nutzer mehrere Antwortmöglichkeiten zur Auswahl vorgeschlagen/vorgegeben:
Auswahl an Attributen, bzw. unterschiedlicher Parameter wie es auch manchmal in Programmen oder Apps vorkommt:
Pull-Down-Menü oder Fly-Out-Menü?
Das Drop-Down-Menü kann sowohl horizontal als auch vertikal angelegt werden. Bei einem horizontalen Dropdown spricht man auch von einem Pull-Down-Menü. Es verläuft von links nach rechts im oberen Website-Bereich. Da der Platz dort beschränkt ist, können hier nur kurze Bezeichnungen verwendet werden.
Die vertikale Version wird auch Fly-Out (oder Seitenbaum) genannt. Dieses Menü verläuft von oben nach unten im linken Randbereich. Hier ist mehr Platz für längere Bezeichnungen.
Was sind Drop-Down-Mega-Menüs?
Hat ein Drop-Down-Menü mehr als zwei Ebenen, spricht man von einem Mega-Menü. Mithilfe dieser Menüs können große Produktpaletten oder komplexe Kategoriestrukturen übersichtlich und schnell anwählbar dargestellt werden. Aber, Mega-Drop-Down-Menüs haben auch so ihre Schwachstellen.
Hier eine Übersicht zu den Vor- und Nachteilen:
| PRO Mega-Drop-Down | CONTRA Mega-Drop-Down |
| Alle Inhalte sind gut strukturiert und übersichtlich. | Mega-Menüs sind für die mobile Darstellung ungeeignet. |
| Der User kann relevante Kategorien schnell erfassen und auswählen. | Teile des Website-Inhalts werden verdeckt. |
| Man kann mehrere Ebenen der Kategoriestruktur gleichzeitig anzeigen. | Mega-Menüs sind nicht immer suchmaschinenfreundlich. |
| Beim Ausklappen bleiben ausgewählte Kategorien stehen. So kann der User jederzeit die eigene Auswahl überblicken. | Das Menü schließt sich beim Klick auf eine Unterkategorie. Der User muss es also immer neu aufrufen. |
Fallstricke von Drop-Down-Menüs
Typische Fehlerquellen, die die Usability einer Seite nicht verbessern, sondern sogar verschlechtern sind:
- Unpassende Kategorie-Bezeichnungen
- Fehlende Responsivität
- Überlange Menüs, die gescrollt werden müssen
- Unübersichtliches Design
- Fehlerhafte Umsetzung der Mouseover-Funktion
- Verdecken wichtiger Website-Inhalte
Damit das nicht passiert, folgen Gestaltungstipps für eine gelungene Umsetzung.
11 Tipps für die Umsetzung eines Drop-Down-Menüs
Damit das Drop-Down-Menü seinen Sinn erfüllt und wirklich für eine bessere User Experience und höhere Conversion Rate sorgt, kommen hier Tipps zur Gestaltung:
- Planung ist Trumpf:
gilt eigentlich bei allen Webdesign-Projekten. Vor der Umsetzung sollte eine genaue Übersicht aller Inhalte samt Kategorien vorliegen. - Bezeichnungen knapp, aber eindeutig formulieren:
Außerdem sollte sichergestellt werden, dass sich die Begriffe voneinander unterscheiden und der User weiß, was ihn dahinter erwartet. - Kategorien nach Relevanz ordnen:
Die für den Nutzer am wichtigsten Informationen sollten auch am Anfang des Menüs stehen. - Visuelle Hervorhebungen:
Anders als bei einem statischen Menü, sollten sich die Kategorie-Ebenen eines Drop-Down-Menüs mittels Variation von Schriftgröße, Farbe, Icons etc. voneinander abheben. - Struktur und Usability durch Weißraum:
Lass genügend Platz, damit es übersichtlich bleibt. Zudem sorgen Elemente, die zu nah beieinander liegen dafür, dass sich Mouse oder Finger mal auf die falsche Fläche verirrt. - Keep it simple!
Extra-Funktionen wie Suche oder Newsletter-Anmeldung lenken ab und blähen die Navigation zusätzlich auf. Diese Spezialfunktion sind im Footer (oder in der Metanavigation) gut aufgehoben. - Aktivierung bei Mouseover oder Klick?
Solltest du dich für die Mouseover-Funktion entscheiden, dann achte auf folgende Punkte:- Du solltest Flacker-Effekte vermeiden. Ideal ist eine Pause von mindestens 0,1 Sekunden zwischen Klick bzw. Hovern und Aufklappen des Menüs.
- Die Verzögerung zwischen Anwählen und Auslösen des Dropdowns sollte jedoch auch nicht zu lang sein – maximal 0,5 Sekunden.
- Das Menü sollte erst zuklappen, wenn die Mouse die Navigation auch wirklich verlässt und nicht bei bloßer (minimaler) Bewegung.
- Da die Mouseover-Funktion in der mobilen Version nicht funktioniert, solltest du hier alternative Einstellungen vornehmen.
- Klickwege kurzhalten: Allgemein wird die Drei-Klick-Regel empfohlen. Relevante Inhalte sollen demnach in nur wenigen Klicks erreichbar sein. (Natürlich hängt die Klicktiefe von der Komplexität des Projekts ab.)
- Wird auch nichts Wichtiges verdeckt? Elementare Funktionen und Inhalte der Website dürfen nicht vom Menü verdeckt werden.
- Ausklappbare Punkte kennzeichnen – klassischerweise durch einen Pfeil nach unten für Pull-Down-Menüs bzw. nach rechts für Fly-Out-Menüs.
- Zeig uns die gesamte Palette! Das Drop-Down-Menü sollte sich direkt vollständig mit allen Unterpunkten öffnen.
Beispiele für Drop-Down-Menüs
Inspiration gefällig?
Hier kommen ein paar Best Practice Beispiele für besonders gelungene Website Drop-Down-Menüs:
Drop it!
Bessere Nutzerfreundlichkeit, höhere Conversion Rates und technisch gut umsetzbar – was will man mehr? Und mit unseren 11 Tipps zur gelungenen Gestaltung kann jetzt eigentlich nichts mehr schief gehen.
Wenn du mehr zur Navigation und Informationsarchitektur wissen möchtest, dann hier entlang:
Informationsarchitektur: So strukturierst du die Inhalte deiner Website
