Mega-Drop-downs: Alles auf einen Blick

Eine durchdachte Navigationsstruktur ist für den Erfolg einer Webseite unerlässlich. Der Besucher muss sich schnell zurechtfinden, immer wissen, wo er sich gerade befindet und sich nicht überfordert fühlen. Mega-Drop-downs sollen all das leisten können!

Für einen Onlinehändler stellt sich beim Aufbau seiner Webseite als Erstes die Frage, wie die Navigation gelöst werden soll. Der Auftrag ist dabei immer klar: Der Besucher soll sich schnell zurechtfinden, das Leistungsangebot der Webseite ohne Mühe erfassen, alles schnell finden, was er sucht, immer wissen, wo er sich gerade befindet, und sich bei all dem nie überfordert fühlen.

Ein gewaltiger Berg von Aufgaben, der auf die Webdesigner wartet! Die klassische Lösung, die bei der Mehrzahl der Onlineshops und auch vielen anderen Internetpräsenzen gewählt wird, ist eine Menüführung mit Drop-downs. Nehmen wir als Beispiel einen Onlineshop mit Modeartikeln, der unterschiedlichste Kleidung für Kinder und Erwachsene anbietet. In den meisten Fällen wird die Unterscheidung „Herrenmode, Frauenmode etc.“ im Hauptmenü für die erste Entscheidung der Kunden verantwortlich sein. Klickt er auf eines dieser Elemente, rollt das Drop-down-Menü herunter und gibt die Produktgruppen (Hosen, Shirts, Hemden etc.) frei, zwischen denen sich der Besucher als Nächstes entscheiden muss.

Dieses klassische Prinzip hat sich in der Praxis bewährt, bringt aber auch einige Nachteile mit sich, wie Manuel Brückmann, Consultant Konzept & Design bei der Agentur www.web-arts.com erläutert: „Reguläre Navigationselemente haben bei Websites mit vielen komplexen und/oder sehr unterschiedlichen Inhalten den Nachteil, dass sie für den Kunden mögliche Optionen nicht oder nur unzureichend auf den ersten Blick darstellen können. Da sie nur eine Ebene der Darstellung ermöglichen, wird in der Regeln versucht, dies durch mehr Optionen pro Ebene zu kompensieren. Problematisch: Dies hat häufig lange Listen und Scrolling zur Folge.

Dadurch werden andere Inhalte und/oder Optionen aus dem Sichtfeld bewegt. Kunden können die Optionen nicht direkt vergleichen. Als Resultat müssen sie auf ihr Kurzzeitgedächtnis zurückgreifen, was ihre Aufgabe ‚Kaufen‘ behindert.“

Gut – mit Abzügen

Drop-downs bieten die Möglichkeit, unterschiedlichste thematische Inhalte übersichtlich zu gruppieren und dem Besucher die Navigation zu erleichtern. Perfekt sind sie allerdings nicht – das gesamte Waren-, Dienstleistungs- oder Informationsangebot einer Webseite lässt sich auf diesem Weg nicht auf einen Blick präsentieren. Um dem Kunden sein Angebot übersichtlich zu präsentieren, Zusatzverkäufe zu generieren, Angebote schnell auffindbar zu machen und dabei keine Frustration aufkommen-zu lassen, müssen also andere Lösungen gefunden werden.

Eine hochinteressante Variante ist der Mega-Drop-down. Wie bei klassischen Drop-downs erfolgt die Navigation über eine Menüleiste am oberen oder linken Bildrand. Wählt man allerdings einen Menüpunkt (per Klick oder dem Verweilen auf der Fläche) an, öffnet sich nicht einfach nur eine entsprechend breite Spalte mit Untermenüs, sondern eine große Fläche, die sich über einen Großteil der kompletten sichtbaren Webseite legt.

„Mega-Drop-downs bieten die Möglichkeit, zusammengehörige Inhalte zu gruppieren und für den Kunden angenehm und übersichtlich darzustellen. Richtig angewendet, können Kunden damit ihre Auswahl besser und leichter verstehen, was die Abbruchquote reduziert“, erläutert Brückmann auf www.konversionskraft.de.

Chance zur Präsentation

Mit Mega-Drop-downs haben Webmaster die Möglichkeit, einen großen Produktbereich auf einer Seite übersichtlich zu präsentieren. Dafür sorgt die große Fläche, die kreatives Potenzial für neue Menüstrukturen eröffnet. Möglich ist beispielsweise die Visualisierung unterschiedlicher Instanzen. Produktgruppen werden in Fettschrift oder in einer anderen Farbe präsentiert, darunter in der herkömmlichen Schriftform die dazugehörigen Produkte. So erzielt man das gleiche Ergebnis, als hätte der Besucher diverse Untermenüs hintereinander aufgeklappt und sich die Inhalte angeschaut.

Gruppieren lassen sich Produkte nicht nur durch die Textform, sondern auch durch Symbole. Audi beispielsweise präsentiert seine Modellpalette nicht nur durch Text, sondern elegant und übersichtlich mit Minibildern der entsprechenden Autos. So werden in dem Mega-Drop-down eine Menge Informationen transportiert, wirken aber gleichzeitig nicht überladen und überfordern den Besucher damit auch nicht.

Viele Fehlerquellen

Die Möglichkeiten, die die Navigationslösung Mega-Drop-down bieten, sind also phänomenal. Allerdings hat auch diese Medaille wie üblich zwei Seiten: Wer bei seinem Mega-Drop-down handwerkliche Fehler macht, schafft damit keine Übersichtlichkeit, sondern vergrault seine Kunden. Und es lauern eine Menge Fehlerquellen! Das größte Problem, das Mega-Drop-downs mit sich bringen können, liegt im Unverständnis des Besuchers begründet. Gerade unerfahrene Nutzer könnten den Eindruck bekommen, auf eine neue Seite gelangt zu sein, indem sie versehentlich auf einen Link geklickt haben. Entscheidend ist deshalb, dass immer darauf geachtet wird, dass der Kunde bemerkt, dass er das Öffnen der Seite aktiv gesteuert hat.

Mit der Maus schauen

Ein weiterer Aspekt, der unbedingt berücksichtigt werden muss, ist das Surfverhalten vieler Anwender. So ist es alles andere als selten, dass Nutzer Inhalte einer Webseite mit den Augen erfassen und dabei instinktiv auch den Mauszeiger auf die jeweiligen Flächen bewegen. Dies hat für Mega Drop-down-Menüs ein gravierendes Problem zur Folge: Was ist, wenn der Nutzer sich Inhalte am Rand des Übersichtsfensters ansieht und dabei das Mega-Drop-down unbeabsichtigt kurz verlässt? Wenn sich das Fenster dann sofort schließt, ist die Irritation des Kunden groß.

Noch schlimmer ist, wenn sich der Besucher im Bereich der Hauptnavigation aufhält und versehentlich auf einen anderen Menüpunkt außerhalb des Fensters gelangt. Logischerweise wechselt das Mega-Drop-down dann komplett seinen Inhalt. Der Besucher, der sich keiner eigenen vorangegangenen Aktion bewusst ist, reagiert möglicherweise mit Unverständnis und seine Frustration steigt.

Den Kunden mitnehmen

Wichtig ist bei Mega-Drop-downs also vor allem, dass der Kunde immer Ursache und Wirkung seiner Handlung und der veränderten Webseitenansicht versteht und nachvollziehen kann. Hierfür reicht schon eine geringe Verzögerung des Aufklappens und Zuklappens eines Mega-Drop-downs. Der Kunde soll gezielt auf einem Menüpunkt verweilen und erkennen, dass sich dadurch das Aufklappmenü öffnet.

Gleiches gilt beim Verlassen des Mauszeigers aus dem Aufklappmenü. Ein verzögertes Verschwinden der Box – optional mit einem „Fade-out“ – erläutert auch hier einem unerfahrenen Nutzer ganz einfach das Navigationsprinzip. Verzögerungen sind also bei Mega-Drop-downs noch viel wichtiger als bei klassischen Navigationslösungen.

Doch auch hier steckt der Teufel wieder im Detail, denn ebenso, wie ein zu schnelles Reagieren auf Mausgesten schädlich ist, ist auch eine zu langsame Reaktion für den Besucher irritierend. Verweilt, oder noch schlimmer klickt, er auf einen Menüpunkt und es passiert eine zu lange Zeit nichts, wird er dies für ein technisches Problem der Webseite halten. Ihre Reputation hat bei ihm dann deutlich gelitten.

In der Praxis haben sich optimale Verzögerungswerte herauskristallisiert, wie Manuel Brückmann auf www.konversionskraft.de erklärt: „Wir haben festgestellt, dass neben einer Verzögerung vor dem Einblenden des Drop-downs eine Verzögerung auch beim Ausblenden sinnvoll ist. Thema ‚Accessibility‘: Es ist wichtig, auch Kunden mit Einschränkungen in der Motorik die sinnvolle Bedienung des Drop-downs zu ermöglichen. Ein kurzes versehentliches Verlassen sollte genauso bedacht werden wie das versehentliche Auslösen. Hier ist eine Verzögerung von 0,25 Sekunden völlig ausreichend.“ Für die Verzögerung beim Einblenden empfiehlt der Experte im Übrigen einen Wert von 0,5 Sekunden.

Könige und Untertanen

Auch auf den Inhalt kommt es bei den Mega-Drop-downs natürlich an. Der Kunde muss sofort erfassen können, wie die Informationen sortiert sind. Das heißt: Gruppierungen und Einzelelemente (Hosen, Jeans, Bermuda) müssen als solche sofort erkennbar sein. Zudem muss auch die Gewichtung stimmen. Sind zu viele Gruppierungen – also Überschriften – sichtbar, kann das Auge keine Blöcke mehr bilden. Ebenso, wenn es zu wenige sind: Hier sieht das Auge dann nur noch die berühmte Bleiwüste. Konkrete Zahlen oder Verhältnisse nennen die Experten in diesem Bereich nicht, verweisen jedoch darauf, dass in jedem Fall das Verhältnis stimmen müsse!

5 Regeln für Mega-Drop-downs

Im Folgenden präsentieren wir Ihnen die fünf Praxis-Grundregeln von Manuel Brückmann für erfolgreiche Mega-Drop-downs.

1. Timing Ein- und Ausblenden sollen den Nutzer nicht überraschen und immer als Folge auf seine Aktion erkannt werden.
2. Gruppierungen Nicht zu viele Gruppierungen mit zu wenigen folgenden Optionen. Das Verhältnis hierbei muss stimmen.
3. Einfachheit Der Kunde muss den Inhalt sofort erfassen können. Komplexe Interaktionen gehören nicht in das Element.
4. Fallback Nicht die mobilen Surfer vergessen, bei denen sich ein Mega-Drop-down nicht anzeigen lässt. Halten Sie klassische Lösungen als „Fallback“ bereit.
5. Haptik Ein Mega-Drop-down muss sich alles in allem stimmig anfühlen. Design, Verzögerungszeit und Einblendungsart müssen zusammenpassen.