it-swarm.com.de

Gibt es einen Namen für dieses Dropdown-Anti-Pattern?

Kürzlich habe ich ein kleines Problem mit der Benutzeroberfläche in Mouse-Over-Dropdowns gesehen. Hier ist ein Beispiel für ein solches Dropdown (obwohl Bloomberg nicht der einzige Täter ist):

https://www.bloomberg.com/view/articles/2017-08-09/yogurt-liquidity-and-listings

edit : Hinzufügen eines markierten Screenshots für historische Zwecke. Die rote Linie ist der Mauspfad des Benutzers. Wenn Sie das rote Feld eingeben, wird das Dropdown-Menü "Meinung" sofort ausgeblendet.

(Bloomberg View - Menu issue

Wenn Sie in der oberen Leiste den Mauszeiger über "Meinung" bewegen, werden Links zum Abschnitt "Meinung" angezeigt.

Das Problem: Ein geradliniger Pfad von Positionen innerhalb der Schaltfläche "Meinung" zu einigen Links führt durch den Abschnitt "Politik" und löscht sofort die Optionen für die Meinung. Dies bedeutet, dass der Benutzer bei der Auswahl des Links bewusst über den Mauspfad nachdenken muss.

Gibt es einen Namen für dieses Problem? Was sind die besten Möglichkeiten, um es zu lösen?

edit : Hier ist ein zusätzliches GIF, das das Problem anzeigt, mit freundlicher Genehmigung von Ben Kamens 'Blog , das auch verlinkt von Midas unten :

(Gif demonstrating menu issue

244
N. Quest

Ein Vorschlag für einen Namen für eine Lösung stammt von dieser großartige Artikel ist Richtungsmenü mit dem Ziel .

Es zeigt, wie Amazon verhindert, dass Benutzer ein unerwünschtes Element falsch auswählen, während sie mit der Maus über ihr 'Mega-Menü' fahren, ohne Verzögerungen, indem sie den Pfad des Cursors erkennen.

An jeder Position des Cursors können Sie ein Dreieck zwischen der aktuellen Mausposition und der oberen und unteren rechten Ecke des Dropdown-Menüs darstellen. Wenn sich die nächste Mausposition innerhalb dieses Dreiecks befindet, bewegt der Benutzer wahrscheinlich seinen Cursor in das aktuell angezeigte Untermenü. Amazon nutzt dies für einen schönen Effekt. Solange sich der Cursor innerhalb dieses blauen Dreiecks befindet, bleibt das aktuelle Untermenü geöffnet.

(Amazon Hover Menu direction

289
Midas

Das Problem, über das Sie sprechen, wird manchmal als " schmaler Mauskorridor " bezeichnet. Ein schmaler Mauskorridor kann führen dazu, dass Benutzer durch das Fehlen von Benutzerkontrolle frustriert werden.

Eine Alternative zu Amazonas Dreiecksansatz (der ursprünglich von Bruze Tognazzini 1986 mit Apple durchgeführt wurde) ist die Verwendung von kleine Kästchen zur Erweiterung des Korridors . Ein Vorteil dieser speziellen Implementierung besteht darin, dass es sich um reines CSS (Pseudo-Elemente) handelt, sodass das Abhängigkeit von jQuery (oder Vanilla JS) entfernt wird.

(Image from: https://css-tricks.com/dropdown-menus-with-more-forgiving-mouse-movement-paths/

(Bild von: https://css-tricks.com/dropdown-menus-with-more-forgiving-mouse-movement-paths/ )

96
Jonathan

Wo ich arbeite, nennen wir das ein "Death-Star-Trench-Menü". Ich bin mir ziemlich sicher, dass wir diesen Namen nicht erfunden haben, aber ich kann das Buch nicht finden, aus dem es stammt.

36
Matthew

Aus Sicht des Programmierers würde ich eine Hover-Intent-Funktion vorschlagen (Verzögerung der Umgebungsreaktion um ca. 300 ms. Dies ist nicht allzu sichtbar und würde das Risiko eines versehentlichen Schließens/Öffnens von Menüs verringern). Obwohl Sie vielleicht feststellen, dass sich die 300 ms in komplexeren Bäumen von Menüs und Untermenüs summieren würden.

9
Snsa90

Der Name, den ich für dieses Muster verwende, ist Schwebetunnel .

Schwebetunnel sind seit langem als problematisch anerkannt: http://uxmovement.com/navigation/why-hover-menus-do-users-more-harm-than-good/

Eines der schlimmsten Dinge an Hover-Menüs ist, dass sie Benutzer dazu zwingen, ihre Maus durch Hover-Tunnel zu bewegen. Schwebetunnel sind Passagen, durch die Benutzer ihre Maus bewegen müssen, um auf ein Element zu klicken. Ältere Benutzer, die weniger technisch versiert sind, haben häufig Probleme damit. Selbst technisch versierte Benutzer können es ärgerlich finden, dass sie ihre Maus auf einem begrenzten Weg bewegen müssen.

Ich vermute, dass das 'Anti-Pattern' nur ein Nebeneffekt des Zusammenbruchs des Schwebetunnels ist, da es insgesamt kein zuverlässiger Weg wäre, Benutzer zu leiten zu Anzeigen oder anderen Inhalten.

4

Nein, für dieses Muster gibt es keinen Namen.

Es ist nur ein Hover-Menü, Hover-Menüs sind Müll, wenn es um UX geht. Sogar ich, ein erfahrener Internetnutzer, habe Probleme beim Navigieren durch solche Menüs und in 9 von 10 Fällen werde ich wütend, wenn ich ein Hover-Menü verwenden muss.

Eine Sache, um solche Menüs ein wenig benutzerfreundlicher zu gestalten, besteht beispielsweise darin, eine kleine Verzögerung festzulegen, wenn der Benutzer aus der Tabelle heraus navigiert, damit das Menü nicht sofort geschlossen wird, sondern eine Verzögerung von 1 bis 1,5 Sekunden aufweist, sodass der Benutzer die Möglichkeit hat, sich zu bewegen die Maus zurück in seinem normalen Fluss.

1