it-swarm.com.de

Sollte eine Dropdown-Liste geschlossen werden, wenn die Maus geht?

Sollte eine Dropdown-Liste automatisch geschlossen werden, wenn Sie das aktuelle Objekt verlassen und zu einem anderen navigieren, oder sollte sie geöffnet bleiben, bis Sie die nächste Dropdown-Liste öffnen?


  1. Dropdown geschlossen, wenn die Maus geht

(Option 1


  1. Dropdown bleibt geöffnet

(Option 2

82
rpavlyk

Aus Gründen der Konsistenz sollte das Verhalten auf der aufrufenden Aktion basieren; klicken oder schweben.

Wenn Sie die Dropdown-Liste beim Klicken öffnen, lassen Sie den Benutzer sie umschalten und schließen oder schließen Sie die vorherige Dropdown-Liste, wenn der Benutzer auf eine andere Miniaturansicht klickt.

Wenn Sie das Dropdown-Menü beim Mouseover öffnen, schließen Sie es beim Mouseout.

273
DPS

Die Antwort auf diese Frage ist Teil einer allgemeineren UX-Regel: Das Bewegen der Maus (ohne gedrückte Taste) wird nicht eingegeben, und Anwendungen sollten nicht mit nicht trivialen Maßnahmen darauf reagieren. Zu den trivialen Aktionen gehören das Hinzufügen/Entfernen von Unterstreichungen, das Ändern der Farbe oder das Ausführen einer kleinen, räumlich isolierten Animation, um die Klickbarkeit anzuzeigen. Das Ein- oder Ausblenden von Informationen/UI-Elementen ist nicht trivial und für Benutzer, die den Mauszeiger (der aus Gründen der Barrierefreiheit möglicherweise übergroß ist!) Über den Text, den sie lesen möchten, bewegen, damit sie ihn lesen können, sehr ärgerlich.

Hinzugefügt (da die Kommentare eine Debatte darüber zu erzeugen scheinen, was "trivial" ist): Meine Absicht ist, dass eine Aktion/Reaktion auf Mausbewegungen trivial ist, wenn:

  1. Das vollständige Weglassen würde keine Informationen entfernen oder die Fähigkeit zur Interaktion mit der Schnittstelle einschränken
  2. Das Vorhandensein der Aktion stört oder beeinträchtigt nicht die Fähigkeit, die Schnittstelle zu lesen oder mit ihr zu interagieren.

Mouseover-Dropdowns/Menüs (und auch QuickInfos) schlagen beide Kriterien fehl, wenn sie nicht auch durch Klicks aktiviert werden können, und schlagen die zweite in beiden Fällen fehl, es sei denn, Sie veranlassen, dass sie in einem speziellen Bereich angezeigt werden, in dem sie andere Inhalte nicht verdecken.

Ich denke ehrlich, dass Hover-Menüs UX völlig schlecht sind.

Ich vermute, der einzige Grund, warum sie überhaupt existieren, ist, dass sie einfacher in reinem CSS zu implementieren sind, sodass der Entwickler mit etwas davonkommen kann, das der Benutzer nicht unbedingt möchte.

Hier sind einige Punkte zu beachten:

  • Die meisten Betriebssysteme warten auf einen Benutzerklick, bevor sie ein Menü aktivieren. Das Hover-Menü widerspricht einem gut etablierten Muster.
  • Das Betriebssystem verfügt über Menüs in einem separaten Teil des Fensters, in denen deren Verhalten erwartet wird. Hover-Menüs sind Teil des Inhalts und konkurrieren mit dem Rest des Inhalts.
  • Benutzer verwenden routinemäßig eine Maus ohne Absicht oder einfach, um ihren Augen zu folgen. Das Hover-Menü stört dieses Verhalten und verdeckt häufig den Inhalt, den der Benutzer angesehen hat.
  • Touch-Geräte enthalten zu diesem Zeitpunkt keine echte Hover-Aktion. Hover-Menüs zeigen ein unterschiedliches Verhalten zwischen Desktop- und Touch-Geräten. Tatsächlich verhalten sie sich in diesem Zusammenhang häufig als Klickmenüs.
  • Nicht sehende Benutzer werden das Hover-Menü überhaupt nicht erleben, was eine kleine Gnade ist.

Während eine Webanwendung nicht genau mit einer Desktopanwendung identisch ist, müssen Konventionen und frühere Erfahrungen sowie Erwartungen berücksichtigt werden.

Durch Klicken (oder Berühren) aktivierte Menüs sind heutzutage einfach genug, um mit ein paar Zeilen CSS und (nicht jQuery) JavaScript implementiert zu werden.

Die kurze Antwort lautet: Ein Dropdown sollte absichtlich aktiviert und absichtlich deaktiviert werden. Dies geschieht nicht mit der Maus, sondern mit einem Klick oder einer Berührung.

42
Manngo

Ich stimme der Antwort von DPS zu, würde mich jedoch für explizites Verhalten entscheiden - also zum Öffnen klicken und zum Schließen klicken (oder Esc drücken).

Warum nicht "on-hover"?

Wenn der Benutzer das Dropdown-Menü öffnet und eine großzügigere Mausbewegung ausführt (bewegen Sie den Cursor weg, um alle Optionen zu lesen), verschwindet das Menü und erhöht den Ärger.

Es gibt noch etwas, das ich erwähnen möchte: Wenn das Dropdown-Menü angezeigt wird, befindet es sich unten links neben dem Mauszeiger. Meiner Meinung nach sollte es unten rechts platziert werden. Der Benutzer folgt dem Mauszeiger und in den meisten Kulturen tendieren wir dazu, die Informationen von links nach rechts zu verarbeiten. Wenn sich der Benutzer auf den Mauszeiger konzentriert, erwartet er, dass das Menü rechts angezeigt wird, damit sein Datenverarbeitungsfluss nicht gestört wird.

Wenn Sie die Option "On Hover" wählen, ist es sehr einfach, den Cursor von der Dropdown-Liste weg zu bewegen und auf diese Weise zu schließen.

23
Mike

... oder Sie können das Design komplett ändern. Persönlich halte ich es nicht für eine gute Idee, die Funktionalität unter drei Punkten zu verbergen.

Aktionen beim Schweben anzeigen

Sie können Click/Hover vollständig entfernen, indem Sie Aktionen direkt beim Hover anzeigen. Ich würde behaupten, es ist besser, da Sie den Klick speichern (der Kürze halber wird das Verschieben/Umbenennen nicht angezeigt).

(enter image description here

Aktionen im Hauptbildschirm anzeigen

Wenn das Design dies zulässt, können Aktionen immer auf dem Hauptbildschirm angezeigt werden. Wenn Sie der Meinung sind, dass Symbole vage sind, können Sie einen Tooltip hinzufügen oder das Layout ändern, um Symbole mit Beschriftungen anzuzeigen.

(enter image description here

12
Runnick

Sie können dem Benutzer eine Möglichkeit hinzufügen, die Dropdown-Liste zu schließen. Auf diese Weise gibt es keine Verwirrung darüber, wie es geschlossen werden soll, und es ist nicht ärgerlich, es versehentlich zu schließen, indem Sie die Maus aus dem Bereich bewegen.

(Windows style drop down with close button.

11
BlueMeanie

Ich finde dieses Verhalten ziemlich nervig, besonders bei verschachtelten Menüs, auf YouTube auf einem HTPC. Die Remote-Maus ist leicht aus der Spur zu bringen und wham Ich muss von vorne anfangen. Jeder mit weniger als perfekter Geschicklichkeit wird dies als ärgerlich empfinden.

Bitte machen Sie den genauen Pfad des Zeigers nicht zu einem notwendigen Teil der Benutzeroberfläche. Einige Menschen haben Mobilitätsprobleme, andere haben weniger als Ideenanzeigegeräte, andere befinden sich in einem fahrenden Fahrzeug usw.

9
JDługosz

Abgesehen von der Antwort von DPS, die sich mit Konsistenz befasst, würde ich vorschlagen, dass Sie den Klick anstelle von Hover . Es scheint, als hätten Sie ein Rasterlayout und möchten Ihre Benutzer nicht ärgern, wenn sie die Maus über diese Rasterelemente bewegen.

Es ist besser, es explizit zu halten, nur wenn der Benutzer versucht, auf die Aktionsschaltfläche zu klicken. Eine weitere Möglichkeit besteht darin, das Symbol so zu ändern, dass klar ist, dass er zurückklicken muss, um es umzuschalten.

(enter image description here

Stellen Sie sicher, dass es zusammenbricht, wenn der Benutzer auf eine andere Stelle auf der Seite klickt (dies schließt auch die Benutzer ein, die versuchen, auf das Aktionsmenü eines anderen Bildes zu klicken).


Eine andere Sache, die Sie ausprobieren können, ist, gemeinsame Aktionsschaltflächen zu haben und den Benutzer die Bilder bei langem Klicken auswählen zu lassen. Das einzige, was hier ein Problem sein könnte, ist die Verschiebungsoption. Ich bin mir nicht sicher, welche Funktionen Sie dort haben (d. H. Ist es ziehbar, klicken Sie auf Sortieren und so weiter).

Sie können diese Symbole problemlos animieren, sobald der Benutzer> = 1 Bild im Raster auswählt.

(enter image description here

6
Mr. Alien

Ich würde sagen: Klicken Sie auf ... zum Öffnen klicken Sie auf eine andere Stelle als das Dropdown-Menü, um es zu schließen. Sobald wir auf die Schaltfläche zum Öffnen klicken, neigen wir dazu, uns zu entfernen und zurück zu gehen und sie erneut zu drücken, kann anstrengend sein. Es besteht auch die Gefahr, dass das erste Element in der Dropdown-Liste gedrückt wird. Ich habe gesehen, dass das Öffnen/Schließen beim Schweben so schlecht funktioniert, dass ich denke, dass dies keine Option sein sollte. Was passiert ist, dass das Dropdown verschwindet, sobald Sie sich von ... Taste in Richtung Menü.

3
PhilipPirrip
  • Mouse-Over- und Mouse-Leave-Ereignisse zum Öffnen und Schließen eines Dropdown-Menüs sind im Allgemeinen keine gute Idee.
  • Klicken oder Berühren von Ereignissen sollte vorzugsweise ein Dropdown-Menü öffnen und schließen.

Genauer gesagt ... In dem Beispiel, das Sie in Ihrer Frage angegeben haben, in dem das Dropdown-Menü über einem Bildelement geöffnet wird, können Sie die Deckkraft des Menüs verringern (z. B. auf 20%), wenn der Benutzer die Maus herauszieht der Menübox. In diesem Fall haben Sie ein teilweise transparentes Menü in der Hand, sodass der Benutzer das Element unter dem Menü weiterhin anzeigen kann.

3
Peter Darmis

Sofortiges Schließen einer solchen Liste, selbst wenn sich die Maus für den Bruchteil einer Sekunde um ein Pixel außerhalb ihrer Region befindet - insbesondere bei Dropdowns, bei denen sich die Region aufgrund von Untermenüs ändert (was im schlimmsten Fall auch bedeutet, dass Ihr Benutzer eine ganze Navigationskette wiederholen muss) usw. - neigt dazu, sehr anfällig für unechte Mausbewegungen zu sein (erschwert, wenn: schlechte Mauskenntnisse, eine Maus, die auf Geschwindigkeit und nicht auf Präzision eingestellt ist, eine vibrationsreiche Arbeitsumgebung, geringe Größe von UI-Elementen).

Wenn das geöffnete Menü für immer erhalten bleibt, kann dies dazu führen, dass ein Benutzer verwirrt darüber ist, wie ein Menü geschlossen wird, das Inhalte oder andere Elemente der Benutzeroberfläche abdeckt.

Verzögerungen und eine gewisse Hysterese zwischen Aktivierungs- und Deaktivierungsbereichen folgen wahrscheinlich dem Prinzip des geringsten Erstaunens am besten ...

1
rackandboneman

Mobil oder nicht?

Vor einigen Jahren, als die einzige Eingabe die Verwendung der Maus war (oder das Drücken der Alt-Taste ... niemand hat das wirklich erwartet), war ein Mauszeiger eine gute Option.

Aber nicht mehr.

Das von Ihnen verwendete minimierte Design impliziert, dass das Design für ein kleines Gerät vorgesehen ist, sodass kein wirklicher Mauszeiger vorhanden ist.

Meine Meinung ist Klicken zum Öffnen und Klicken zum Schließen.

Ein Timer?

Aber Sie auch könnte einen Timer enthalten. Wenn in einigen Sekunden keine Eingabe erfolgt, kann dieses Menü zusammenbrechen.

Einige Probleme mit der Maus raus

  • Offensichtliches Problem mit einem mobilen Gerät.

  • Ein Desktop-Benutzer könnte Probleme haben, zum Beispiel mit einer defekten Maus, die den Mauszeiger wie verrückt bewegt (ich hatte manchmal einige billige Mäuse).

  • Einige Laptop-Pads können schwierig zu bedienen sein. Ein Maus-Hover/Out erfordert mehr Geschick vom Benutzer.

  • Ein weiteres Problem bei einem Maus-Hover-Mouse-Out-Ansatz besteht darin, dass der Benutzer den Zeiger möglicherweise aus irgendeinem Grund bewegen muss, das Menü jedoch weiterhin geöffnet sein muss. Ein Screenshot? In einem anderen Fenster arbeiten?

1
Rafael