複数のレベルが呼び出されたこのメニューは何ですか？それを使用する必要がありますか？
上記のメニューは何と呼ばれていますか？このメニューは、Google Chromeのブックマークに表示されるメニューに似ています。
このパターンを使用することのprosおよびconsとは何ですか？
このパターンをダッシュボードで使用する予定です。私の設計では、レベルは3に制限されています。これは使用可能ですか？使いやすさの点でユーザーフレンドリーですか？
一般に、カスケードメニューの主な欠点は、メニューからサブメニュー、サブサブメニューに移動するためにカーソルを移動しなければならない経路が狭いことです。 （つまり、メニュー選択からそのサブメニューの最後の項目に直線でマウスを移動することはできません。メニュー項目を横切って水平にマウスを移動し、サブメニュー内を下に移動する必要があります。）ユーザーがマウスをオフにするのは簡単すぎるそのパスの別の不要なメニューがポップアップ表示されます。これはあなたに起こったと確信しています。嫌いです。
これは通常、3つの方法で処理されます。
- カスケードメニューを使用しないでください。
- ホバー遅延後にサブメニューが表示されるようにします。これにより、ユーザーは一時的にそのパスから外れることができますが、ユーザーの速度が低下します。
- アマゾンがした クールなことをしてください。 それらは、メニューからサブメニューへのユーザーのありそうなパスをカバーするくさび形のエリアをユーザーに与えます。
それらはMulti Level DropdownsまたはMulti Level Menus と呼ばれます=
それらは（ Mac OSガイドライン によって）サブメニューとして知られています。
サブメニュー はメニューとして機能するメニュー項目であり、選択するとネストされた項目のセットを表示します。
これらは、これらの使用を制限するためのいくつかのガイダンスといくつかのベストプラクティスを提供します。
サブメニューの深さと長さを制限します。サブメニューを含める必要がある場合は、それらを1つのレベルに制限します。サブメニューに5つを超える項目が含まれている場合は、独自のメニューを提供することを検討してください。
マテリアルデザインでは、@ RCburnsの回答に従って カスケードメニュー と呼んでいます。
それらはデスクトップのみを対象としています。
メニュー項目は、ネストされたサブメニューを表示できます。複数のネストされたサブメニューをナビゲートするのは難しいため、理想的には、ネストを1レベルの深さに制限します。
（彼ら自身の例は2つのネストされたレベルを示しています）
カスケードメニュー（別名マルチレベルメニュー）の使用は、依然として非常に一般的な設計パターンですが、ネストの3つのレベルの使用は一般に避けられる必要があるため、メガメニューの使用を検討してください。
AppleとGoogle（@Mike Mが指摘）の両方の推奨事項に反する3つのネストされたメニューを使用することを計画しているようです。アクティブ化するカスケードメニューの主なUXの問題ホバー時、@ Ken Mohnkernの回答で指摘されているように、マウスの狭い経路です（狭いマウスコリドーと呼ばれることもあります） 優れた議論 この正確な問題について数日前に説明しました。カスケードメニューの使用を選択した場合に役立つと思われる追加のリソースがいくつかあります。
メガメニュー
情報アーキテクチャ、ページレイアウト、およびその他の計画されたナビゲーションについての詳細がなければ、具体的な推奨を行うことは困難ですが、 メガメニュー の使用を検討することをお勧めします。 NNGroupは、メガメニュー サイトナビゲーションに最適 であることを示しています。メガメニューの大きな利点の1つは、一目でより多くの情報を表示できることです。 Amazonのトップレベルのナビゲーションを見てみましょう。
ご覧のとおり、カスケードメニューですが、サブメニューはメガメニューのみです。注意事項：
- トップレベルのメニューには、サブメニューに表示される予定（Health、Beauty、およびGrocery）が明確にラベル付けされていました
- サブメニューは2つのカテゴリ（健康と美容、食料品）を含むメガメニューです。
- 彼らはメガメニューを使用して、素晴らしいタイポグラフィと魅力的な画像を使ってインスタントクーポンを売り込みました。従来のカスケードメニューとは異なり、メガメニューは、関連コンテンツのマーケティングや宣伝に使用できる追加のデザイン要素を追加する機会を提供します。
モバイルで表示すると、メニューはメガメニューとして表示されなくなり、より一般的なドロップダウンになります。
その他のリソース
カスケードメニューを使用する場合は、Smashing Magazineに ドロップダウンメニューデザイン のベストプラクティスに関する記事があります。記事は2009年からですが、まだ適用できるいくつかの良いアドバイスが含まれています。より多くの 現代的な記事 があり、ドロップダウン/カスケードナビゲーションに関連する対話設計に関する優れた実用的なアドバイスを提供します。 Design Modoには 記事 があり、ドロップダウンメニューのUXデザインのヒントに、より実用的なアドバイスが記載されています。
実際の名前はわかりませんが、常にカスケードメニューと呼んでいます。ほとんどの場合、ユーザーを失うのは非常に簡単なので、私はそれらを避けるために最善を尽くします。つまり、これはApple=がファイルナビゲーションの最初から使用しているパターンです。このアプローチの背後にある核となる考えは、ユーザーが検索しているアイテムを探す場所を知っているということです。彼らはそのアイテムを識別したら、他のすべてとの関係でそれがどこにあったか覚えておく必要はありません。
あなたはそれを3つのレベルの深さで取っていると言いますが、各レベルはどれくらい大きいですか？レベルに含まれているアイテムが多すぎると、レベルが多すぎるのと同じくらい良くありません。