Dropdown-Menüs sind auf Websites zum Standard geworden. Mit ihrer Hilfe sind umständliche Click-by-Click-Navigationen, wie sie von frühen Webseiten der 90er Jahre bekannt sind, obsolet geworden. Auch komplexe Inhaltshierarchien lassen sich dadurch übersichtlich und schnell erfassbar darstellen, womit eine intuitivere Bedienung und Interaktion mit der Webseite ermöglicht wird.
Usability-Probleme von Dropdown-Menüs
Doch die mögliche Effizienzsteigerung einer zielführenden Navigation ohne zusätzliche Klicks stellt Probleme aus Usability-Perspektive dar: wird die Mausbewegung von einer Hauptkategorie in eine Subkategorie nicht exakt horizontal ausgeführt, führt sie über den Mouse-Over-Bereich einer darüber oder darunter liegenden Hauptkategorie und öffnet ungewollt ein anderes Submenu. Das Resultat: Die gewünschte Unterkategorie springt schon bei kleinen Ungenauigkeiten in der horizontalen Mausführung in eine andere Darstellung um oder verschwindet ganz. Eine diagonale Mausführung als natürlichste Form des direkten Weges ist gar unmöglich (wie Ben Kamens anschaulich illustriert).
Um diesem Problem zu begegnen, werden Subkategorien in derartigen Dropdown-Menüs daher gewöhnlich mit einer leichten Verzögerung (Hysteresis) ausgelöst. Zwar erleichtert das die Navigation, indem dadurch ein Großteil der ungewollten Aktionen ignoriert werden, andererseits reagiert das Menü dadurch jedoch insgesamt zäher. Das eine Usability-Problem wird somit folglich nur durch ein anderes ersetzt – mit kostspieligen Folgen im E-Commerce-Umfeld aufgrund von Abbrüchen im Einkaufsprozess.
Lösung des Usability-Problems: Prognose des Maus-Pfades
Mit den beschriebenen Usability-Problemen konfrontiert entwickelte Amazon für seine Website die folgende Lösung: innerhalb des Triangles von ausgewältem Menü-Punkt und der oberen und unteren rechten Ecke des Sub-Menüs greift eine Verzögerung, wenn man die Maus von links nach rechts bewegt.
Dies ist der natürlichste Maus-Pfad bei der Auswahl eines Unterpunktes, ein Wegspringen bei der Navigation über andere Menü-Punkte wäre störend. Bei vertikaler Navigation über die Menü-Punkte jedoch oder bei Navigation aus dem Sub-Menü nach links, springt das Menü jedoch ohne Verzögerung um, so dass die gesamte Navigation gleichzeitig sehr responsive ist:
Benutzerfreundliche Dropdown-Menü-Navigation bei Amazon
Der Code für die Implementierung eines derartigen Menüs auf GitHub.
