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

CES 2018 – Mercedes-Benz stellt intelligentes Infotainmentsystem MBUX vor

Heute geht in Las Vegas die größte Consumer-Electronics-Messe CES zu Ende. Von Wearables über Fernseher, Voice Assistents bis Prozessoren versuchen sich alle Hersteller von Rang und Namen stets um die Aufmerksamkeit der Besucher und Weltöffentlichkeit zu überbieten. Dieses Jahr haben Autos allen anderen Kategorien die Show gestohlen. Mit Begeisterung wurde das neue Infotainmentsystem namens “MBUX” (Mercedes […]

vimedi: Einnahme von Medikamenten einfach sicher

Allein in den USA kommen jedes Jahr 130.000 Menschen ums Leben, weil sie sich nicht an die vorgeschriebene Einnahme von Medikamenten gehalten haben. Abgesehen von diesem traumatischen Erlebnis für so viele Familien, belastet die falsche Einnahme von Medikamenten das Gesundheitssystem mit USD 290 Milliarden pro Jahr. Die Komplexität der korrekten Einnahme von Medikamenten liegt auf der […]

Wie Amazon sich seine Innovationsdynamik bewahrt

Startups sind geprägt von einer Dynamik, in der Geschwindigkeit und schnelles Lernen oberste Priorität hat. Jeden Tag gilt es, neue Annahmen zu testen. Mit dem Wachstum des Unternehmens werden dann nach und nach Prozesse geschaffen, die die weitere Skalierung aufbauend auf dem Gelernten ermöglichen und Chaos verhindern sollen. Das Gelernte und dabei optimierte Vorgehen bilden somit Rahmen […]

Alle Artikel