web-dev-qa-db-ja.com

ホバーvsメガメニューをクリック

新しいメガメニューを実装しています。現在のメガメニューのサブメニューオプションは、ユーザーカーソルを合わせると表示されます。マウスクリックなどのより明示的なアクションがこれに適していますか(以下の例のように)?

enter image description here

2
zakcreate

これは興味深い質問です。

TL; DR-個人的には、「メガメニュー」を開くことはアクションのほうが多いので、私はクリックで行きます。

おおまかな目安として、action(マウスクリックで示される場合があります)とinteraction(ホバーまたはなど)。

アクションは何かを発生させます-それが変更、追加、削除、または類似のものであるかどうか。一方、相互作用は何かが変更、追加、削除などされることを意味しません

あなたの質問に関連して、メニューを表示することは、どこへのナビゲーションも開始しないので、より多くの対話です。ただし、ホバリングして巨大なメニューを表示することは、ほとんどアクションと見なせるようになるポイントがあります。たとえば、参照しているMicrosoft Webサイトの例では、メニューによってページの残りの部分が非表示になっています。これは、何かが変更されているため、アクションと見なすことができます。 (ユーザーの視点)

結論として、「メガメニュー」がアクションなのかインタラクションなのか、さらには、ユーザーエクスペリエンスを何らかの方法で変更、追加、削除、または変更するかどうかを自問する必要があります。 ユーザーがアクションを開始する場合-クリックを使用します。インタラクションの場合-ホバーを使用します。

4
Aaron

クリック

この特定のケースでは、ホバーのいくつかの短所または落とし穴も考慮すると便利です。

  • 誤検知:マウスポインターがメニュー上に来るたびにホバーアクションが発生します。しかし、ユーザーが意図的にこれを行わないことがよくあります。ホバー領域は、たまたまユーザーがマウスを動かしたいパスに沿っています。 @aaronが彼の回答ですでに指摘したように、メガメニューはページの残りの部分を見えなくします。

    • 非粘着性:マウスがオブジェクト上にある限り、ホバー状態は持続します。ホバー中にマウスを使用してユーザーが操作することはできません。設計には関連するアクションがない場合がありますが、ユーザーが実行する可能性のあるコピー/貼り付け、画面の記録、および他のマルチタスク(たとえば、誰かが提案したナビゲーションパスを読むためにメールに切り替える)を検討してください。

    • False negatives:ユーザーがポインターをホバー項目の外側に1ピクセル移動すると、項目が折りたたまれます。これは、ホバー領域が大きいメガメニューの場合はそれほど問題ではありません。開いているとき。ただし、一部のホバーメニューは、許容度が低くなります。それらはサブサブメニューでユーザーを苛立たせ、ユーザーがメニューからサブメニューへの軌跡を逃した場合、ホバー相互作用はそれらを再び開始することを強制します。

ホバーは、ボタンリップルエフェクトやアニメーションなど、非常に軽いインタラクションに最適です。非表示のナビゲーションやクリックオプションの表示など、ユーザーが読んだり、一時停止したり、考えたりする必要のある、より複雑な操作の場合は、クリックします。

2
wintvelt

ホバー!

ホバリングはexploring!のスムーズなアクションです

スムーザーとライターの相互作用です。これにより、オプションをより迅速に探索およびナビゲートできます。マウスを振って、何があるかを確認しているように考えてください。

それをクリックと比較してください:

  • クリックは2つのアクションで構成されます(ホバー+クリック)。
  • クリックは、ホバリングと比較して、どういうわけかより断定的なアクションです。

メガメニューは、複数のメニューとサブメニューを持つ大きなパネルです。 smootherナビゲーションを許可するアクションに投票します。

1
Mo'ath

どちらも!

メニューを展開し、クリックして別のページに移動する必要があると思います。

ここでホバーするだけの問題は、ユーザーが誤ってボタンの上にホバーしたときに、別のページに移動したとユーザーが考える可能性があることです。

解決策は、ユーザーが「展開」ラベルをクリックして展開できる小さなホバーメニューである可能性があります。

0
Tvde1