Dropdown-Menü ohne Usability-Einbußen

17. Juni 2013 Agnieszka M. Walorska (@agaw)

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.

Amazon Menü-Triangle

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.

#####

Wir freuen uns auf Ihre Nachricht!

Sie haben ambitionierte Pläne und benötigen Unterstützung? Wir freuen uns darauf, von Ihnen zu hören!

Kontakt aufnehmen

Ähnliche Artikel

Podcast #148 | Krypto-Kurssturz, Adidas im Metaverse, Square = Block, Amazon überholt FedEx & UPS, Grab-Spac

Agnieszka und Alexander sprechen über den Kurssturz der Kryptowährungen und wie dies mit den Aktienmärkten zusammenhängen könnte.

Podcast #146 | Amazon vs. Supermärkte & Visa, N26 US-Rückzug, Dark Patterns, Apple & Right-to-Repair

Agniezska und Alexander sprechen diesmal über die Supermarkt-Offensive von Amazon in Großbritannien und wie sich dies auf den ganzen Sektor auswirken wird.

Podcast #143 | Facebooks „Meta“-morphose, Bigtech-Quartalszahlen, Adobe und NFTs, Ghoststores bei Instagram

Agnieszka und Alexander sprechen über Facebooks Umbenennung zu Meta und die Quartalszahlen der BigTechs.

Alle Artikel