Mega Menüs sind Mega

Mega Menu in Bootstrap

Mega Menu in Bootstrap

Ein Mega Menü ist ein um Spalten, Bilder, Formularfelder, Videos, Slideshows und Buttons angereichertes Menü. Es erscheint, wenn man mit der Maus einen Link in der Navigation überfährt oder wenn man auf einem Touch Device den Link klickt.
Für die einen sind Mega Menüs wie „die Pest“, für andere die tollste Erfindung seit geschnittenem Brot. Wie kommt das eigentlich?

Navigation

Die Navigation einer Website ist sehr wichtig. Der Besucher soll sich zurechtfinden. Einer der erster Webbrowser hieß Navigator!

Eine Navigation besteht aus Links.

Hyperlinks, auch „Verweise“ genannt, sind ein entscheidender Bestandteil jedes Hypertext-Projekts und der „intelligente Mehrwert“ des World Wide Web. (selfhtml)

Ein „Hypertext“ Projekt ist eine Website. Auf einer Website gibt es interne und externe Links. Klickt der Besucher auf einen internen Link, wird auf der gleichen Website eine andere Seite aufgerufen oder auf der Seite, auf der der Benutzer gerade ist, an eine andere Stelle gesprungen. Das heißt dann Anker und der Verweis zeigt auf diesen Anker.
Bei einem externen Link wird zu einer anderen Website verwiesen. Links haben sehr vielfältige Parameter, um wirklich jedem Besucher die Nutzung einer Website zu ermöglichen, beispielsweise auch Sehbehinderten.
Links haben auch unterschiedliche Zustände, die standardmäßig durch unterschiedliche Farben gekennzeichnet werden. Ein Link ist entweder „nur so da“, gewissermaßen unberührt. Man kann ihn sehen und erkennt ihn daran, dass er unterstrichen ist. Es kann auch sein, dass man schon mal drauf geklickt hat oder mit der Maus drüber fährt, dann ändert er die Farbe. Es kann auch sein, dass man eben gerade darauf geklickt hat und der Link gewissermaßen „aktiv“ ist, auch für diesen Zustand gibt es eine Farbe. Auf selfhtml ist eine wunderbare Beschreibung was so ein Link alles kann und wie er aufgebaut sein sollte.

Hyperlinks sind ein so unglaubliches Konzept und deswegen ist das World Wide Web so erfolgreich. Wie befinden uns in den 90er Jahren.

Damals war die Welt noch übersichtlich und navigierbar!

Dann kamen die Grafiker, erfanden Cascading Style Sheets (CSS), und konnten damit die Unterstreichung eines Links abschalten. Außerdem konnten sie die Linkfarbe ändern, je nachdem, wo sich der Link auf der Seite befand.

Die Welt wurde unübersichtlicher, aber immerhin bunt!

Dann dachten sich die Programmierer etwas aus, nannten es JavaScript und konnten nun nach einem Klick auf den Link ein kleines Programm starten.

Die Welt lernte, was ein PopUp Fenster ist, die Grafiker lernten das PopUp Fenster bunt zu machen und die Programmierer konnten nun auch mitmachen!

Jetzt, wo die Navigation schwieriger wurde, die Folgen eines Klicks nicht mehr kalkulierbar waren und alle Websites immer bunter und unübersichtlicher wurden, war es möglich den Menschen im Web etwas zu verkaufen ;). Der Online Handel erfand sich gewissermaßen selbst und Marketing und Betriebswirtschaftler bereicherten die Szene.

Die angesagten Browser hießen jetzt Internet Explorer (Microsoft) und Safari (Apple). Den Navigator wollte keiner mehr haben.

Mega Menu

Und nun kombinieren wir alle vorgenannten Möglichkeiten und die logische Weiterentwicklung ist … das Mega Menü!
Oft tot gesagt erfreut es sich im eCommerce eher wachsender Beliebtheit. Hier ein Beispiel von ebay:

Ebay - Desktop Website
ebay – Desktop Website

Und an dieser Stelle wird vielleicht verständlicher warum die Meinungen über Mega Menüs so auseinander gehen. Für Händler sind Mega Menüs gut, weil die Sache funktioniert.

Mehr Links = mehr Klicks = mehr Verkäufe

Das funktioniert allerdings nur, wenn der Kunde nicht völlig verwirrt ist und den Kaufen Button findet. Die großen Anbieter wie ebay und Amazon bekommen die Gratwanderung zwischen verwirrend und hilfreich einigermaßen hin. Viele kleinere Shops tun oft des Guten zuviel und hinterlassen genervte Besucher, die sich frustriert abwenden.
Für viele Kunden bleibt oft die Erkenntnis:

Wenn ich ein Mega Menu sehe, will mir jemand etwas verkaufen und nutzt meine Verwirrung aus.

Mobile First

Im Jahr 2010, das war immerhin vor sieben Jahren, verkündete Google die Entwicklungsrichtung Mobile First. Alle Google Websites wurden ab 2010 zuerst als Mobile Website entwickelt und sollten sich responsiv auf die unterschiedlichen Größen verschiedener Bildschirme anpassen.
Im Jahr 2016 stellte Google seinen Suchindex um und bewertet seitdem „ordentliche“ mobile Websites besser als „ordentliche“ Desktop Sites.

Mega Menüs funktionieren auf mobilen Endgeräten nicht so gut, weil der Bildschirm so klein ist. In der mobilen Variante nutzt ebay daher auch keine Mega Menüs, sondern responsive Tabellen, die man nach rechts und links wischen kann.

Ebay - Mobile
Ebay – Mobile

Nichtsdestotrotz verlangen viele Kunden heute Mega Menüs. Oftmals aus reiner Verzweiflung weil sie nicht wissen wohin mit all den Links und Kategorien, Produkten und Aktionen, Newsletter und Gewinnspielen, Abteilungen und Unterabteilungen und, und, und!
Mega Menüs entstehen daher oft in verzweifelten Meeting Situationen.

Macht mir wenigstens Links mit Bildern in das Mega Menü, sieben nebeneinander …

Manche Mega Menüs sehen aus wie kleine Websites. Mittlerweile macht man sich ernsthaft Gedanken in A/B Tests um die Ladezeit von Menüs!

Natürlich gibt es für die üblichen Verdächtigen wie beispielweise Magento, WordPress, Drupal und Joomla entsprechende Mega Menü Erweiterungen. Das Thema ist allerdings in allen Systemen sehr komplex, selten elegant und technisch sauber gelöst. Ich habe viele Mega Menüs ausprobiert und ich weiß um die Schwierigkeiten so etwas responsiv oder gar barrierefrei vernünftig darzustellen.

Daher soll dieser Text auch eine kleine Hilfe für Agenturen und Site Builder sein, gewissermaßen eine Diskussionsgrundlage, um mal mit dem Kunden über Mega Menüs zu sprechen.

Geht es auch ohne Mega Menüs?

Schauen wir doch mal bei den Anderen.

Was macht Apple?

Keine Mega Menüs!

Apple - Desktop
Apple.ch – Desktop
apple.com - Mobile
Apple.ch – Mobile

Nun kann man natürlich sagen, dass das ja Apple ist und da ist eh immer alles schicker und toller. Ein anderes Beispiel ist der Bekleidungshersteller Wolford, IT-technisch eher unverdächtig.

Wolford - Desktop
Wolford – Desktop
Wolford - Mobile
Wolford – Mobile

Beide Sites sind responsiv, passen sich dem Ausgabegerät dynamisch an, verzichten auf Mega Menüs, sind übersichtlich und haben eine hilfreiche Navigation. Es macht Spaß zu stöbern und einkaufen kann man dort auch sehr einfach!

Die angesagten Browser heißen jetzt übrigens Edge (Microsoft) und Chrome (Google). Mal sehen wann Safari (Apple) und Firefox (Mozilla) den Namen ändern. 

Fazit

Wenn Mega Menüs mit Bedacht eingesetzt werden, sind sie nicht super störend für den Besucher der Site. Trotzdem sollte jeder Seitenbetreiber, der Mega Menüs benutzt, mal in einer ruhigen Stunde an die Idee und die Geschichte des Hyperlinks und des World Wide Web denken und möglicherweise auch seinen Inhalt neu strukturieren 😉

Links:


tl;dr: Mega Menüs sollten mit Bedacht eingesetzt werden

Save

Autor: Hagen Graf

consultant, author, trainer, solution finder, web architect, developer, open source lover, visionary, orator, the good old webmaster. Able to simplify!

Kommentar verfassen