Schon 2009 schrieb Jakob Nielsen „mega menus work well for site navigation“ – und wenn selbst der Usability-Guru sie gut findet, dann muss wirklich etwas dran sein. Somit ist es wohl nicht verwunderlich, dass Mega-Dropdowns als Navigationselemente heute eher die Norm als eine Ausnahme auf Websites sind.
In den letzten Jahren ist mir eine Vielzahl von Mega-Dropdown-Menüs im Usability-Lab von eResult über den Weg gelaufen. Manche funktionierten besser, manche schlechter – aber keines war wirklich perfekt und wurde von allen Nutzern ohne Probleme bedient. Immer wieder zeigte sich, dass die Gestaltung doch nicht so ganz trivial ist und es auf viele kleine Details ankommt. Einige von diesen Learnings möchte ich heute mit euch teilen:
Learning 1: Das Mega-Dropdown muss verzögert reagieren
Es hat sich als Standard etabliert, dass ein Mega-Dropdown bei Mouseover erscheint. Damit das Dropdown-Menü bei der normalen Nutzung der Website aber nicht dauernd geöffnet und geschlossen wird, sollte hier eine Verzögerung verwendet werden. Es hat sich bewährt, etwa 0,5 Sekunden zu warten – falls der Cursor innerhalb dieser Zeitspanne von dem Navigationseintrag wegbewegt wird, passiert nichts. Beim Schließen des Mega-Dropdowns gilt es ähnliches zu beachten: Auch hier sollte eine Verzögerung von etwa 0,5 Sekunden eingebaut werden, da viele Nutzer das Menü sonst durch zu schnelle und ungenaue Mausbewegungen versehentlich schließen.
Sehr interessant ist der Wechsel zwischen unterschiedlichen Menüpunkten, denn auch dieser kann ungewollt durch ungenaue Mausbewegungen der Nutzer verursacht werden. Besonders gravierend ist das so genannte „diagonal problem“: Ein Nutzer bewegt den Cursor vom Menü diagonal in das Mega-Dropdown, streift dabei aber einen anderen Menüpunkt, so dass sich ein anderes Dropdown öffnet.
Die meisten Websites beheben dieses Problem auch mit einer Verzögerung, aber besonders elegant ist dies nicht. Nutzer, die über die verschiedenen Mega-Dropdowns die Inhalte der Website erforschen möchten, müssen jedes Mal einen Moment warten. Es gibt inzwischen eine bessere Lösung per Javascript, die erstaunlicherweise noch nicht weit verbreitet ist: Basierend auf dem Weg und der Geschwindigkeit des Cursors wird ermittelt, ob der Nutzer auf die Inhalte des Menüs zugreifen oder in ein anderes Menü wechseln möchte (siehe Abb.1). Erfunden wurde sie von Bruce Tognazzini bei Apple in den 80ern, wiederentdeckt von Amazon und von Ben Kamens sehr schön erklärt und als jQuery-Library verpackt.
Learning 2: Es muss eine zusätzliche Kanalseite geben
Ganz egal wie gut ein Mega-Dropdown umgesetzt ist – meiner Erfahrung nach gibt es immer Nutzer, gerade weniger web-affine, die es nicht bemerken oder einfach nicht nutzen und direkt auf den Menüeintrag der Navigation klicken. Dieser führt im Regelfall zu einer neuen Seite, die sich um das übergeordnete Thema dreht. Auch hier müssen die Nutzer die Möglichkeit haben, einfach und schnell tiefer zu navigieren, so wie es das Mega-Dropdown ermöglicht. Ansonsten besteht die Gefahr, dass diese Nutzer auf den höheren Ebenen der Informationsarchitektur bleiben und nie den Weg zu den eigentlich gesuchten, detaillierten Inhalten finden.
Learning 3: Der Unterschied zwischen Mega-Dropdown und der restlichen Seite muss deutlich werden
Damit auch weniger affine Nutzer verstehen, dass sich ein Mega-Dropdown geöffnet hat und wie dieses funktioniert, muss es klar als eigener Bereich erkennbar sein, der über dem Rest der Seite liegt. Dies kann durch eine andere Hintergrundfarbe, durch Rahmen und Schlagschatten erreicht werden. Auf keinen Fall sollte das Dropdown bis an den Seitenrand ragen (siehe Abb. 2). Was auch nicht zur Unterscheidung funktioniert: Den Rest der Seite abdunkeln oder verblassen. Das lässt die gesamte Seite flackern und treibt Nutzer in den Wahnsinn.
Wird der Unterschied zwischen Dropdown-Menü und der Seite im Hintergrund nicht klar, nehmen Nutzer häufig an, dass sie bereits auf einer neuen Seite gelandet sind und verstehen nicht, dass das Mega-Dropdown per Mouseout geschlossen wird. Ähnliche Probleme zeigen sich, wenn das Menü zu groß ist und die Inhalte der Seite komplett verdeckt oder gar über den sichtbaren Seitenbereich hinausgeht. Letzteres ist übrigens besonders gravierend: Es schmerzt zu beobachten, wie Nutzer per Scrollbalken den Rest des Dropdowns sichtbar machen möchten, sich dieses dann aber durch die Cursorbewegung schließt.
Learning 4: Die Inhalte müssen individuell strukturiert und gestaltet werden
Der Hauptvorteil von Mega-Dropdowns liegt in dem zusätzlichen Platz, der zur Darstellung von Inhalten und Links verwendet werden kann. Doch einfach nur mehr Links helfen nicht – ganz im Gegenteil. Die Nutzer werden schnell von den vielen Optionen erschlagen und sind verwirrt. Nur wenn die Inhalte im Dropdown sinnvoll strukturiert werden, haben sie tatsächlich einen Nutzen.
Im Normalfall sollten im Mega-Dropdown zwei Ebenen von Seiten angezeigt und verlinkt werden. Dabei ist es essentiell, dass diese Ebenen für die Nutzer klar visuell unterscheidbar sind: Durch Abstände, Einrückungen, Aufzählungszeichen, Icons und typografische Gestaltung. Die obere Ebene sollte dabei stärker auffallen, um schnell zu erfassen und scannen zu sein. Gleichzeitig sollten die Begriffe der oberen Ebene anklickbar sein und auch so aussehen. Schon häufig habe ich Nutzer erlebt, die diese nur als Überschriften und nicht als Links verstanden.
Thema Bilder: Hier ist Vorsicht angesagt. Meist sollen sie Aufmerksamkeit auf ein bestimmtes Thema im Mega-Dropdown lenken, doch das Gegenteil ist häufig der Fall. Genauso wie in allen anderen Bereichen einer Website besteht die Gefahr der „Banner Blindness“ – grafisch aufwändige Bereiche werden als Werbung wahrgenommen und völlig ausgeblendet. Häufig funktioniert ein einfacher Textlink im Mega-Dropdown besser als ein Teaser-Bild.
Meiner Erfahrung nach sind automatisierte Lösungen, die die Seitenhierarchie nach festgelegtem Muster im Mega-Dropdown abbilden, fast immer zum Scheitern verurteilt. Die Breite und Tiefe der einzelnen Teilbereiche ist häufig sehr unterschiedlich, so dass sie nach einem festen Schema nicht gut arrangiert werden können. Ich habe schon erlebt, dass ganze Bereiche komplett übersehen wurden, da sie etwa in eine zweite Zeile gerutscht sind. Stattdessen sollte jedes Mega-Dropdown in Abhängigkeit von den Inhalten individuell gestaltet werden, um sowohl den Platz optimal zu nutzen als auch die gewünschte Struktur klar abzubilden.
Schon Jakob Nielsen schrieb: „Mega drop-downs are a design canvas“. Und so müssen sie auch behandelt werden!
Learning 5: Es dürfen keine Inhalte im Mega-Dropdown versteckt werden
Teilweise bietet auch ein Mega-Dropdown-Menü nicht genug Platz, um alle Seiten anzuzeigen. Dann einige, vermeintlich weniger wichtige Links einfach wegzulassen, kann jedoch zu großen Problemen führen. Nutzer verstehen die im Dropdown dargestellten Links als Gesamtheit aller Seiten in diesem Bereich. Selbst wenn sich der Obermenüpunkt für sie vielversprechend anhört, kann sie der Inhalt des Mega-Dropdowns leicht vom Gegenteil überzeugen. Somit kann das Mega-Dropdown in diesen Fällen sogar kontraproduktiv sein: Ohne es würden die Nutzer einfach auf eine Kanalseite gelangen und sich dort weiter durchklicken. Fehlt aber der gesuchte Inhalt im Mega-Dropdown, nehmen sie stattdessen an, dass dieser hier nicht zu finden ist und sehen sich in diesem Bereich der Website gar nicht erst genauer um.
Auch Hinweise, dass es noch weitere Inhalte gibt, können dieses Problem nicht vollständig beheben. Links wie „mehr“ wurden in unseren Usability-Tests häufig genug völlig außer Acht gelassen.
Natürlich gibt es keine Regel ohne Ausnahme: In manchen Fällen kann das Verstecken einiger Unterseiten hinter einem Link „mehr“ sicher funktionieren. Otto etwa macht genau dies – und ich gehe stark davon aus, dass das Mega-Dropdown häufig genug mit Nutzern getestet wurde (siehe Abb. 3). Meine Vermutung: Die Kategorien und Unterkategorien sind sehr klar abgrenzbare Alltagsbegriffe, so dass die Nutzer stärker als anderswo überzeugt sind, dass der gesuchte Inhalt vielleicht doch an dieser einen Stelle zu finden ist. Aber bitte nicht ohne eigene Nutzer-Tests nachmachen!
Learning 6: Für die mobile Nutzung müssen angepasste Lösungen her
Ein ganz eigenes Thema ist die Website-Navigation auf mobilen Geräten, mit Touchbedienung und gerade auch auf sehr kleinen Displays wie Smartphones. Klassische Mega-Dropdowns können dort nicht funktionieren, da sie auf Mouseover-Interaktionen basieren und viel Platz brauchen. An dieser Stelle sei nur so viel gesagt:
- Für Tablets kann ein Mega-Dropdown gut funktionieren, muss dann aber beim Tappen aufklappen. Wichtig: Es sollte einen gesonderten Button im Mega-Dropdown geben, um dieses wieder zu schließen.
- Für Smartphones kann ein Mega-Dropdown als aufklappbares Menü über mehrere Ebenen umgesetzt werden. Dazu habe ich im letzten Jahr schon einen Artikel auf produktbezogen geschrieben, der Auszüge aus der eResult-Grundlagenstudie zum Thema „Mobile Web Navigation“ lieferte.
Fazit: Fluch oder Segen?
Mega-Dropdowns können Nutzern viele Vorteile bieten: Sie erlauben einen schnelleren Weg zum Ziel und schaffen Orientierung durch besseren „Information Scent“. Aber wie so viele gute Ideen werden sie auch häufig unbedacht eingesetzt – einfach nur, weil man es halt gerade so macht. Dabei kann viel schief gehen und letztendlich kann man nur durch User-Tests herausfinden, ob das Mega-Dropdown wirklich gut funktioniert. Mit den hier beschriebenen Tipps ist der Grundstein aber gelegt.
Was ist eure Meinung zu Mega-Dropdowns? Werden wir bald wieder eine Abkehr erleben? Gerade vor dem Hintergrund der Ausbreitung von Touchgeräten finde ich es spannend zu beobachten, ob sich die Mouseover-Interaktion weiterhin hält. Sollten wir vielleicht besser komplett auf Mega-Dropdowns per Klick umsteigen? Immer mehr Websites machen dies jetzt schon (etwa Microsoft und Audi).
mouse over Effekte sind out. Man sollte lieber mehr Ideen in eine gute Informationsarchitekrur investieren. Und dann einleuchtende Menüs aufbauen, die mit einem Klick oder Touch die zweite Ebene öffnen.
Ich denke auch, dass man vor der Wahl des Navigations-Patterns viel Zeit in die Informations-Architektur investieren sollte.
@Jan: Hattet ihr eigentlich auch Mega-Menüs im Test, die sich nicht über den Seiteninhalt legen, sondern diesen nach unten schieben? Also dass der Menü-Content Teil des Seiten-Contents wird? Zumindest könnte man damit einige der Fallstricke umschiffen. Allerdings weiß ich nicht, wie es in so einem Fall um die Orientierung des Nutzers bestellt ist.
Zu dem OTTO-Beispiel kann ich sagen, dass die Hauptnavigation selbstverständlich ausführlich und regelmäßig Teil von Nutzertests ist und wir auch stets die Klickzahlen aus dem Live-Betrieb im Blick haben. Aber du vermutest hier wahrscheinlich richtig: es kommt uns zugute, dass es hier um Kategorien und Links geht, die dem Nutzer aus seinem Alltag gut bekannt sind. Bei einer Website, wo der Nutzer kein gutes Gefühl für die Gänze des Inhaltsumfangs hat, würde ich keinesfalls „mehr“-Links einsetzen.
@Wolf: Ja, auch solche Dropdowns habe ich im Test gesehen – sie sind ziemlich gescheitert. Allerdings war auch die Implementierung nicht besonders gut, insofern würde ich das nicht verallgemeinern wollen. Meinem Eindruck nach wird das eher als Notlösung eingesetzt, wenn das Mega-Dropdown für das Standard-Verhalten nichtg geeigent ist, etwa weil es so riesig ist. Und natürlich scheitert es dann genauso. Vernünftig umgesetzt könnte ich mir schon vorstellen, dass es funktionieren kann. Allerdings müsste es dann per Klick aufgehen, nicht per Mosueover, ansonsten zappelt die Seite viel zu sehr rum.
@Harry: Ich finde es gefährlich, den Wert von Mega-Dropdowns so plakativ abzuschreiben. Sind sie ein Allheilmittel? Natürlich nicht. Bei vermurkster Informationsarchitektur hilft kein noch so ausgeklügeltes Navigationssystem. Aber wer einmal mit wirklich umfangreichen Websites und komplexen Themen gearbeitet hat weiß, dass keine Informationsarchitektur 100%ig und für alle Nutzer funktioniert. Und ich glaube es ist gerade die zusätzliche Orientierung durch Unterthemen im Mega-Dropdown, die hier helfen kann, Oberkategorien besser zu verstehen. Übrigens: ich habe auch schon Kunden empfohlen, ein Mega-Dropdown zu entfernen. Es kommt halt immer drauf an…
Hallo Jan, den Hinweis auf das Javascript leite ich mal weiter. Danke! :)
Ansonsten kann ich deine Aussagen nur unterstreichen.
@Wolf: Ich stelle mir die Frage: Was wäre denn der Mehrwert dieser Animation? Ein schnellerer Zugriff auf die sonst darunter liegenden Inhalte? Insbesondere beim Mega-Dropdown, wo der Animationsweg sehr lang ist und der restliche nicht überdeckte Bereich kleiner, sehe ich eher keinen Nutzen. Im Vergleich wird die Irritation sehr deutlich ausfallen, die die Animation erzeugt.
Für fancy Branding-Seiten kann der Effekt natürlich hip wirken, aber die haben meist kein Mega-Dropdown. ;)
@Harry: Verallgemeinerungen sind out. Insbesondere in Sachen UX.
@Tobias: Mir geht es nicht um eine Animation an der Stelle, wobei diese hilfreich sein kann, dem Nutzer eine große räumliche Veränderung greifbarer zu machen. Mir geht es eher um die Frage, ob man ein Überlagern von Inhalten der eigentlichen Seite vermeiden sollte. Wir sehen in Nutzertests, dass Nutzer nicht selten Probleme mit Overlays haben, gerade auf kleineren Bildschirmen. Darüber hinaus lassen sich mit dem Verzicht einer Überlagerung einige der Fallstricke (z.B. das diagonal problem) umschiffen.
@Wolf: Ja, klar. Ich wollte mich nicht nur auf die Animation beziehen. Ein Missverständnis. :)
Vernachlässigen können wir den Punkt, dass der Nutzer unbedingt die Inhalte im Content-Bereich UND das Dropdown gleichzeitig benötigt. Von daher läuft es ja auf den Vergleich der notwendigen Aktionen hinaus, oder? Was muss der Nutzer tun, um die eigentlichen Content-Inhalte zu sehen.
Und genau da kommt es auf den Einzelfall/die Gestaltung der jeweiligen Seite drauf an. Wie groß ist das Menü und der Content-Bereich? Wie groß ist der typische Bildschirm der Nutzer? Die Nutzerdemographie, und und und. :)
Die meisten Fallstricke des Mega-Dropdowns haben ja mit diesem Nutzerziel, der Blick auf den Content, wenig zu tun. Von daher muss man dies trennen.
@den Websitebetreiber: Wo kommt denn dieses willkürliche Avatarbild her? Verstehe ich nicht… Schlechte UX sag ich mal… Das favicon von webit! sieht anders aus.
@Tobias: Du hast natürlich recht, es ist eine Einzelfall-Entscheidung. Die Vorteile einer verschiebenden Lösung liegen meines Erachtens darin, dass wenn der Nutzer sich dagegen entscheidet, einen Link im Menü aufzurufen (was auch bei perfekter IA oft genug passiert), er sofort weiter mit dem Rest der Seite interagieren kann und er das Menü nicht erst schließen muss. Wobei ich hier vor allem an eine Touch-Nutzung denke, ein per Mouseover geöffnetes Menü ist einfacher zu schließen.
Dein Avatar-Bild wird vom WordPress-Dienst Gravatar geliefert. Dieses Bild ist offensichtlich dort für deine Mailadresse hinterlegt. Wir sind unschuldig :)