マウスが離れたときにドロップダウンリストを閉じる必要がありますか？
現在のオブジェクトを離れて別のオブジェクトに移動するときにドロップダウンリストを自動的に閉じる必要がありますか、それとも次のドロップダウンリストを開くまで開いたままにしますか？
- マウスが離れるとドロップダウンが閉じます
- ドロップダウンは開いたままです
一貫性を保つため、動作は呼び出しアクションに基づく必要があります。クリックまたはホバー。
クリックでドロップダウンを開く場合は、ユーザーに切り替えて閉じさせるか、ユーザーが別のサムネイルをクリックしたときに前のドロップダウンを閉じます。
マウスオーバーでドロップダウンを開く場合は、マウスアウトでドロップダウンを閉じます。
この質問への答えは、より一般的なUXルールの一部です。つまり、マウスを動かす（ボタンを押したままにしない）ことは入力ではなく、アプリケーションは重要なアクションをとって応答するべきではありません。簡単なアクションには、下線の追加/削除、色の変更、小さな空間的に分離されたアニメーションを実行してクリック可能性を示すなどがあります。情報/ UI要素を表示または非表示にするのは簡単なことではなく、マウスカーソル（アクセシビリティの理由でサイズが大きくなる可能性があります）を読みたいテキストの上部から移動して、ユーザーがそれを読むことができるようにすると、ユーザーは本当に煩わしくなります。
追加（コメントが「些細なこと」についての議論を引き起こしているように見えるため）：私の意図は、次の場合、マウスの動きに対するアクション/反応は取るに足らないことです。
- 完全に省略しても、情報が削除されたり、インターフェースとの対話機能が制限されたりすることはありません。
- アクションの存在は、インターフェースの読み取りまたは対話機能を妨害または妨害しません。
マウスオーバードロップダウン/メニュー（およびツールチップ）は、クリックによってもアクティブ化できない場合は両方の基準を満たさず、他のコンテンツを不明瞭にしない特別な領域に表示されるように配置しない限り、どちらか一方が失敗します。
ホバーメニューは完全に悪いUXだと正直に思います。
そもそもこれらが存在する唯一の理由は、純粋なCSSで実装するほうが簡単であるため、開発者はユーザーが必ずしも望んでいないことを回避できるためだと思います。
考慮すべきいくつかのポイントを次に示します。
- ほとんどのオペレーティングシステムは、メニューをアクティブにする前にユーザーのクリックを待ちます。ホバーメニューは、十分に確立されたパターンに反しています。
- オペレーティングシステムでは、ウィンドウの別の部分にメニューがあり、その動作が予想されます。ホバーメニューはコンテンツの一部であり、残りのコンテンツと競合します。
- ユーザーは、意図せずに、または単に目を追うために、日常的にマウスを使用しています。ホバーメニューはこの動作を妨害し、ユーザーが見ているコンテンツを不明瞭にすることがよくあります。
- 現時点では、タッチデバイスには真のホバーアクションは含まれていません。ホバーメニューは、デスクトップデバイスとタッチデバイス間の異なる動作を表します。実際、このコンテキストでは、クリックメニューとして動作することがよくあります。
- 目の不自由なユーザーはホバーメニューをまったく体験しません。これは小さな慈悲です。
Webアプリケーションはデスクトップアプリケーションとまったく同じではありませんが、対応するための規則と以前の経験、および期待があります。
クリック（またはタッチ）でアクティブ化されたメニューは、最近では数行のCSSと（非jQuery）JavaScriptで実装するのに十分簡単です。
簡単に言うと、ドロップダウンは意図的にアクティブ化し、意図的に非アクティブ化する必要があります。これはマウスの移動ではなく、クリックまたはタッチによるものです。
DPSの回答に同意しますが、明示的な動作を選択します。つまり、クリックして開く、またはクリック（またはEscキーを押す）して閉じます。
「ホバー」しないのはなぜですか？
ユーザーがドロップダウンを開いてより寛大なマウスを動かすと（カーソルを離れるとすべてのオプションが表示されます）、メニューが消えて煩わしさが増します。
もう1つ触れておきたいことがあります。ドロップダウンが表示されると、マウスカーソルの左下に配置されます。私の意見では、右下に配置する必要があります。ユーザーはマウスポインターをたどります。多くの文化では、情報を左から右に処理する傾向があります。ユーザーがマウスポインターに集中している場合、メニューが右側に表示されることを期待しているため、データ処理フローが妨げられることはありません。
上記を念頭に置いて、「ホバー時」オプションを選択した場合、カーソルをドロップダウンから遠ざけ、ドロップダウンを閉じることは非常に簡単です。
...または、デザインを完全に変更することを検討できます。個人的には、3つのドットの下に機能を隠すことはお勧めしません。
ホバー時のアクションを表示
ホバー時に直接アクションを表示することで、クリック/ホバーを完全に削除できます。クリックを保存するので、より良いと思います（簡潔にするため、移動/名前の変更は表示していません）。
メイン画面にアクションを表示する
デザインが許せば、アクションは常にメイン画面に表示できます。アイコンが曖昧だと思われる場合は、ツールチップを追加したり、レイアウトを変更して、ラベル付きのアイコンを表示したりできます。
ユーザーがドロップダウンを閉じる方法を追加することを検討する場合があります。この方法では、閉じる方法に混乱がなく、マウスを領域の外に移動して誤って閉じることによる煩わしさがありません。
私はたまたま、HTPC上のYouTubeで、特にネストされたメニューで、その動作かなり煩わしいを見つけました。リモートマウスは簡単に軌道から外れ、wham最初からやり直す必要があります。完璧な器用さを備えていない人なら誰でも、これが煩わしいと感じるでしょう。
ポインタの正確なパスをUIの必要な部分にしないでください。移動性の問題を抱えている人もいれば、ポインティングデバイスのアイデアが少ない人もいれば、移動中の車に乗っている人もいます。
DPSが答えた一貫性についての話とは別に、ホバーの代わりにクリックを使用することをお勧めします。グリッドレイアウトがあるようですが、ユーザーがこれらのグリッドアイテムの上にマウスを移動したときにアクションメニューをポップアップするユーザーに迷惑をかけたくないと確信しています。
ユーザーがアクションボタンをクリックしようとした場合にのみ、明示的にすることをお勧めします。ここでできることの1つは、アイコンを変更して、アイコンをクリックして切り替える必要があることを明確にすることです。
ユーザーがページの他の場所をクリックした場合は折りたたむことを確認してください（これには、別の画像のアクションメニューをクリックしようとしたユーザーも含まれます）
もう1つ試すことができるのは、共通のアクションボタンを用意して、ユーザーが長いクリックで画像を選択できるようにすることです。ここで問題になる可能性があるのは移動オプションだけです。私はあなたがそこにどのような機能を持っているのか分かりません（つまり、それはドラッグ可能で、ソートをクリックしますなど）
ユーザーがグリッドで1以上の画像を選択すると、これらのアイコンをスムーズにアニメーション化できます。
私が言うには：...をクリックして開き、ドロップダウンメニュー以外の場所をクリックして閉じます。開くボタンをクリックすると、離れて戻る傾向があり、もう一度押すと疲れる場合があります。ドロップダウンリストの最初の項目を押す危険もあります。ホバーのオープン/クローズのパフォーマンスが非常に悪いので、選択肢にすべきではないと思います。 ...ボタンからメニューに移動すると、ドロップダウンが消えます。
- ドロップダウンメニューを開閉するマウスオーバー、マウス離脱イベントは、一般的には良い考えではありません。
- クリックまたはタッチイベントは、ドロップダウンメニューを開閉するのが望ましいです。
具体的には...画像要素の上にドロップダウンが開くという質問の例では、ユーザーがマウスを動かしたときにメニューの不透明度を下げる（例：20％）ことができます。メニューボックスの。その場合、ユーザーはメニューの下の要素を引き続き表示できるように、部分的に透明なメニューを手に持っています。
マウスが一瞬の間その領域から1ピクセル外に出たとしても、そのようなリストをすぐに閉じる-特にサブメニューのために領域が変化するドロップダウンの場合（これは、ユーザーが最悪の場合、ナビゲーションチェーン全体を繰り返さなければならないことも意味します）など。-偽のマウスの動きの影響を非常に受けやすい傾向があります（マウスのスキルが悪い、マウスが速度ではなく精度が悪い、振動が多い作業環境、UI要素のサイズが小さい場合）。
開いたメニューを永久に保持すると、コンテンツや他のUI要素をカバーしているメニューを閉じる方法についてユーザーが混乱する可能性があります。
活性化領域と非活性化領域の間の遅延といくつかのヒステリシスは、恐らく最小の驚きの原則に従うでしょう...
モバイルかどうか？
数年前、唯一の入力がマウスを使用していた（またはAltキーを押して...誰もそれを実際に期待していなかった）場合、マウスのホバーが適切なオプションでした。
もうそうじゃない。
使用している最小化されたデザインは、そのデザインが小型デバイス向けであることを意味しているため、実際のマウスホバーはありません。
私の意見では、クリックして開き、クリックして閉じます。
タイマー？
しかし、あなたもタイマーを含めることができますです。数秒間入力がない場合、そのメニューは折りたたまれる可能性があります。
マウスアウトに関するいくつかの問題
モバイルデバイスに明らかな問題があります。
デスクトップユーザーが問題を抱えている可能性があります。たとえば、マウスポインタが狂ったように動かないマウスの欠陥などです（安いマウスがときどきありました）。
一部のラップトップパッドは扱いにくい場合があります。マウスをホバー/アウトするには、ユーザーのスキルが必要です。
マウスホバー-マウスアウトアプローチについて考えるもう1つの問題は、ユーザーが何らかの理由でポインターを移動する必要がある場合でも、メニューを開く必要があることです。画面キャプチャ？別のウィンドウで作業していますか？