web-dev-qa-db-ja.com

どのような状況でメガメニューを使用するのが最適ですか?

私が現在取り組んでいるサイトには、通常、ナビゲーションに関する3つのレベルがあります。サイトマップとナビゲーションはすでに行われています。彼らはメガメニューを使用してトップレベルのナビゲーションアイテムとサブカテゴリを表示することを選択しました。メガメニューを使うのが一番いいのはいつですか?メガメニューを採用するメリットとデメリットは何ですか?

4
Reloaded

すばらしい答えがいくつかあります。すでに与えられた答えを繰り返さないようにする一方で、メガメニューの主な長所と短所は次のとおりです。

メリット

  • メガメニューを使用すると、ユーザーが利用できるすべてのオプションを一度に確認でき、必要に応じてさらにサブナビゲーションにドリルダウンする必要がありません。これを引用するには メガメニューの利点に関する記事

従来のドロップダウンメニューでは、ユーザーが親カテゴリにカーソルを合わせるまで、ほとんどすべてのオプションが非表示になっています。ユーザーがデザイナーと同じ階層で考えていない場合、彼女はトレジャーハントをプレイして、多くの親アイテムにカーソルを合わせてアイテムを見つける必要があります。これは、ユーザーがカーソルを正確に使用していないときにドロップダウンが消え続けると、フラストレーションを引き起こす可能性もあります。理論的には、メガメニューはその問題を解決できます。

また、 Jacob Nielsonのメガメニューに関する記事 を参照することをお勧めします。

多くの機能を備えた大規模なサイトの場合、通常のドロップダウンメニューは通常、ユーザーのオプションのほとんどを非表示にします。はい、スクロールできますが、(a)面倒で、(b)下にスクロールすると初期オプションが非表示になります。その結果、すべての選択を視覚的に比較することはできません。あなたは短期記憶に依存する必要があります。人々は十分な心を持ち、短期記憶をいじると、サイトでタスクを遂行する能力が低下します。メガドロップダウンはすべてを一目で確認できるので、ユーザーは覚えるのではなく見ることができます。

  • それらはオプションを効果的に整理するのに役立ちます:Jacob Nielsonの記事を引用するには

メガドロップダウンを使用すると、アイテム間の関係を視覚的に強調できます。これも、ユーザーが自分の選択を理解するのに役立ちます。

  • メガメニューを使用すると、よりタイポグラフィの選択肢を使用でき、アイコンや画像を使用して、ユーザーがすばやく区別できるようになります。 Jacob Nielsonの記事を引用するには:

プレーンテキストはすばらしいものですが、Word 2007の例が示すように、イラストは確かに一口の言葉に値するものです。メガドロップダウンにより、必要に応じてアイコンや画像を簡単に使用できます。また、テキストだけに固執しても、豊富なタイポグラフィを自由に使用できます(たとえば、リンクのサイズを重要度に応じて区別できます)。


短所

  • 適切に構造化されていないと、非常に多くのオプションが存在するため、扱いにくく、読みにくくなる可能性があります。

enter image description here

上記の例を見ると、Mega Menuはユーザーにすべてのオプションを提供しますが、突然、大きなサイトマップのようになり、ユーザーが探し回って探しているコンテンツを見つけようとします。

  • メガメニューはスクロールせず、拡大縮小しないため、画面サイズの多くを占める可能性があります。画面サイズが小さい場合、またはブラウザの解像度が低い場合にメガメニューが不足する2つの例を次に示します。

enter image description here

enter image description here

  • ほとんどのメガメニューはホバーベースです:ホバーベースのメニューは、ナビゲーションのモードとして標準のマウスを使用するデスクトップベースのWebサイトに問題を引き起こさない場合がありますが、ホバーオプションがフラットになるタッチデバイスのかなりの問題。ただし、クリックに基づく、ホバーに依存しないメガメニューを実装することは可能です。ただし、これにより、インターフェイスを操作するための労力が追加され、ユーザーの目標が妨げられます。

メガメニューのデザインのベストプラクティスについては、この記事 を参照することをお勧めします

この記事もご覧ください: メガドロップダウンナビゲーションメニューの15の良い例

5
Mervin

メガメニューは、多くの明確に定義されたカテゴリおよびサブカテゴリにアイテムの大きな選択がある場合に役立ちます。例として、AmazonまたはeBayを取り上げます。これは、カテゴリとサブカテゴリがユーザーに対して明確に定義されていない場合には適切な選択ではありません。

それらの利点は、多くのカテゴリを含めることができ、ユーザーが探しているサブカテゴリにすばやくドリルダウンできる一方で、比較的スペース効率がよいことです。

主な欠点は、選択したカテゴリについてユーザーが考える必要があることと、カテゴリを選択(またはホバー)したときにのみサブカテゴリが表示されることです。ただし、多くの状況で、これ以上の選択肢はありません。

4
JohnGB

JohnGBの発言に同意しますが、AmazonとeBayの両方に非常に大きなカタログの表示とナビゲートで同様の問題がありますが、それらにも膨大なリソースがあります。メガメニューは扱いにくい場合があり、使用可能にするためにテストと反復が必要になる場合があります。多くの場合、すぐにわかる以上のものがあります。これは、Amazonのメニューから機能の1つを収集している人に関する記事です。

http://bjk5.com/post/44698559168/breaking-down-amazons-mega-dropdown

メガメニューの一般的な問題:

http://www.uie.com/articles/mega_menus/

したがって、デメリットまたは注意事項は、適切に実行するために多くのリソースを必要とする可能性があることです。

1
obelia

メガメニューの悪魔の擁護者を演じるために、時にはユーザーにあまりにも多くの選択肢を与えることによって、ユーザーに明確な決定を下すのが難しくなるほど多くのテキストをユーザーに提示します。また、各ページに表示されるメニューオプションが増えるため、SEOを考慮に入れる必要があります。ページあたりのリンク数が増加します。これは、カテゴリを犠牲にして、サイトのより深いページを後押しする可能性があります。

また、メガメニューサイトは、一般的な市場を扱っている場合、ショッピングに関連するサイトになりがちです。 Amazonのようなサイトには非常に多くの製品とカテゴリがあります。Appleのようなサイトには製品がメインカテゴリにあり、幅広い製品はありませんが、メガメニューが常にあります。簡単なナビゲーションとメニューがあります。

あなたはあなたの競争が何をしているのかをチェックすることができます、そしてあなたが議論の一部としてSEOを除外したいなら、両方のメニューをデザインして、それらをテストしないのはなぜですか?直帰率、サイト滞在時間、セッションあたりのページ数などが変化するため、ユーザーがサイトを多かれ少なかれ使用しているかどうかをテストですぐに明らかにする必要があります。

0
aquestforcode

マウスホバーでメガメニューを使用するという考えは、いくつかのさまざまなグループのユーザーの例を区別することにつながるため、非常に不適切です。

  1. パーキンソン病にかかっている人
  2. マウスのパスに問題があるコンピュータ

編集:

私はバットマウスパスを意味します(リンクがクリックされている場合、サポートされているメガメニューにカーソルを合わせるのではなく、タブキーを使用して移動できます)。