OnClickを開くWebメガメニューはOnClickまたはマウスアウトを閉じる必要がありますか？
私はこのサイトで、ホバーまたはクリックによってWebサイトのメガメニューをアクティブ化/非アクティブ化する必要があるかどうかについて調査を行っています。
私は 質問 を見つけました。メニューの操作に関して良い答えがあります。
私が知りたいのは、クリックで開いたメニューがクリックで閉じる必要があるかどうか、またはメガメニュー領域を離れたマウスがより使いやすいかどうか（つまり、クリックしてアクティブにし、マウスアウトして非アクティブにする）ですか？
メガメニューには多くの情報が含まれており、ユーザーはおそらくそれを操作する際に多大な精神的負荷を受けています。したがって、ランダムなマウスアウトがメニューを閉じると、タスクフローが壊れて、ユーザーが作業を再開するのが非常に煩わしくなります。
だから私はメガメニューを閉じるonclickだけでなく、メニュー領域の外側でonclickを閉じるのが妥当だと思います。これらのアクションは、ユーザーの意図をマウスアウトよりも明確な方法で反映します。
この質問は私にルールを導きます： マーフィーの法則 を考慮して、より複雑または重要な相互作用はより保護されるべきです-「失敗する可能性のあるものはすべて失敗するでしょう」。
私はこれのソースを見つけることができませんでしたが、私の直感は、人々がお互いを反映するための補完的な行動を期待していることです。
既存の例：
- ドアを引いて開くには腕を手前に動かし、押して閉じるには手から離します
- リンクにカーソルを合わせると下線がアクティブになり、マウスを離すと削除されます
- マウスをウィンドウの端に移動すると非表示要素が全画面モードで表示され、マウスを離すと再び非表示になります
- ボタンを押して何かをオンにし、もう一度（もう一度押すと）ポップアウトしてオフにします
クリックで開いたメニューは、おそらくクリックでも閉じると予想されます。
マウスアウト/ホバー（タッチスクリーンユーザー、キーボードのみのユーザーなど）には多くの問題があるため、クリックして開閉すると、これらの問題の多くを無効にすることができます。
クリックして閉じるとマウスアウトほど使用できないことが心配な場合（おそらく、クリックして何かを開くのと同じ方法でクリックして閉じることができるかどうかが明確でないため）、「閉じる'メニュー項目自体にリンクします。
これにより、メニューを閉じる方法がより明確になるため、使いやすさだけでなく、キーボードを使用するユーザーも、マウスを使用したり強制的にメニューを閉じたりせずにメニューを閉じることができるため、アクセスしやすくなります。ナビゲーションメニューオプションを選択する必要があります。
クローズクリックをそのリンクに制限する必要はありません。クリックするとメニューが閉じるはずですが、メニューの外側をクリックするだけでクローズをフックして、同じ機能をトリガーすることもできます。
download bmml source – Balsamiq Mockups で作成されたワイヤーフレーム
私の意見では、メニューにonclickを開き、onclickを閉じることは理にかなっています。トグルまたはライトスイッチと同様に、反応を引き起こすアクションとそれを逆にする同じアクションの単純なルールに従います。
アクティブな領域の外側をクリックしてドロップダウンメニューまたはモーダルを閉じることも一般的です。クリックは意図的なアクションであるため、外部クリックの場合でもメガメニューを閉じるのは当然のようです。
なぜ両方ではない？もちろん、ユーザーがメニューの外側をクリックした場合は、すぐに閉じる必要があります。ただし、ユーザーがメニューの外に移動した場合、これは、ユーザーが終了したことを「証明する」可能性がある場合とそうでない場合があります。解決策は、クリックするとすぐに閉じ、マウスアウトで少し遅れて閉じることです。
明らかに、この遅延のタイミングは重要です。遅延が短すぎる場合でも、選択を行うときに誤ってメニューからマウスを離したユーザーをイライラさせます。遅延が長すぎると、サイトの速度が遅くなり、対話がユーザーを混乱させる可能性があります。メニューのサイズ/複雑さ、およびユーザーに関する詳細は、遅延時間の目安になります。
考慮すべき追加のポイント：
私が使用する特定のデスクトップアプリケーションには、クリックすると開きますが、マウスアウトでは閉じるメニューがあります。 Webスタイルのメガメニューはありませんが、メニューとサブメニューには30以上の項目を含めることができます。数ピクセル間で誤って移動した後、メニューが閉じた回数を数えることすらできません。8秒かけてレベル3のサブメニュー（スクロールなど）に移動する場合は特に厄介です。このため、Macのメニューはマウスアウトで閉じません。
しかし、メガメニューの場合、メニュー領域はかなり大きく、「ユーザーが誤ってマウスオーバーしてしまう可能性はどのくらいあるのか」と自問する必要があります。
アクセシビリティの問題も忘れないでください。メニューがクリックでのみ開く場合、それはそこにトップレベルのリンクがないことを意味します。つまり、スクリーンリーダーやキーボードを使用するユーザーは、すべてのメガメニューをたどるだけで目的の場所にたどり着く必要があり、特定の状況ではかなりの負担になる場合があります。
私は強くお勧めします：
- トリガーリンクが、サイトの上位レベルのページに移動する真のリンクであることを確認してください
- ホバーするとメガメニューが表示され、マウスアウトで閉じる
- キーボードを使用してメニューを開くことができることを確認します（ホバー操作はありません）。
Target.comがメガメニューで何をするかを見てみましょう。
Webに精通しているユーザーとして、ドロップダウンメニューは、その外にカーソルを置いたときにのみ閉じることを期待しています。閉じるためにマウスをクリックする必要はないと思います。
私はここで意見が否定されることを知っていますが、「正しい」答えは、大多数のユーザーが期待するものです。ほとんどのユーザーは私と同じ期待を抱くと思います。この質問に答えるためのアイデアを得るために、非公式またはより深刻な利害関係者の調査を行うこともできます。
これは終了した質問であることは知っていますが、2セント投入すると思いました。
ビザブランドのWebサイト（ http://corporate.visa.com/newsroom/visa-logos-and-images.shtml ）で私のお気に入りの実装を見つけて本当に驚きました
メニューはマウスオーバーで表示され、マウスアウトでフェードし始めますが、アニメーションが終了する前にユーザーがメニューに戻ると、完全な不透明に戻ります。
それは非侵襲的で、見栄えが良く、あなたがあなたの場所を失う可能性はほとんどありません。また、最新のブラウザーで純粋なCSSを使用して実現することもできます。