Das Leid mit den verzögerten Superdropdowns

Datum: 7. März 2013
Autor: Axel Güldner


Jeder der bei uns mit dem Thema HTML Coding zu tun hat, durfte wahrscheinlich schon einmal einen Screen umsetzen, in welchem eine Klappnavigation in Form eines Superdropdowns vorgesehen war. Wer jetzt nicht weiß was ich mit Superdropdown meine, dass sind diese Riesen Unternavigationen, in welchen neben der zweiten Navigationsebene, noch einige weitere Inhalte untergebracht sind (Teaser, Formulare, die dritte Navigationsebene). Beispiele sind die Seiten von Bayern und Grassau.

Das Problem dieser Navigationsmonster

Aktiviert der Seitenbesucher einen Hauptnavigationspunkt, ploppt darunter oder daneben eine ganze Liste mit neuen Inhalten auf. Beim Versuch mit der Maus zu diesem neu aufgeklappten Bereich zu kommen, ist der User meistens nicht so maschinell genau wie wie wir. Häufig wird der Mauscursor schräg zum nächsten Zielpunkt bewegt, was nicht selten dazu führt, dass der Mauscursor auf seinem Weg einen anderen Hauptnavigationspunkt streift.

Dies führt nun meistens dazu, dass das eben gerade erst ausgeklappte Untermenü wieder eingezogen wird, um dem Untermenü des unbeabsichtigt berührten Hauptnavigationspunktes Platz zu machen. Der Seitenbenutzer gerät im Angesicht eines derart fricklig zu bedienenden Menüs, in diverse negative Zustände (Verwirrung, genervt sein, Rage, Kernexplosion)

Ich habe dies mal am Beispiel von Oslo visualisiert, man sieht wie der User zunächst mit der Maus über Service geht, dass nächste Ziel wäre dann der Unterpunkt Kontakt. Der durchschnittliche User versucht nun in einer direkten Linie die Maus zu seinem Ziel zu bewegen, wird dabei aber den Punkt Angebote streifen und dann ist es auch schon passiert, das Klappmenü von Service verschwindet und macht dem Klappmenü von Angebote Platz.

JavaScript Timeouts lösen das Problem, oder etwa nicht?

Eine Taktik die nicht nur wir dann gerne mal einsetzen heißt „Timeout“. Mittels JavaScript wird dabei das Rein- und Rausfahren von Klappmenüs zeitverzögert ausgelöst. Dadurch wird in den meisten Fällen einer unbeabsichtigten Berührung eines Hauptnavigationspunktes, der Untermenüwechsel vermieden. Nachteil bei dieser Lösung, die Navigation reagiert träge und wirkt schwammig. Die Bedienung fühlt sich einfach nicht mehr gut an.

Ein neuer Ansatz – Erkenne die Absicht des Besuchers

Amazon hat nun einen neuen Lösungsweg für uns parat. Beim Verlassen eines Hauptnavigationspunktes mit der Maus, wird die Mausbewegung analysiert, mit Hilfe eines Bewegungsvektors. Liegt dieser Vektor innerhalb eines errechneten Dreiecks, dessen Spitze der ursprüngliche Ausgangspunkt der Mausbewegung war, so kann angenommen werden, dass der User versucht das Klappmenü zu erreichen. Ein Wechsel zum nächsten Untermenü beim Berühren eines anderen Hauptmenüpunktes, wird dann nur zeitverzögert ausgelöst.

Liegt der Vektor aber ausserhalb des Dreiecks, so wird der Wechsel zum nächsten Klappmenü sofort vollzogen.

Das Ergebnis ist ein sehr angenehm zu bedienendes Klappmenü, dessen Reaktionen knackig direkt sind, bei einem ungewollten Überfahren von Hauptmenüpunkten nicht gleich deren Untermenüs ausfährt.

Der Webentwickler Ben Kamens hat das Verhalten von Amazons Klappmenü bereits analysiert und ein jQuery Plugin geschrieben, welches dieses Verhalten kopiert.

http://bjk5.com/post/44698559168/breaking-down-amazons-mega-dropdown

Ich denke das wäre eine wirklich schöne Vorlage für Superdropdowns in unseren Portalen. Denn gerade diese unerwünschten Klappmenüwechsel zählen zu den häufigsten Kritikpunkten, die ich beim Vorzeigen von unseren Portalen bei Freunden, Bekannten und Familie zu hören bekomme (gerade erst gestern bei oslo.de)

Kommentare

Selber kommentieren:






Weitere Beiträge zum Thema Technologie


Linux Ordner und Datei Rechte

Autor: Florian Müller


Technologie


Da ich gerade darauf gestoßen bin und es für einige Verwirrung bei mir und ein paar anderen gesorgt hat (vor allem bei mir), möchte ich meine Erkenntnisse über das Thema Linux Datei und Ordner Rechte mit euch teilen. Man stelle sich vor, man hat eine Datei die in einem Ordne liegt, welche die folgenden Rechte …


Beitrag lesen
02.
August
2016

video.js – HTML5-Video-Kmponente mit Polyfill für alte Browser

Autor: Stefan Oswald


Projekte // Technologie // User Experience & Design


Webseite: http://www.videojs.com/ Ich habe es mir noch nicht im Detail angeschaut, aber rein von der Beschreibung her könnte das für uns mal ganz nützlich sein. Man kann per API auch Loader für eigene Video-Provider umsetzen. Kostenlos einsetzbar dank Apache 2.0 Lizenz.


Beitrag lesen
14.
Mai
2013

OOP 2015 – Tag 1

Autor: Marc Kurzmann


Technologie // Über den Tellerrand


Auch dieses Jahr haben die Organisatoren die OOP voll mit interessanten Themen gespickt, vornehmlich aus den Bereichen Software-Architektur, Projekt-Management, agile Prozesse und Technologietrends. Begonnen hat es für mich heute früh mit der Session „NoSQL in transaktionalen Enterprisesystemen“ aus dem Themenslot „Trends & Techniques“. Während der erste Teil des Vortrags einen interessanten Überblick über die NoSQL-Datenbanken …


Beitrag lesen
27.
Januar
2015

PHP-Funktionen in PHPUnit testen

Autor: Benjamin Hofmann


Technologie


Gestern bin ich auf eine interessante Erweiterung für PHPUnit gestoßen, die es erlaubt auch reine Funktionen als Mock-Objekte anzulegen und deren Verhalten damit zu testen: PHP-Mock bzw. dessen Erweiterung für die Nutzung in PHPUnit. Damit kann man dann sehr bequem auch interne Funktionen testen, z.B. file_get_contents() oder auch ein mail(). Ein so gearteter Test könnte …


Beitrag lesen
13.
Januar
2017