Praxistipps: Conversion Optimierung mit Mega Drop-downs

Conversion Optimierung mit Drop-downs? Richtig. Das Prinzip ist einfach: „Hilf‘ dem Kunden das Gesuchte besser zu finden, damit er mehr kauft.“ Basierend auf unseren Erfahrungen aus Nutzertests und Jakob Nielsens „Mega Drop-Down Navigation Menus Work Well“, finden Sie hier 5 essentielle Regeln, damit Sie mit guten Navigationsmenüs wirklich mehr verkaufen:

Zuerst: Was ist ein Mega Drop-down?

Mega Drop-down Puma.comBeispiel für Mega Drop-down (Puma.com)

Mega Drop-downs gibt es als vertikale und horizontale Menüs. Sie sind eine Weiterentwicklung regulärer Drop-downs. Sie bieten zweidimensionale Navigationselemente mit gruppierten Optionen. Diese lassen sich durch Layout, Typographie und Illustrationen strukturieren. Alles ist auf einmal sichtbar, es gibt kein Scrolling. Ein Mega Drop-down wird zum Fly-out, wenn es von einer vertikalen Navigation ausgelöst wird.

Beispiel für Flyout (Nike)Beispiel für Flyout (Nike.com)

Warum überhaupt Mega Drop-downs?

Prinzip: Sehen und Vergleichen.

Beispiel für Vergleichsmöglichkeiten (Otto.de)Beispiel für Vergleichsmöglichkeiten (Otto.de)

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 Kurzzeit-Gedächtnis zurückgreifen, was ihre eigentliche Aufgabe "Kaufen" behindert.

Mega Drop-downs zeigen alle „sinnvollen Optionen“ auf einmal, so dass Kunden sich nicht an Menü-Punkte erinnern müssen, sondern direkt vergleichen können.

Äpfel zu Birnen, Kartoffeln zu Karotten:

Beispiel für Gruppierung (Mediherz.de)Beispiel für Gruppierung (Mediherz.de)

Das Problem regulärer Drop-downs: Sie können Inhalte nur auf einer Ebene darstellen - Gruppierungen sind schwer darstellbar. Mega Drop-downs bieten hingegen 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.

Inhalte trennen:

Beispiel für klare Trennung der Inhalte (Rei.com)Beispiel für klare Trennung der Inhalte (Rei.com)

Während reguläre Menüs nur einfach formatierten Text darstellen können, lassen sich bei Mega Drop-downs die Optionen durch eine Vielzahl an Variationen hervorheben und visuell strukturieren. Durch unterschiedliches Layout, Typographie oder Illustrationen kann je nach Relevanz, z. B. die Schriftgröße oder Farbe variiert werden. Zusatzinhalte, die als Erweiterung gelten, lassen sich beispielsweise kleiner in grau darstellen.

Für den Kunden wird die Struktur der Informationen sofort klar, ohne dass die Übersichtlichkeit darunter leiden muss.

Aufgrund des komplexen Verhaltens der Mega Drop-downs stecken in der richtigen Realisierung einige Stolpersteine, die es zu umgehen gilt. In Form der nachfolgenden 5 Grundregeln zeigen wir die wichtigsten Erfolgsrezepte:

Regel Nr. 1: Das richtige Timing

Beispiel für das richtige Timing (Foodnetwork.com)Beispiel für das richtige Timing (Foodnetwork.com)
Allerdings ist das x zum schließen überflüssig, Drop-downs sind flüchtig und müssen nicht geschlossen werden (Mouse-Out)

Es ist enorm wichtig, dass der Kunde von der Website vermittelt bekommt, dass die Aktivität der Seite unmittelbar das Ergebnis seiner Aktion ist. Ohne dieses direkte Feedback ist Kontrollverlust das vorherrschende Gefühl. Nielsen bestätigt unsere Erfahrung mit „Speed is essential to making any user interface feel responsive“.

Darstellungsgeschwindigkeit:

Unserer Erfahrung nach ist <0.5 Sekunden Rendertime ein guter Anhaltspunkt, um ein "physikalisches Gefühl" für das Interface zu vermitteln. Ein Drop-down sollte jedoch keinesfalls „Scheibchenweise“ geladen werden. Die Inhalte sollten zum Zeitpunkt der Anzeige vollständig zur Verfügung stehen (gerade bei Illustrationen wichtig). Ein langsamer Aufbau, im schlimmsten Fall flackernd, ist "Gift" für die Wirkung des Interface. Nielsen geht dabei sogar noch extremer vor und schreibt in seiner Guideline , „render within 0.1 seconds“.

Es ist jedoch völlig legitim, dass Drop-down beispielsweise einzublenden, anstatt es „nur schnell“ anzuzeigen. Unseren Erfahrungen nach wird beispielsweise ein fade-in mit 0.5 Sekunden immer noch als „physikalisch realistisch“ wahrgenommen. Hierzu mehr in Regel Nr. 5.

Reaktionsgeschwindigkeit:

Beispiel für eine gute ReaktionsgeschwindigkeitBeispiel für eine gute Reaktionsgeschwindigkeit (Menshealth.com)

Es ist sehr wichtig, dass das Drop-down nicht zu schnell auf das Überfahren ("Hover") der Maus reagiert.
Dies hat ansonsten ein Aufflackern des Menüs zur Folge, sobald der Kunde mit der Maus  auch nur kurz die Navigationsleiste streift. Viele Kunden nutzen beim Scannen der Seite häufig die Maus als Hilfsmittel, oder sie haben vielleicht nur versehentlich die Navigationsleiste berührt. Eine zu schnelle Reaktion wirkt unruhig und nervös und wird als störend empfunden, was wiederum den Kunden unruhig und nervös macht. Beides sind Gefühle, die den Kaufprozess stark negativ beeinflussen können. Auch hier stimmen unsere Erfahrungen für die „response time“ mit Nielsen Guideline überein, „the mouse should remain stationary for 0.5 seconds“.

Technisch wird ein solches „Aussitzen“ als hover-intention bezeichnet. Dieser Wert besagt nichts anderes, als dass die Reaktion auf die Maus von ihrer aktuellen Position aus, um die angegebene Zeit verzögert wird. Der Unterschied zum normal Delay ist, dass die Aktion immer ausgeführt wird, egal ob die Maus noch an der ausgelösten Position steht. Das Menü würde somit zwar verzögert angezeigt werden, jedoch auch wenn die Maus schon längst die Navigationsleiste verlassen hätte.

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 wir das versehentliche Auslösen. Hier ist jedoch eine Verzögerung von 0.25 Sekunden völlig ausreichend.

Für uns hat sich somit folgendes Timing bewährt:
1.    Reaktion nach 0.5 Sekunden Verzögerung
2.    Anzeigen innerhalb 0.1 - 0.5 Sekunden, je nach Effekt (im Unterschied zu Nielsen, der 0.1 Sekunden angibt)
3.    Reaktion nach 0.25 Sekunden Verzögerung (hier unterscheiden sich unsere Erfahrungen von Nielsen)
4.    Ausblenden innerhalb 0.1 - 0.5 Sekunden, analog zu 2.

Häufige Probleme beim Hover:

Das Drop-down darf natürlich erst ausgeblendet werden, wenn die Maus die Navigationsleiste und das Drop-down verlassen hat.

Hierbei entsteht ein Fehler, den Nielsen als „diagonal problem“ beschreibt. Beim aktivierten Drop-down, wird die Maus von der Navigationsleiste, welche die Anzeige des Drop-downs ausgelöst hat, zum Drop-down bewegt. Damit wird die Navigationsleiste verlassen, was als MouseOut-Event gewertet und somit das Drop-down ausblendet wird.

Es ist also wichtig, bei der Implementierung diesen Ablauf zu berücksichtigen und Präventionsmaßnahmen zu ergreifen.

Regel Nr. 2: Gruppierung der Optionen

Beispiel für Gruppierung und Hervorhebung (Reuters.com)Beispiel für Gruppierung und Hervorhebung (Reuters.com)

Das Top-Feature des Mega Drop-downs ist die Gruppierung der Menüoptionen, mit dessen Hilfe die Übersichtlichkeit und Vergleichsmöglichkeit ermöglicht wird.

Zusammenfassung von Optionen

Für eine richtige Gruppierung der Optionen nach zusammengehörigen Sets zählt ausschließlich die Denk- und Ordnungsstruktur der Kunden. Eine häufige Ursache schlechter Informationsarchitektur ist die falsche Sichtweise - nicht die Sichtweise des Betreibers, sondern die der Kunden ist ausschlaggebend. Daher empfehlen wir die Entwicklung von Mental Models oder Use Cases mit Hilfe realer Kundensituationen (Card Sorting, Nutzertest) oder auf Basis von Personas. Auch Nielsen schlägt vor: „Chunk options into related sets“.

Welche Methode auch immer angewendet wird, wichtig ist eine für den Kunden verständliche Zusammenfassung der Optionen in Gruppen.

Balance der Gruppierungen

Soll heißen: weder zu große Gruppen mit zahlreichen Optionen noch zu viele kleine Gruppen mit wenig Optionen. Beide extreme haben den Nachteil, dass sie nur langsam zu erfassen sind und der Kunde zu lange braucht um sie zu verstehen. Verwirrung ist ein weiteres Gefühl, das den Kaufprozess negativ beeinflusst. Nielsen bezeichnet das in seiner Guideline treffend mit „keep a medium level of granularity“.

Das Ziel dieser Disziplin ist also eine ausgewogene Anzahl an unterschiedlichen Gruppen und Optionen.

Sinnvolle Beschriftung

Wie auch bei jedem anderen Navigationselement, sollte dessen Beschriftung sinnvoll sein. Darunter versteht Nielsen „descriptive labels“ und gibt als Richtlinie die Standard-Regeln für „writing for the web“ an.

Zusammengefasst sollten folgende drei Aspekte berücksichtigt werden:

  1. Die Erfassbarkeit „scannability“ sollte verbessert werden, in dem mit dem Wort begonnen wird, welches am meisten informationstragend ist
  2. Kurze und direkte Grundformen („shop“) sind in der Regel besser als die Verlaufsformen („shopping“).
  3. Beschriftungen sind deutlich zu differenzieren, beispielsweise sind „Ways to Shop“ und „Shops“ im gleichen Zusammenhang eine verwirrende Beschriftung

Reihenfolge

Die Reihenfolge der Optionen entscheidet unserer Erfahrung nach wieder die Sichtweise. Was bringt den Kunden am schnellsten voran? Was erwartet er? Davon wird letztlich abhängig sein, nach welchen Kriterien sortiert wird. Nielsen sagt hier, die wichtigste und/oder häufigste genutzte Gruppe nach oben (bei einem vertikalen Design) bzw. nach Links (bei einem horizontalen Design), was natürlich nur in westlichen Ländern gilt. Außerdem schränkt er die Reihenfolge mehr ein, in dem er die Optionen „among the features“ oder „according to importance“ sortiert.

Redundanz

Jede Option sollte nur einmal vorhanden sein. Doppelte Optionen sind aus mehreren Gründen zu vermeiden. Zum einen verwirren sie die Kunden, weil sie nicht unterscheiden können ob die Inhalte hinter der Option gleich sind oder sich unterscheiden. Zum anderen blähen sie das Drop-down unnötig auf, erschweren die Übersichtlichkeit und Handhabung.

Optische Trennung

Beispiel für optische Trennung (Famousecookies.com)Beispiel für optische Trennung (Famousecookies.com)
Dieses Beispiel zeigt, dass sich mit Illustrationen die Inhalte leicht erfassen und trennen lassen

Die Drop-downs bieten eine Reihe von Möglichkeiten, die Inhalte optisch ansprechend und leicht verständlich zu trennen. Neben Typographie lassen sich die Optionen sehr gut mit Illustrationen darstellen und / oder vereinfachen. "Ein Bild sagt mehr als tausend Worte" passt hier gut.

Regel Nr. 3: Einfachheit

Beispiel für Einfachheit (Audi.de)Beispiel für Einfachheit (Audi.de)
Durch klare Trennung und Illustrationen ist das Drop-down schnell und leicht zu erfassen

Nielsens Standard Usability Guidline „keep it simple“ gilt auch für die mega drop-downs. „Viel hilft viel“ passt nach unseren Erfahrungen hier nicht. Nur weil man alles in die Drop-downs packen kann, heißt das noch lange nicht, dass das Sinn macht. Dies gilt sowohl für Inhalte, als auch für die Bedienung.

Bedienung

Verschiedene „GUI widgets“ ermöglichen neben dem klassischen Mausklick erweiterte Bedienkonzepte wie „drag & drop“ oder z. B. „Tabbing“ innerhalb des Drop-downs. Von diesen Techniken ist in diesem Zusammenhang meist abzuraten. Erwartungskonformität und einfache Bedienung spielen hier eine wichtigere Rolle. In der Regel werden die Drop-downs nicht durch Mausklick, sondern durch Hover ausgelöst. Dieses Verhalten hat sich bewährt und ist erwartungskonform. Jedoch bringt dies auch Nachteile mit sich, die in Regel Nr. 4 näher erläutert werden.

Menü, nicht Dialog.

Beispiel für Dialoge in Drop-downs (BMI.com)Beispiel für Dialoge in Drop-downs (BMI.com)

Ein Drop-down ist nach wie vor ein Navigationselement und hat eine flüchtige Bildschirmpräsenz, es ersetzt keine Dialogbox. Komplexere Interaktionen sollten nicht in das Drop-down wandern, auch wenn es verführerisch sein mag.

Vorsicht bei Überladung!

Beispiel für ein überladenes Drop-down (tntrailsandbyways.com)Beispiel für ein überladenes Drop-down (tntrailsandbyways.com)

Der Name "Mega Drop-down" diktiert zwar Größe und die Drop-downs haben schließlich viel Platz für Optionen. Dennoch sollten sie nicht überladen werden. Es ist verführerisch, alle Optionen, auch evtl. weniger relevante zu implementieren. Die Frage die man sich jedoch stellen sollte, „Ist dieses Features wirklich wichtig für den Kunden?“, „Kommt der Kunde ohne dieses Feature schlechter zum Ziel?“.

Regel Nr. 4: Accessibility

Wer eine maximal erreichbare Plattform zur Verfügung stellen möchte, sollte bei der Implementierung technische Hilfsmittel wie beispielsweise „screen reader“ oder „screen magnifiers“ im Hinterkopf behalten.

Nicht nur Kunden mit motorischen Störungen oder Sehschwäche sollten berücksichtigt werden, sondern auch beispielsweise iPhone Nutzer. Durch die Zoomfunktion der mobilen Endgeräte wird stets nur ein Teil des Drop-downs sichtbar, was die Navigation erschwert. Das gleiche gilt natürlich für Bildschirmlupen.
Touchscreen-Nutzer sind häufig benachteiligt, weil ein Mega drop-down in der Regel per Hover ausgelöst wird. Häufig wird auch lediglich der Text verlinkt und Tooltips nicht angezeigt, was die Nutzung erschwert.

In der Vergangenheit haben sich dazu folgende Tipps bewährt:

  1. Für diese Nutzergruppen sollte stets ein Fallback in Form einer klassischen Übersicht als HTML-Seite bereitgestellt werden. Idealerweise wird diese bei klick auf die Navigationsleiste angezeigt und beinhaltet die gleichen Informationen wie das Drop-down
  2. Es sollte nicht nur der Text, sondern ein größerer Bereich um den Text verlinkt sein (auch für Nutzer mit motorischen Einschränkungen wichtig)
  3. Die Grundstruktur des Drop-downs sollte in HTML / CSS erfolgen, JavaScript sollte lediglich zur optimierten Darstellung eingesetzt werden

In seiner Guideline empfiehlt Nielsen, bei Shops die überwiegend Kunden mit Sehschwäche in Ihrer Zielgruppe haben, z. B. ältere Kundengruppen, starke visuelle Signale für Menürahmen zu verwenden. Dies könnte auch bei mobilen Endgeräten hilfreich sein.

Ein weiterer Tipp von Nielsen, den wir bisher im eCommerce jedoch nicht bestätigen können, ist die Verwendung von „keytips interactions“. Dabei werden alle Funktionen des Drop-downs auch vollständig durch die Tastatur ermöglicht, ähnlich den Menüleisten der Betriebssysteme. Idealerweise werden die entsprechenden Tasten durch Unterstreichung des Buchstabens angezeigt.

Ob sich das durchsetzen wird bleibt abzuwarten. Gut vorstellen können wir uns jedoch die Verwendung der Tabulator- und Cursor-Taste(n). Zumindest bei Formularen und regulären Drop-downs werden diese häufig zur schnelleren Navigation genutzt. Eine Verwendung bei Mega Drop-downs bietet sich an.

Regel Nr. 5: Die Haptik

Beispiel für ausgewogene Haptik (EMC.com)Beispiel für ausgewogene Haptik (EMC.com)
Hier wurde auf Timing, Geschwindigkeit, Verzögerung und Animation Rücksicht genommen. Allerdings ruckelt die Anzeige gelegentlich, der Schließen-Button ist überflüssig

Abgesehen von der Reatktions- und Darstellungsgeschwindikeit, verzichtet Nielsen in seiner Guideline gänzlich auf die Haptik der Drop-downs einzugehen.

Unseren Erfahrung und Nutzertests zu Folge, spielt diese jedoch eine relevante Rolle. Wir haben festgestellt, dass die Art des Drop-downs und das Gefühl, dass bei der Nutzung (oder anderer Bedienelemente) entsteht, ein Wirkung auf die „User Experience“ und letztendlich den Kaufprozess hat.

Mit anderen Worten, ein Menü muss sich „gut anfühlen“. Dabei spielen neben der bereits angesprochenen Ein-/Ausblendverzögerung und der Zeit, zwei weitere Faktoren eine wichtige Rolle.

Zum einen die Art des Effekts, beispielsweise als „Fading“  und zum anderen die Dynamik. Neben der linearen sind dynamische Darstellungen wie z. B. gedämpfte Beschleunigung möglich. Diese „Easings“ werden durch diverse APIs und Widgets zur Verfügung gestellt.

Es macht einen Unterschied, ob das Drop-down nach 0.5 Sekunden einfach da ist, oder weich eingeblendet wird. Wichtig dabei ist, „den Bogen nicht zu überspannen“. Auch hier gilt Nielsens Guideline, „keep it simple“. Diese Techniken sollten lediglich der Aufwertung dienen, und auf keinen Fall die Funktion oder Wahrnehmung stören. Die Verwendeten Effekte müssen sich harmonisch und ausgeglichen in das Gesamtbild integrieren. Nach einer Einblendanimation sollte das Drop-down z. B. nicht einfach verschwinden, sondern auch wieder ausgeblendet werden.

Beispielfür gutes Timing und Animation (Archer-group.com)Beispiel für gutes Timing und Animation (Archer-group.com)

Oft wird auf diese kleinen Details keine oder nur wenig Rücksicht genommen. Wir haben in Nutzertests festgestellt, dass jedoch auch das Gefühl für das Interface eine relevante Rolle spielt. Auch wenn Nutzer in Befragungen angeben, dass ihnen eine visuell ansprechende Darstellung nicht wichtig ist oder diese teilweise gar nicht aktiv wahrgenommen wurde. So zeigen die Tests jedoch, dass Interfaces mit optimierter Haptik, ein positives Gefühl bewirken.

Fazit

Berücksichtigt man eine klare Informationsarchitektur, gruppiert die zur Verfügung stehenden Optionen sinnvoll, trennt diese visuell und hält sich an ein paar Anhaltspunkte zum Timing, so lässt sich der Kunde schneller und leichter zum Ziel führen. Diese Regeln können die Motivation beim Navigieren steigern, sind aber sicherlich kein "Allerwelts-Heilmittel". Hier stimmen auch unsere Erfahrungen mit Nielsen überein, "it's always best to test".

Das Ziel: Mehr Conversion durch optimalen Joy-of-Use - ein leicht zu bedienendes Menü mit angenehmem Verhalten führt den Nutzer besser zu Ziel.

  • Teilen
  • Send to Kindle
  • http://www.konversionskraft.de/?p=3079
Manuel Brückmann Manuel Brückmann ist als Mitglied der Geschäftsleitung bei der Web Arts AG für den Bereich Technologie verantwortlich. Er beschäftigt sich neben der Beratung im Bereich Testing mit eCommerce-Entwicklung und -Optimierung. Folgen Sie ihm auf Twitter oder verlinken Sie sich auf Google+, XING oder LinkedIn.

Frage zum Artikel? Fragen Sie den Autor!


Please leave this field empty.

, , , , , , , , , , ,

33 Reaktionen auf  “Praxistipps: Conversion Optimierung mit Mega Drop-downs”

Kommentare

  1. hennerm hennerm

    Und ich dachte ich wüßte schon alles über Drop-Downs, aber Dein Artikel schlägt alles. Danke!!

  2. Markus Kehrer Markus Kehrer

    Sehr ausführlicher und interessanter Artikel, es lohnt sich doch immer wieder hier im Blog vorbeizuschauen 🙂

  3. Ralle NL Ralle NL

    Danke für den Artikel, damit hatte ich mich noch garnicht so beschäftigt, sehr Aufschlussreich. Bisher hab ich nur geschaut wie es mir am sinnvollsten erscheint, dabei gibt es wohl doch einiges mehr was man beachten sollte.

  4. Mariano Glas Mariano Glas

    Wow, ein absolutes Must-Read. Danke Manuel für das Augenöffnen bei so mancher Idee, die man jetzt besser bleiben lässt.

  5. Christian Rothe Christian Rothe

    Herzlichen Glückwunsch zu diesem gelungenen Artikel!

    Ich beschäftige mich momentan mit der Implementierung von Mega-Dropdowns für meinen Shop. Die Anregungen aus diesem Artikel finde ich hilfreich.

    Allerdings sehe ich die Hover-Mouseover-Technik etwas kritisch. Für eine Navigation würde ich mich nicht darauf verlassen wollen – und zwar wegen der immer weiter verbreiteten Touchscreen-Computer. Das iPhone ist im Artikel bereits angesprochen. Doch ich denke viel mehr an das iPad und die Nachahmer-Produkte (WePad etc.). Ich denke, dass diese Computergattung rasend schnell Verbreitung finden wird und man als Shopbetreiber von hohen Nutzerzahlen ausgehen muss.

    Deshalb ist jeder Shopbetreiber meines Erachtens gut beraten, ein Touchscreentaugliches Navigationskonzept zu entwickeln.

    Für mich heißt dies nach momentanen Erkenntnisstand: Ein Mega-Dropdown sollte (auch) durch einen Mausklick aufgehen und kann (auch) wieder durch einen Mausklick geschlossen werden.

    Ich bin gespannt, welche neuen Navigationskonzepte uns die Touchscreen-Welt künftig bescheren wird.

  6. Markus Markus

    Super Artikel!
    Hab mir das selbe Thema für meinen Blog vorgenommen und einen entsprechenden Beitrag fertig -> geht nächste Woche online. Fürchte nur, dass ich neben dem hier etwas alt aussehe … warum müsst ihr das Thema hier auch so umfangreich behandeln? ;o)

  7. AndreasK - moebel360.de AndreasK - moebel360.de

    Danke sehr hilfreich und ausführlich. Werden an unserer wohl noch mal nachfassen müssen.

  8. Manuel Brückmann Manuel Brückmann

    Erst mal Danke für das viele Feedback!

    @Christian Rothe:

    Ich sehe das ähnlich. Die Relevanz solcher Touch-Devices sollte man nicht unterschätzen. Die Zugriffszahlen steigen und werden sicherlich in näherer Zukunft signifikant zunehmen.

    Allerdings würde ich die Reaktion auf diese Systeme dynamischer gestalten wollen. Es ist Erwartungskonform, dass sich ein Mega Drop-down per Hover entfalltet. Die Zugriffe von regulären Systemem sind deutlich höher. Von daher würde ich für die breite Masse das Erwartete anbieten, und für die Sonderfälle eine Alternative.

    Sie könnten beispielsweise für Touch-Systeme, anhand der Bildschirmauflösung, Betriebssystem etc. ein solches Gerät identifizieren, und nur in diesem Fall Hover durch Click ersetzen.

    Sollten Sie grundsätzlich nur Click einsetzen, so nehmen Sie sich die Möglichkeit, einen Fallback auf klassische Kategorie-Seiten anzubieten.

  9. Roland Roland

    Super Beitrag! Wir denken schon länger über eine solche Navigation nach und dieser Beitrag hat uns nun angeschoben das Thema auch mal in der Praxis anzugehen.

  10. Christian Rothe Christian Rothe

    @Manuel Brückmann: Ich stimme zu, dass bei normalen Usern ein Mega-Dropdown mit Mouseover-Effekt / Hover aufklappen sollte. Ich spiele momentan mit dem Gedanken die Öffnung per Klick als Zusatzmöglichkeit anzubieten, damit die „Toucher“ die Menüs auch öffnen und nutzen können. Meine momentan beste Lösungsidee ist, dafür eine eigenes anklickbares Symbol zu entwickeln (z.B. Lupe mit Pluszeichen oder ähnliches), das symbolisiert „Huhu Nutzer, hier findest Du weitere Infos in einem Mega-Dropdown“. Dieses Symbol würde ich neben den Hover-Menüpunkt platzieren bzw. es in den Menüpunkt integrieren.

  11. Roland Roland

    Wir haben seit heute auch „Mega-Dropdowns“ auf der Page – was meint ihr dazu?

  12. Martin Stocker Martin Stocker

    Vielen Dank für den hilfreichen Artikel. Wirklich gut zusammen gestellte Informationen.

  13. Lars Lars

    Super Artikel, bin leider erst jetzt drauf gestossen.

    Wir haben uns auch lange mit der Usability von unsere einen Mega-Dropdown-Menu auseinandergesetzt, vor allem mit der Frage ob es nachteilig ist gewisse 1. Ebene Punkte nicht zu verlinken, haben das nun glaub ganz gut umgesetzt und haben bis jetzt keine negativen Meinung dazu bekommen.

  14. Spuersinn24 Geschenke Spuersinn24 Geschenke

    Wichtig ist nicht nur, dass ein Megadropdown vorhanden ist, wichtig ist vor allem die Sinnigkeit des Dropdowns aus Kundensicht und die Einkategorisierung in passenden Unterkategorien.

    Viele Leute vergessen, dass eine generell gute Struktur wichtiger ist, als jede Menge „technischer Rafinesse“

  15. Kathrin Kathrin

    Toller Artikel mit vielen Anregungen!
    Weiß jemand, wo man eine Sammlung solcher „Easings“ (Fade in and out für Navigationen) mit Beispielen findet?

  16. Manuel Brückmann Manuel Brückmann

    Hallo Kathrin,

    Danke für Dein Feedback. Vielleicht hilft ja das hier schon weiter: http://easings.net/de

    Viele Grüße,

    Manuel

  17. Leila Bekhit Leila Bekhit

    Sehr schöner Beitrag, den ich leider erst jetzt entdeckt habe. Kann hier jemand sagen, seit wann Mega Dropdowns verwendet werden bzw. seit wann sie „in“ sind? Würde mich sehr über Antworten freuen! Danke!

  18. Manuel Brückmann Manuel Brückmann

    Hi Leila Bekhit,

    Danke für Dein Feedback.
    Meiner Einschätzung nach haben die Mega Dropdowns 2009 – 2010 an Popularität gewonnen.

  19. Chris Chris

    Danke! Der Artikel hat mir sehr weitergeholfen 🙂

Trackbacks/Pingbacks

  1. […] Bei Konversionskraft findet sich jetzt einen sehr schönen Artikel zum Thema: Warum Mega Drop-downs für eine bessere Usererfahrung sorgen können. In der Tat: Als ich im letzten Sommer für einen […]

  2. […] Praxistipps: Conversion Optimierung mit Mega Drop-downs […]

  3. […] Praxistipps: 5 essentielle Regeln für Mega Drop-downs | Conversion Optimierung, Konversionsrate ver… Und was ist mit den ~10% Besuchern, die kein JS oder CSS(3) können? Accessibility Mega DropDown Tags: Accessibility Mega DropDown […]

  4. […] Primärmenüs kennen wir, übergroße Flyout Menüs auch, und spätestens seit Office 2007 kennt auch jeder übergroße Tooltipps – von Jensen Harris […]

  5. […] wird, die horizontale Navigation bedienen will, läuft in das von Mega-Dropdowns bekannte Diagonal-Problem. Navigations-Bedienung kommen sich mit der Zoom-Funktion in die […]

  6. […] die weite Verbreitung von Mega-Drop-Downs und Facetten verliert die Verteilerseite an Sichtbarkeit. Trotzdem kommt sie nach wie vor noch zum […]

  7. […] http://www.konversionskraft.de/checklisten/praxistipps-conversion-optimierung-mit-mega-drop-downs.ht… […]

  8. […] Geschenkidee.ch setzt ebenfalls auf die seit längerem nicht nur bei Shops beliebten Mega-Dropdowns. Die Dropdowns weisen jedoch kaum ein Delay auf, so dass der Anwender mit dem klassischen Diagonal-Problem konfrontiert wird, dass die Kollegen von Konversionskraft bereits vor längerer Zeit mal schön dokumentiert haben. […]

  9. […] Kollege Manuel Brückmann hat sich bereits mit dem Thema Mega-Drop-Down-Menü […]

  10. […] Es werden heute schon sehr häufig Inhalte dynamisch nach- oder vorgeladen und je nach Bedarf angezeigt (AJAX). Allerdings werden diese meistens eben einfach “nur” angezeigt. Leicht wirkt die Seite unruhig und hakelig. Es ist nicht besonders aufwendig diese Elemente weich einzublenden. Im Detail lässt sich hier mit dem richtigen Timing (Verzögerung und Geschwindigkeit) und Übergängen (sog. Easings) das Gefühl bei der Nutzung verbessern. Am häufigsten fällt das Fehlen dieser Detailoptimierung an Dropdown-Menus auf. Mehr Details zu diesem Thema in meinem Artikel Conversion Optimierung mit Mega Drop-downs. […]

  11. […] man mit Hilfe von Mega Drop-downs für Desktop und auch mobile die Conversion optimieren kann, haben wir bereits in vergangenen Artikeln […]

  12. […] Praxistipps: 5 essentielle Regeln für Mega Drop-downs […]

  13. […] http://www.konversionskraft.de/checklisten/praxistipps-conversion-optimierung-mit-mega-drop-downs.ht… […]

  14. […] http://www.konversionskraft.de/checklisten/praxistipps-conversion-optimierung-mit-mega-drop-downs.ht… […]

Hinterlassen Sie einen Kommentar