Mega-Menüs auf dem Holzweg

Grosse zweidimensionale Drop-down-Menüs können die Website-Navigation erleichtern - wenn sie richtig gestaltet sind. Zwei Beispiele illustrieren einige Usability-Fallstricke für Mega-Menüs.

 

by Jakob Nielsen (deutsche Übersetzung) - 16.11.2010

 

Letztes Jahr habe ich berichtet, dass unsere damaligen Usability-Studien gute Ergebnisse für Websites erbracht hatten, die Mega-Menüs für die Navigation verwenden. Menüs dieser Art haben sich inzwischen unter den von uns getesteten Websites weit verbreitet.

In der Tat sind die Mega-Menüs inzwischen so populär, dass ich beschlossen habe, sie nicht mehr in unserem Seminar über "Emerging Patterns of Web Design" (Neuartige Techniken im Webdesign) zu behandeln - denn sie sind nicht länger neuartig, sondern etabliert. (Die tiefergehende Analyse von Mega-Menüs ist nun in unser Seminar zum Webseiten-Design ["Web Page Design"] eingegangen.)

Zunächst ist es eine gute Sache, wenn die Forschung betont, dass etwas gut funktioniert, und wenn es sich daraufhin verbreitet. Wenn die Web-Manager nur genauso schnell wären, nach meinen vielen Kolumnen über Usability-Probleme schlechte Design-Elemente zu entfernen! ;-(

Allerdings haben einige Websites im Drang, möglichst schnell Mega-Dropdown-Menüs einzuführen, einen Holzweg erwischt. Lassen Sie uns hier ein paar kürzlich entdeckte problematische Designs untersuchen.

Verwenden Sie Mega-Funktionen für sinnvolle Wahlmöglichkeiten

Mega-Menüs bieten wenigstens zwei grosse Vorteile: Sie können damit

• Auswahlmöglichkeiten in Feldern oder unter Bereichen strukturieren und
• Auswahlmöglichkeiten illustrieren.

Dieses Menü des zentralen Regierungsportals www.usa.gov tut weder das eine noch das andere richtig:

 

Gibt es zwei oder drei Kategorien? Obwohl vertikale Trennlinien drei Bereiche erzeugen, scheint die punktierte Liste der Themen einfach vom ersten zum zweiten Bereich weiterzulaufen. Hier hat die Website eine grossartige Gelegenheit verpasst; die Designer hätten leicht die lange Liste der Optionen in Unterkategorien mit eigenen Zwischenüberschriften unterteilen können.

Der dritte Bereich scheint eine eigene, getrennte Kategorie zu bilden, angezeigt durch die Zwischenüberschrift "Audiences" (Zielgruppen). Aber anstatt wirklich verschiedene Zielgruppen aufzuführen, steht dort ein lahmes Bild ohne kommunikativen Wert, gefolgt von einem einzigen Menüpunkt, der die gleiche Bezeichnung hat wie die Zwischenüberschrift. [In Europa wenigstens wäre es zudem eine Beleidigung für die Besucher einer Website, wenn sie dort offen als Teil einer Zielgruppe bezeichnet werden. usability.ch]

Welch ein Missbrauch des Mega-Menü-Konzepts!

Wie immer beim Design von Nutzeroberflächen gilt: Bloss weil Sie etwas tun können, heisst das noch lange nicht, dass Sie es tun sollten. Mega-Menüs können von Illustrationen profitieren, aber nur dann, wenn sie wirkliche Optionen illustrieren und es einfacher machen, diese zu überfliegen. Wir wissen bereits, dass die Nutzer inhaltsleere Bilder auf Webseiten ignorieren. Menüs sollten mit Vernunft redigiert werden - und noch radikaler zusammengestrichen werden als komplette Seiten. Menüs müssen sich auf die Wahlmöglichkeiten der Nutzer konzentrieren und darauf, sie so schnell wie möglich zu den gewünschten Zielpunkten zu führen.

Im Beispiel oben hätten die Designer den Platz nutzen sollen, um Auswahlmöglichkeiten zu zeigen und kein Brimborium. Und das zweidimensionale Layout sollte die Auswahlmöglichkeiten erläutern und strukturieren und die Nutzer von der Last befreien, eine lange Liste durchlesen zu müssen.

Überfliegbare alphabetische Listen in Spalten statt Zeilen

Es folgt ein Mega-Dropdown-Menü von hulu.com - einer Website, auf der man professionell produzierte Videos abonnieren kann. Hat man hier irgendeine besondere Regel angewandt, um die Menüpunkte anzuordnen?

Das Organisationsprinzip ist, wenn überhaupt vorhanden, schwer auf einen Blick zu erkennen, obwohl das wahrscheinlich die einzige Chance ist, die es von den Web-Nutzern bekommt. Die Leute haben keine Zeit, Ihr Design zu studieren, um herauszufinden, warum Sie die Dinge in bestimmter Weise anordnen. Und leider schliessen sie aus dem Umstand, dass sie auf die Schnelle keine Struktur erkennen konnten, in der Regel auf eine zufällige Anordnung, wie sie sie von so vielen anderen Websites mit schrecklicher Informationsarchitektur kennen.

(Jede Website mit schlechter Usability vergiftet auch die Guten für alle, die im Internet Geschäfte machen wollen.)

Wenn Sie das Beispiel Hulu.com genauer betrachten, entdecken Sie, dass die Menüpunkte alphabetisch sortiert sind. Lassen wir die Frage beiseite, ob A-Z wirklich der beste Weg ist, das Universum abgefilmter Unterhaltungs-Genres zu präsentieren. Die Optionen müssen auf irgendeine Weise sortiert werden, und mir geht es hier einfach darum, wie die Website ihre alphabetische Ordnung präsentiert.

Im Screenshot verläuft die Reihe der Optionen horizontal. Das ist falsch, weil die Leute dazu neigen, Seiten vertikal zu überfliegen.

Mit anderen Worten, wenn die Nutzer zum ersten Mal auf das Menüs schauen, lesen Sie wahrscheinlich: All, Classics, Health, Reality, Action, Comedy, Home, Science. Oder wenn sie auf die Mitte des Mega-Menüs schauen, sehen sie vielleicht Drama, Horror, Sports, Arts, Family, Music.

Wie auch immer sie auf das Menüs schauen, entdecken sie wahrscheinlich nicht, dass es alphabetisch sortiert ist, solange ihre Augen beim Herumschweifen den Spalten folgen und nicht den Zeilen.

Wenn Sie allerdings eine Tabelle schreiben, ist es natürlich, horizontal zu tabellieren, weil Sie normalerweise entlang horizontaler Linien schreiben. In dieser Weise lesen die Leute auch erzählende Texte. Aber ein Menü ist kein erzählender Text. Es wird überflogen und nicht gelesen. Und beim Überfliegen neigen wir dazu, in einer Liste vertikal vorzugehen. (Aus dem gleichen Grunde sind linksbündige Navigations-Menüs leichter zu überfliegen.)

Mega-Dropdown-Menüs sind Design-Leinwände

Im grösseren Zusammenhang betrachtet sind die hier erwähnten Usability-Probleme nicht so schlimm. Sie mögen die Nutzung der Website um ein paar Prozent reduzieren, aber sie würden nicht dem Website-Betreiber das gesamte Geschäft vermasseln. Dennoch: Warum sollte man das Nutzererlebnis überhaupt schmälern, wenn ein korrigiertes Design genau so leicht einzubauen ist wie ein schwaches?

Wie ich letztes Jahr festgestellt habe, können Dropdown-Menüs die Usability einer Website-Navigation verbessern. Aber diese Beispiele zeigen, dass Mega-Menüs wieder ihre eigenen Usability-Probleme aufwerfen können.

Natürlich können sie das.

Jede Designtechnik für Nutzeroberflächen hat ihre Fallstricke und muss korrekt angewandt werden, um den besten Effekte zu erzielen. Ein alter Designstil, der in jedem Detail aufpoliert ist, schlägt in jedem Fall einen hypothetisch besseren Stil mit schlecht gestalteten Details. Aus diesem Grund betreiben wir Nutzerforschung, um alle kniffligen Punkte zu entdecken.

 

© Deutsche Version von Jakob Nielsens Alertbox. Institut für Software-Ergonomie und Usability AG. Alle Rechte vorbehalten.