2レベルのメニュー：なぜですか？そしていつ？
2つのレベルのメニュー：それらを使用する必要がありますか？なぜ重要なのですか？
これを説明するリソースは見つかりませんでした。それらを避けて、提示するものが多すぎる場合にのみ使用すべきですか？
ユーザーは複数の方向に注意深くナビゲートする必要がないため、2つのレベルのメニューは従来のドロップダウンメニューより使いやすくなっています。
AskTogの説明 のように、従来のマルチレベルのドロップダウンメニューを使用します。
ボトルネックは、第1レベルのメニューと第2レベルのメニューの間の通路です。ユーザーはまず、マウスポインターをカテゴリーメニュー項目まで下にスライドさせます。次に、ポインタをセカンダリメニューに移動するために、マウスを（水平に）直接注意深くスライドさせる必要があります。
download bmml source – Balsamiq Mockups で作成されたワイヤーフレーム
メニューの外に迷うことなく横に移動しようとすると、特に身体の不自由なユーザーにとって難しい場合があります。
一方、1つのメニュー内に2レベルの階層を配置すると、迷路を注意深くナビゲートして目的の場所に移動する必要がないため、ユーザーの時間を節約できます。 2レベルのメニューを使用すると、下に移動してから横に移動してから再び下に移動する代わりに、真下に移動できます。
2レベルのメニューは、比較的単純な階層でのみ機能します。より大きな階層では、非効率になります。たとえば、階層の各レベルに10のメニューがある場合、10のいずれかを選択してから別の10のいずれかを選択するのではなく、ドロップダウン内に100のオプションが表示されるため、このようなメニューは不適切です。合計20オプション）。レベルごとに5つ以下のアイテムの階層の場合、2レベルのメニューが適切に機能します。
編集：Jacob Nielsenが なぜメガメニューは通常のメニューよりもうまく機能し、どのように実装するのか に関する記事を持っています。
ホバーメニューについて本当に質問していることを考慮してください。
これらは、リッチコンテンツWebサイトを作成する上で非常に有効な手段です。落ちたくない罠でもあります。
彼らはしばしばひどく設計されているので、それらは使いにくいです。 @Marvinは、グラフィックインターフェイスで使用する際に対処できるいくつかの問題を指摘しています。
アマゾンは私たちにとってこの障害を克服するのに十分親切でした：
- 彼らのフィードバックは超高速です
- ユーザーは、行きたいアイテムに直接移動できます
カーンアカデミーのベンカメンス がその方法を説明します。必読の記事：かなりずる賢く信じられないほど賢い人たち。
以下は、数週間前に私の世界を揺るがした画像です。
もちろん、コンテンツが適切に構成されておらず、レイアウトが適切でない場合、これらのトリックはすべて役に立たないはずです。コンテンツは考慮すべき最も重要なことです。
- フェーディングのような特殊効果を使いすぎないようにしてください（私は次のようなルールに従います：役に立たない場合は使わないでください）。
- 何が表示されるかを明確にします（「もっと見る」は避けてください。思ったほど魅力的ではありません）。
- 部屋を使うのを怖がらないでください。空白スペースが役立ちます（またはホバーメニューを使用するポイントは何ですか？）
- Steve Krug が言うように：テキストを半分にカットしてから、もう一度半分にカットしてみてください
直感的にして、注意深く進めてください。
2009 a Nielsen Norman Groupの結果 大きな2次元のドロップダウンパネルは、ナビゲーションオプションをグループ化してスクロールを排除し、タイポグラフィ、アイコン、ツールチップを使用してユーザーの選択を説明します。
これは素晴らしいように聞こえます...（そしてこれはすべてインターネット標準で非常に古いです）。
2010年、彼らはメガメニューの悪い例をますます調査し、見つけた後、 ステートメントを修正 しました。
メガドロップダウンはデザインキャンバスです
より大きなスキームでは、ここで述べたユーザビリティの問題はそれほど深刻ではありません。それらはサイトの使用を数パーセント削減しますが、誰かのビジネス指標を破壊することはありません。しかしそれでも、正しい設計が欠陥のある設計と同じくらい簡単に実装できるのに、なぜユーザーエクスペリエンスがまったく低下するのでしょうか。
昨年述べたように、メガドロップダウンはWebサイトナビゲーションの使いやすさを向上させることができます。しかし、これらの新しい例が示すように、メガには独自のユーザビリティの問題がある可能性があります。
もちろんできます。
計画を窓の外に捨てると、最先端のエッジに留まろうとすると、デザインが悪くなる可能性があります。統計分析とユーザーフィードバックを使用してデザインをフォローアップし、メニューのどの部分が無駄なスペースであるか、またはユーザーにとって使いやすいように再編成できるものを確認してください。分析フィードバックに基づいて、ユーザーが使用するさまざまなデバイスとブラウザーでテストします。最先端の機能は常に下位互換性があるとは限らず、ユーザーエクスペリエンスが低下する可能性があります。
そうは言っても、これが Amazonの新しいメガメニューの2013年探査 です。
ボタンがいくつかあり、サブメニューのあるボタンが1つしかない場合でも、ユーザーインターフェースは悪くありません。ただし、それらの多くにサブメニューがある場合は、サイドページメニューを検討することをお勧めします。そうしないと、読みにくくなり、何を伝えようとしているのかがはっきりしません。
ここで示した例はホバーメニューです。ホバーメニューは、大きなナビゲーションを定義するのに役立ち、ユーザーがメインナビゲーションの子ノードとサブ子ノードを明確に確認できるようにし、垂直方向のスペースも節約します。ただし、 この記事が示すように =
ホバーメニューの悪い点の1つは、ユーザーにホバートンネルを巧みに移動させることです。ホバートンネルは、ユーザーがメニュー項目をクリックするためにマウスをトンネルさせる必要がある通路です。技術にあまり詳しくない年配のユーザーは、多くの場合これを行うのに苦労します。技術に詳しいユーザーでも、メニュー項目をクリックするためにマウスが限られたパスを移動しなければならないのは不愉快なことです。
これにより、メニューが使いにくくなるだけでなく、ユーザーがナビゲーションタスクをすばやく完了するのが非効率になります。これは、メニューが開いたときに、ユーザーがマウスを目的のメニュー項目に直接移動できないためです。その場合、誤ってメニューを閉じてしまいます。代わりに、メニュー項目をクリックするたびに、マウスをホバートンネルに注意深く移動する必要があります。ユーザーがウェブサイトをナビゲートするために一生懸命に努力しなければならない理由はありません。
ホバーメニューが使いにくい理由を説明する記事で述べられているもう1つのポイントは、
ホバーメニューを使用すると、周辺機器のアイテムが遅くなり、クリックしにくくなります。
マウスをメニューの外に移動すると、ホバーメニューが右に閉じます。これにより、周辺のメニュー項目はメニューの端に最も近いため、クリックしにくくなります。ユーザーはマウスを速く動かしてメニュー項目をクリックすることはできません。遠くにある周辺のメニュー項目に近づくと、速度を落とす必要があります。また、ほとんどのメニュー項目は小さなフォントのテキストリンクであるため、ターゲットが小さくなり、処理速度がさらに低下します。