SinnOptics Blog

Herzlich willkommen auf dem Weblog von SinnOptics. Wenn Ihnen dieser Beitrag gefällt, abonnieren Sie doch kostenlos unseren RSS-Feed oder folgen uns auf Twitter. Damit sind Sie immer über unsere neuesten Meldungen informiert.

Kategorien

Design (1)

E-Marketing (8)

Marketing (1)

News Sinnoptics (6)

Trends (3)

Webdesign (12)

Werbung (2)

Follow us
on Twitter!

Neuigkeiten und Trends schicken wir auch über unseren Twitter-Account SinnOptics.

Marketing- & Onlinespezialisten fordern auf der Emex mehr Kundenorientierung http://tinyurl.com/3ytnq4g — vor 1 Woche 6 Tage
Barrierefrei in den Naturpark – eine Internetlösung nach dem Prinzip „Einfach für alle“ http://tinyurl.com/3yqx3a7 — vor 3 Wochen 6 Tage
Barrierefrei in den Naturpark – <BR>eine Internetlösung nach dem Prinzip <BR>„Einfach für alle“ http://tinyurl.com/3yqx3a7 — vor 7 Wochen 1 Tag
Management-Trainee in Delhi? Green Tourism in Goa? Hilfsprojekte in Mumbai? http://tinyurl.com/2wmxbba — vor 13 Wochen 5 Tage
Neuer Website-Relaunch online! Clickcareer, die Vermittlungsstelle für ein Auslandspraktika in Indien! http://www.clickcareer.de/ — vor 14 Wochen 1 Tag

Bessere User Experience durch Mega-Dropdown-Navigationsmenüs

Verfasst von J. Elfering

Zu Beginn jedes Webentwicklungsprojekts stellt sich die Frage, welche Techniken für Navigationsmenüs benutzt werden sollen, um eine Vielzahl von Seiten optimal erreichbar zu machen. Oftmals wurde hier auf klassische Methoden wie vertikale Menüs gesetzt, die sich nach unten erweitern (Baumansicht) oder zur Seite ausklappen (Flyout-Menüs). Andere Klassiker sind horizontale Menüs, deren Unterebenen in einer zweiten Zeile (Navigationbar) oder aber vertikal in der Seitenleiste untergebracht sind, sowie die bekannten Dropdown-Menüs.

Alle diese Varianten haben aber Nachteile in der Usability:

sei es die diffizile Mausbedienung, bei der man allzu oft aus dem Menü heraus fährt und dieses sich sofort schließt, so dass man wieder von vorne anfangen muss, sich seinen Pfad durch das Menü zu hangeln,
weite Mauswege zwischen vertikalem und horizontalem Menü,
oder Menüpunkte, die sich je nach Ort an dem man sich befindet weiter oben und unten liegen
und fast immer auch eine mangelnde Übersicht, was einen auf den Unterseiten erwartet.

Besonders normale Dropdowns, und die ähnlich funktionierenden Flyouts sind bei vielen Webentwicklern als nicht sehr benutzerfreundlich bekannt. Bereits im Jahr 2000 veröffentlichte der Web-Usability Experte Jakob Nielsen einen Artikel über die Unzulänglichkeiten solcher Menülösungen.

Spätestens aber seit Nielsens Artikel „Mega Drop-Down Navigation Menus Work Well“ gibt es mit den Mega-Dropdown-Menüs eine besser funktionierende Alternative zu den klassischen Menüs. Mega-Dropdowns zeichnen sich vor allem dadurch aus, dass eine große Fläche ausklappt, auf der die Menüpunkte gut strukturiert dargestellt werden, so dass der Benutzer eine bessere Übersicht über die vorhandenen Navigationspunkte hat.

Für eine optimale User Experience sollte bei den Mega-Dropdowns auf folgendes geachtet werden:

Bei Überfahren anderer Menüelemente oder beim Verlassen des Dropdowns mit dem Mauszeiger sollte das aktuelle Menü nicht sofort verschwinden (Nielsen empfiehlt hier eine Verzögerung von 0,5 Sekunden). Dies kann z.B. mit dem jQuery Plugin hoverIntent verwirklicht werden
Das Menü sollte möglichst einfach und klar strukturiert sein. Dies kann z.B. durch Gruppierung von Menüpunkten und den Einsatz von hilfreichen Icons geschehen
Es sollte nicht gescrollt werden müssen
Die Navigation sollte auch per Tastatur bedienbar sein
Mehr als zwei weitere Navigationsebenen sind auch mit den Mega-Dropdowns nicht sinnvoll

Showcase von Mega-Dropdowns im Internet:
http://www.dp-dhl.com/de
http://www.otto.de/shop-de_home
http://www.diy.com/diy/jsp/?_requestid=49401
http://www.johnlewis.com/
http://www.samsung.de/de/business/default.aspx
http://www.audi.de/ (Menüpunkt Modelle)
http://www.schaefer-shop.de/
http://www.whitehouse.gov/
http://www.reuters.com/