Mega-Dropdown-Menüs funktionieren gut

by Jakob Nielsen (deutsche Übersetzung) – 23.03.2009

Um uns für das bevorstehende Seminar über Navigationsdesign vorzubereiten, haben wir Nutzerstudien mit verschiedenen Navigationsfunktionen durchgeführt. Wie immer, haben einige schlecht abgeschnitten. Ebenfalls wie immer gilt: Je willkürlicher sich eine Funktion darstellt – wie z. B. Tag-Wolken -, desto eher rufen sie grössere Usability-Probleme hervor.

Glücklicherweise machen sich andere Web-Trends im Nutzertest durchaus gut, weil ihnen eine gute Usability innewohnt und sie zum Verhalten und zu den Wünschen der Nutzer passen. In der Tat gibt es ein spezielles Navigationsdesign – das Mega-Dropdown-Menü -, das im Test so gut abgeschnitten hat, dass ich es zur breiteren Verwendung empfehlen möchte.

Wenn man bedenkt, dass normale Dropdown-Menüs voller Usability-Probleme stecken, kostet es mich viel Überwindung, eine neue Form des Dropdown-Menüs zu empfehlen. Doch unsere Testvideos zeigen, wie Mega-Dropdown-Menüs die Tücken normaler Dropdown-Menüs überwinden. Insofern kann ich die einen empfehlen und zugleich weiterhin vor den anderen warnen.

Wie die folgenden Screenshots zeigen, haben Mega-Dropdown-Menüs folgende Eigenschaften:

Sie sind grosse, zweidimensionale Tafeln und in Gruppen von Navigations-Optionen unterteilt.
Die Navigations-Optionen sind durch Layout, Schriftarten und (manchmal) durch Icons gegliedert.
Alles ist auf einmal sichtbar – ohne Scrollen.
Sie orientieren sich in ihrer Form vertikal und horizontal, wenn sie von einer oben liegenden Navigationsleiste ausgehen; wenn sie von einer linksseitigen Navigation ausgehen, erscheinen sie eher als Mega-Ausfalter (hier nicht gezeigt).

Vertikales Mega-Dropdown-Menü von foodnetwork.com

Das Mega-Dropdown-Menü von Food Network hat einen Schliessen-Knopf (das «x» in der Ecke oben rechts), aber das ist gar nicht notwendig. Mega-Dropdown-Menüs sind an sich temporär und verschwinden, sobald der Nutzer seinen Mauszeiger auf eine andere Option erster Ordnung oder in den «Normalbereich» der Bildschirmseite bewegt.

Horizontales Mega-Dropdown-Menü von actionenvelope.com

Stilistisch ähneln Mega-Dropdown-Menüs den Galeriemenüs in dem «Band», das Office 2007 als Komponente seiner Nutzeroberfläche eingeführt hat (und das auch in anderen aktuellen Anwendungs-Oberflächen immer populärer wird).

Galeriemenü aus dem Band von Word 2007

Wie dieses Beispiel des Galeriemenüs zeigt, bieten Mega-Dropdowns noch einen weiteren Vorteil gegenüber normalen Dropdowns: Man kann Tooltipps einblenden, wenn der Nutzer über die Auswahlmöglichkeiten fährt. Bei einfachen Navigationsmenüs verwendet man normalerweise Linktitel anstelle von echten Tooltipps.

Mega-Dropdowns schlagen normale Dropdowns

Von den Nutzertests wissen wir, dass Mega-Dropdowns gut funktionieren. Hier ein paar Argumente, die diese empirische Tatsache stützen:

Bei grösseren Websites mit vielen Funktionen verdecken normale Dropdown-Menüs oft den grössten Teil der Optionen des Nutzers. Man kann zwar scrollen, aber das ist (a) eine Quälerei, und (b) verschwinden durch das Scrollen die ersten Optionen. Das führt dazu, dass man nicht alle seine Wahlmöglichkeiten visuell vergleichen kann; man muss sich auf sein Kurzzeitgedächtnis verlassen. Die Nutzer müssen schon genug Dinge im Kopf behalten, und wenn man ihr Kurzzeitgedächtnis belastet, reduziert das ihre Fähigkeit, ihre Aufgabe auf der Website abzuschliessen. Mega-Dropdowns zeigen alles auf einen Blick, so dass die Nutzer sehen können und sich nicht erinnern müssen.
Normale Dropdowns unterstützen kein Gruppieren, es sei denn, sie nutzen Spiegelstriche oder ähnliches, um sekundäre Auswahlmöglichkeiten zu kennzeichnen. Bei Mega-Dropdowns kann man die Beziehungen zwischen den Themen visuell hervorheben. Auch dies hilft den Nutzern, ihre Auswahlmöglichkeiten zu begreifen.
Reiner Text kann wunderbar sein, aber Illustrationen können in der Tat so viel wert sein wie eine Menge Worte, wie das Beispiel Word 2007 zeigt. Mega-Dropdowns machen es einfach, Icons und Bilder zu nutzen, wo sie angebracht sind. Und auch, wenn Sie beim Text bleiben, haben Sie eine reichhaltigere Typografie zur Verfügung (Sie können zum Beispiel die Grösse der Links nach ihrer Wichtigkeit variieren)

Die Geschwindigkeit

Die Geschwindigkeit ist bei jeder Nutzeroberfläche essenziell dafür, dass man das Gefühl hat, dass sie spurt. Die Elemente einer Oberfläche müssen innerhalb von 0,1 Sekunden folgen, um Physikalität zu suggerieren und den Nutzern das Gefühl zu geben, dass die Änderungen auf dem Bildschirm eine direkte Auswirkung ihrer Handlungen sind. Langsam reagierende Elemente der Oberfläche erscheinen schwerfällig und erzeugen bei den Nutzern das Gefühl, dass der Computer das macht und nicht sie selbst.

Sie sollten die Reaktionszeit ihrer Mega-dropdown-Anwendung auf verschiedenen Computern und Browsern testen. Testen Sie auch auf der Plattform, die vor fünf Jahren am meisten verkauft wurde, denn eine grosse Zahl ihrer Kunden verwendet so etwas noch.

Machen Sie aber die Reaktionszeit nicht zu kurz: die Maus sollte 0,5 Sekunden lang an einer Stelle stehen bleiben, bevor Sie etwas anzeigen, das vom Mauszeiger ausgelöst wird, wie beispielsweise ein Mega-dropdown oder ein Tooltipp. Wenn Sie diese Richtlinie verletzen, beginnt der Bildschirm unerträglich zu flackern, wenn die Nutzer die Maus bewegen. Erst wenn der Nutzer 0,5 Sekunden lang auf einem Navigationsleisten-Objekt stehen geblieben ist, können Sie sicher sein, dass der Nutzer wirklich das dazu gehörende Dropdown sehen will.

Das Timing sollte also wie folgt sein:

0,5 Sekunden abwarten.
Wenn der Mauszeiger immer noch auf einem Navigationsleisten-Objekt liegt, innerhalb von 0,1 Sekunden das Mega-Dropdown anzeigen.
Dieses anzeigen, bis der Mauszeiger 0,5 Sekunden lang ausserhalb des Navigationsleisten-Objekts oder des Dropdowns war. Dann das Dropdown in weniger als 0,1 Sekunden ausblenden.

Bei Punkt 3 gibt es eine Ausnahme: Die allerbesten Programme können spüren, wenn ein Nutzer seinen Mauszeiger vom Navigationsleisten-Objekt zu einem Ziel innerhalb des Dropdowns hinbewegt. Wenn der Zeiger sich auf einem solchen Weg befindet, soll das Dropdown sichtbar bleiben. Diese ergänzende Richtlinie bezieht sich auf das Problem der Diagonale, das auftritt, wenn der Zeiger auf seinem Weg vorübergehend den aktiven Bereich verlässt. Das Dropdown sollte nicht verschwinden, wenn der Nutzer gerade dabei ist, auf etwas zu zeigen, das sich darin befindet.

Das Problem der Diagonale: der Weg des Mauszeigers verlässt vorübergehend den aktiven Bereich des Dropdowns.

In dem Beispiel oben hat der Nutzer zuerst in der Navigationsleiste auf «Holidays & Parties» gezeigt und wollte dann das Ziel «Appetizers» auswählen. Wenn er den Mauszeiger zwischen diesen beiden Punkten bewegt, kreuzt er das Navigationsleisten-Element «In Season Now». Viele Nutzer bewegen sich so schnell, dass der Zeiger den aktiven Bereich für weniger als 0,5 Sekunden verlässt. Ältere oder langsame Nutzer aber bewegen die Maus vielleicht so langsam, dass das Dropdown verschwinden würde, während sie noch ein Ziel darin ansteuern. Das ist sehr ärgerlich.

Die Optionen innerhalb eines Mega-Dropdowns gruppieren

Die wichtigsten Richtlinien fürs Gruppieren sind:

Clustern Sie die Optionen in verwandten Gruppen, die Sie vielleicht durch eine Card-Sorting-Studie des mentalen Modells der Nutzer von den Funktionen ermitteln.
Halten Sie einen mittleren Körnigkeitsgrad ein. Bieten Sie keine übergrossen Gruppen mit zahlreichen Optionen an, bei denen man viel Zeit braucht, um sie zu überfliegen. Machen Sie auf der anderen Seite die einzelnen Gruppen nicht so klein, dass im Dropdown zu viele Untergruppen auftauchen, die die Nutzer erst alle verstehen müssen.
Verwenden Sie für jede Gruppe griffige, beschreibende Bezeichnungen. Denken Sie an die Standardrichtlinien fürs Schreiben fürs Web: Verbessern Sie die Überfliegbarkeit, indem Sie das informationstragende Wort an den Anfang stellen und künstliche Begriffe vermeiden.
- Damit die Wörter kürzer und direkter werden, sind Verben wie «fertigen» meist besser als Substantive wie «Fertigung». [Im Englischen: Infinitive wie «shop» besser als Gerundien wie «shopping».]
- Achten Sie auf unterschiedliche Bezeichnungen. Bei Action Envelope zum Beispiel arbeiten die Bezeichnungen «Ways to Shop» und «Shops» nicht gut zusammen.
Ordnen Sie die Gruppen, zum Beispiel anhand einer den Funktionen innewohnenden Ordnung (etwa einem Arbeitsablauf) oder nach der Wichtigkeit, wobei die wichtigsten oder am häufigsten besuchten Gruppen oben (im vertikalen Design) bzw. links stehen (einem horizontalen Lay-out, bei einer Sprache wie Deutsch oder Englisch, die von links nach rechts gelesen wird).
Zeigen Sie jede Auswahl nur einmal an. Wenn Optionen doppelt auftauchen, fragen sich die Nutzer, ob die beiden Punkte dasselbe oder etwas Verschiedenes meinen. Auch machen Redundanzen die ganze Oberfläche grösser und klobiger.

Halten Sie die Megas einfach

Die Standard-Usability-Richtlinie, «keep it simple» («einfach halten»), gilt auch für Mega-Dropdowns. Dass Sie alles hineinpacken können, bedeutet nicht, dass Sie alles hineinpacken müssen.

Vermeiden Sie insbesondere GUI-Widgets und andere Oberflächen-Elemente, die eine kompliziertere Interaktion erfordern als blosses Anklicken, um irgendwo hinzukommen. Mega-Dropdown-Menüs sind eine flüchtige Bildschirmpräsenz und sollten keine Dialogboxen ersetzen, die der natürliche Ort für komplexere Interaktionen sind und sie besser unterstützen. Unter anderen Vorteilen haben Dialogboxen einen standardisierten Ausgang (die OK- und Abbrechen-Knöpfe), bleiben auf dem Bildschirm, bis sie verlassen werden, und können verschoben werden, wenn die Nutzer etwas sehen wollen, das die Box verdeckt.

Action Envelope bietet einen kompletten Mini-Login-Bildschirm innerhalb des Dropdowns von «My Account» an. Es wäre besser, es gäbe einfach einen Klick, der die Nutzer zu einer komplett ausgestatteten Login-Seite führt mit allen Funktionen für eingetragene Nutzer. (Noch besser: Positionieren Sie diesen Link in der Bedienungsleiste, wo die meisten Nutzer, Eyetracking-Studien zufolge, sie suchen.)

In ähnlicher und noch schlimmerer Weise versteckt Novell seine Suchbox in einem Mega-Dropdown. Das ist schlecht, weil eine Suchbox auf der Seite stets sichtbar sein sollte und nicht nur in dem Fall, wenn die Nutzer ein Dropdown-Menü aktivieren. Ausserdem überladen Funktionen wie ein Textfeld und ein Button das Dropdown-Menü.

Barrierefreiheit

Weil dynamische Bildschirmelemente immer potenzielle Barrieren sind, ist es wichtig, beim Programmieren an Bildschirmvorleser und andere Assistenztechniken zu denken.

Auch wenn sie korrekt kodiert sind, können Mega-Dropdowns Probleme für sehbehinderte Nutzer verursachen, die Bildschirmlupen nutzen. Wenn der Nutzer Pech hat, vergrössert die Lupe nur einen Teil des Menüs, der dann so aussieht, als sei er das ganze Menü.

Zum Beispiel bei dem Screenshot von Action Envelope oben könnte die Bildschirmlupe nur die Gruppen «Paper & More» und «Ways to Shop» anzeigen, aber nicht die Gruppe «Shops». Der fehlende Schlagschatten am rechten Rand des kompletten Menüs ist vielleicht als Signal zu fein, um vielen Nutzern zu helfen. So könnte die Website Bestellungen verlieren, falls sie viele sehbehinderte Kunden hat (was oft vorkommt bei Websites, die auf ältere Nutzer abzielen). Ein deutliches Signal für den Rand des Menüs würde dieses Problem beseitigen.

Dazu kommt: Klein dimensionierte Ziele sind schlecht für Nutzer von Touchscreens, und übermässig affektiertes Verhalten beim Auftauchen und Verschwinden ist schlecht für Leute mit motorischen Störungen.

Um Mega-Dropdown-Menüs barrierefrei zu machen, gibt es hauptsächlich zwei Ansätze:

den einfachen: Kümmern Sie sich nicht darum, das Dropdown selbst barrierefrei zu machen, sondern machen Sie jeden Menüpunkt erster Ordnung klickbar und verlinken Sie ihn jeweils mit einer regulären Webseite, die alle Dropdown-Optionen als reines, barrierefreies HTML präsentiert.
den fortgeschrittenen: Adaptieren Sie das Tastentipp-(«Keytips»)-Prinzip, mit dem Microsoft seine bandförmige Steuerung barrierefrei gemacht hat. Tastentipps sind eine Alternative zu Tastencodes und leichter zu verstehen. Die Interaktionssequenz für Tastentipps geht so:

«Alt» drücken, um in den Tastentipp-Modus zu gelangen.
Einen Buchstaben drücken, um eines der Navigationsleisten-Themen erster Ordnung auszuwählen und das zugehörige Mega-Dropdown anzuzeigen. Im Dropdown neben jeder Option den zugehörigen Tastentipp anzeigen.
Innerhalb des Dropdown-Menüs können die Nutzer einen (oder zwei) Buchstaben drücken, um eine Option auszuwählen. Weil die Zugangstasten zu sehen sind, wenn das Dropdown im Tastentipp-Modus ist, müssen sich die Nutzer nicht mehr auf ihr Gedächtnis verlassen

Versuchen Sie es!

Mega-Dropdowns können die Navigierbarkeit Ihrer Website verbessern. (Natürlich ist es immer am besten zu testen.) Wenn Sie den Nutzern dabei helfen, mehr zu finden, werden die Ihnen helfen, mehr zu verkaufen (oder andere Geschäftsziele zu erreichen wie zum Beispiel, bei gemeinnützigen oder Behörden-Websites, Spenden zu akquirieren oder hilfreiche Informationen zu verbreiten).