Dropdown-Menüs mit nachsichtigeren Mausbewegungsbahnen

Dies ist ein ziemlich altes UX-Konzept, über das ich schon eine Weile nichts mehr gehört habe, das aber bei mehrstufigen Dropdown-Menüs immer noch relevant ist. Ein feingranularer Zeiger wie eine Maus muss manchmal durch ziemlich enge Korridore reisen, um genau dorthin zu gelangen, wo er in einem Dropdown-Menü hingehört. Es ist leicht, etwas falsch zu machen (der Mauszeiger verlässt den Pfad) und dafür bestraft zu werden, dass es sich schließt. Vielleicht können wir das weniger frustrierend machen.

Ein grundlegender CSS-Ansatz

Dropdown-Menüs sind typischerweise so konzipiert, dass ein Untermenü durch CSS bei einem :hover eines Elternelements angezeigt wird. Oder bei einer Zustandsänderung in JavaScript mit mouseenter / mouseover. Der Trick besteht also darin, zu versuchen, das Eintreten dieser Ereignisse zu verhindern. Die Korridore sozusagen erweitern.

Der Hauptgrund, warum ich darüber nachgedacht habe, ist, dass die Korridore für unsere Untermenüs im Haupt-Dropdown bei CodePen sehr eng waren. Um sie an der Engstelle zu erweitern, habe ich dem Untermenü ein paar Pseudoelemente hinzugefügt. Wenn die Maus darüber fährt, passiert nichts, es ist so, als wäre die Maus wie gewohnt innerhalb des Untermenüs.

Dies ist eine sehr leichte Technik, die nur CSS erfordert, was mir gefällt. Die leichte Gefahr besteht darin, dass man eine beträchtliche Anzahl angrenzender Menüelemente überdecken kann, was bedeuten könnte, dass ein Benutzer über ein legitimes Menüelement fährt und es nicht anklicken kann. Ich stelle mir vor, dass in vielen Fällen einfach die Maus ein wenig bewegt wird und es funktioniert, aber es ist definitiv ein Balanceakt zwischen zu klein und zu groß.

Die Geschichte davon reicht bis ins Jahr 2005 zurück und eine klassische Position is Everything Demo

Und potenziell eine Thierry Koblentz Demo.

CSS-Grenzen erweitern

John Gardner entwickelte einen Ansatz, bei dem alle Menüs zusätzlichen Platz um sich herum haben, was die nachgiebigen Hover-Offs ermöglicht.

Sieht so aus, als wäre das aus dem Internet gelöscht worden, tut mir leid! Es gibt viele CSS-Dropdown-Menüs auf CodePen zum Erkunden.

(Kein) Hover-Intent

Haben Sie schon von „Hover Intent“ gehört? Das ist dieses Konzept, bei dem man nicht sofort auf Mauspositionsereignisse reagiert. Man wartet einen Bruchteil einer Sekunde, um sicher zu sein, dass der Benutzer eine Reaktion wünschte. Es ist wie eine absichtliche Verzögerung. Es wird in Situationen verwendet, in denen die Benutzeroberfläche ohne sie zu zappelig wäre.

Das Gegenteil davon könnten wir „Unhover Intent“ nennen. Wir reagieren sofort auf ein Hover-Ereignis, aber erst nach einiger Zeit auf ein Hover-Off. In CSS könnte man etwas tun wie

.submenu {
  visibility: hidden;
  transition: 0.2s 1s; /* delay of 1 seconds on hover off */
}
.parent:hover .submenu {
  visibility: visible;
  transition-delay: 0s; /* react immediately on hover */
}

Beachten Sie, dass wir hier visibility verwenden, was übergangsfähig ist, im Gegensatz zu display, was (merkwürdigerweise) nicht übergangsfähig ist.

JavaScript ist sicherlich auch in der Lage, „Unhover Intent“ zu implementieren. Man würde es ähnlich wie ein Debouncing angehen, bei dem man die Funktionen, die zum Schließen führen, nicht aufruft, es sei denn, es ist eine gewisse Zeit vergangen. Das könnte mit einem setTimeout geschehen, den man löscht, wenn die Maus zurückkehrt. Dies ist zu vereinfacht, aber

var timer;

$(".parent").on("mouseover", function() {
  clearTimeout(timer);
  openSubmenu();
}).on("mouseleave", function() {
  timer = setTimeout(
    closeSubmenu
  , 1000);
});

function openSubmenu() {
  $(".submenu").addClass("open");
}
function closeSubmenu() {
  $(".submenu").removeClass("open");
}

Keine dieser Unhover-Demos hat das Korridorenproblem durch Vergrößerung gelöst, sie haben es durch Vergebung eines schnellen Verfehlens der Mausposition gelöst.

Den engen Korridor vermeiden

Es gibt keine Regel, dass Untermenü-Dropdowns zur Seite gehen müssen. Wenn sie sich direkt darunter öffnen, bleibt der Korridor breit. Hier ist ein Beispiel dafür von Timothy M. LeBlanc.

Mit einem JavaScript-dreieck schick werden

Es gibt einen großartigen Beitrag von Ben Kames vor ein paar Jahren zu diesem Thema. Er untersuchte, wie flink die Dropdown-Menüs von Amazon.com im Vergleich zu anderen Dropdowns waren, die Verzögerungstaktiken zur Bewältigung der Benutzerfreundlichkeit einsetzen. Die Magie war Mathematik! Wenn die Maus in einem vernünftigen Winkel zum neu geöffneten Untermenü fuhr, löste sie die anderen Menüelemente nicht aus. Visuelle Hilfe.

Ben hat daraus ein jQuery-Plugin gemacht, das Sie hier ausprobieren können.

Er hat auch absolut Recht damit

Ich bin sicher, dass dieses Problem vor langer Zeit gelöst, vergessen, wiederentdeckt, erneut gelöst, vergessen, wiederentdeckt und wieder gelöst wurde.

Das ist eine traurige Wahrheit über viele Dinge in unserer Branche.

Jon Neal versuchte, die jQuery-Abhängigkeit zu entfernen und die Mathematik mit „baryzentrischen Koordinaten“ zu verbessern.

Alex Popov schrieb und sagte, er habe sich mit dieser Demo beschäftigt und deren Funktionalität verbessert. Ich hatte keine Zeit, alles wieder in meinen Kopf zu laden, um die funktionalen Unterschiede zu verstehen, aber hier ist ein Link zu Alex' Version, falls Sie sich damit tiefgehend beschäftigen und nach Möglichkeiten suchen.

Andere Bedenken

Ich denke, ein weiser Mensch sagte einmal

„Manchmal haben Besucher Ihrer Website eine Maus und manchmal nicht.“

Hoffentlich funktionieren Ihre Dropdowns auch mit Touch. Sie können sie sicherlich zum Laufen bringen! Sie können auch entscheiden, ob Sie allen Code zur Effizienz bündeln möchten oder ob eine Art Feature-Erkennung erforderlich ist, um verschiedene Skripte und Stile nach Bedarf zu laden (oder eine Kombination aus beidem).

Tastaturbedienbarkeit ist ein weiteres klassisches Problem bei Dropdown-Menüs. Ich wollte Sie nicht mit der Vorstellung allein lassen, dass die Verbesserung der Mausbewegung alles ist, was Sie für eine gute Dropdown-UX tun müssen. Es gibt immer etwas zu verbessern!

Weitere Beispiele

Begann mit dem Zeichnen dynamischer SVG-Hitbereiche für diese Menükomponente 👀 pic.twitter.com/tKqwN5F6rW

— Hakim El Hattab (@hakimel) 27. Mai 2019